@import url(vars.css);
@import url(fonts.css);

html {
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='90' height='90' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(90)'%3E%3Crect width='100%25' height='100%25' fill='rgba(25, 23, 36,1)'/%3E%3Cpath d='M-0.5 20v20h1v-20zM39.5 20v20h1v-20z' fill='rgba(64, 61, 82,1)'/%3E%3Cpath d='M-10 29.5 h60 v1 h-60z' fill='rgba(64, 61, 82,1)'/%3E%3Cpath d='M19.5 0v40h1v-40z' fill='rgba(64, 61, 82,1)'/%3E%3Cpath d='M-10 9.5h60v1h-60z' fill='rgba(64, 61, 82,1)'/%3E%3Cpath d='M-0.5 0v20h1v-20zM39.5 0v20h1v-20z' fill='rgba(64, 61, 82,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ")
}

main {
    width: var(--site-width);
    background-color: var(--main-bkg);
    border: var(--border) var(--border-color) solid;
    margin: auto;
    filter: drop-shadow(var(--drop-shadow) var(--drop-shadow) var(--border-color));
}

article {
    padding: var(--padding);
}

aside {
    padding: var(--padding);
    text-align: center;
    width: var(--aside-width);
    padding-right: 0px;
}

box {
    display: flex;
    flex-direction: row;
}

header, footer {
    background-color: var(--header-color);
    padding: var(--padding) !important;
    margin: 0;
}

hr {
    border-style: dashed;
    margin: 10px;
}

img {
    max-width: 50%;
}

ul {
    list-style: none;
    padding: 0px;
    margin: 0;
}