:root {
    --accent-color: #3580c6;
    --border-weight: 2px;
    --body-width: 47.5em;
    --body-above: 3em;

    --bg-animated: url(/starfield.webp), url(/starfield-static.png);
    --bg-static: url(/starfield-static.png);
    --bg-color: black;


    --display-font: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'Lucida Sans Regular', 'Trebuchet', 'Trebuchet MS', 'Droid Sans', sans-serif;
    --code-font: Menlo, Monaco, Consolas, "Courier New", monospace;

    --card-bg: #141414;
    --card-text: white;
    --card-link: #8cb9e3;
    --card-spacing: 1.5em;
}

body {
    background-color: var(--bg-color);
    background-image: var(--bg-animated);
    max-width: var(--body-width);
    margin: var(--body-above) auto;
    font-family: var(--display-font);
}

@media (prefers-contrast: more) {
    :root {
        --bg-animated: none;
        --bg-static: none;
        --bg-color: white;
        --accent-color: #000;
        --card-bg: #fff;
        --card-text: #000;
        --card-link: #00f;
    }
}

@media (prefers-reduced-motion) {
    body {
        background-image: var(--bg-static)
    }
}

@media (max-width: 48em) {
    body {
        margin: 0.5em;
    }
}

.card {
    background-color: var(--card-bg);
    border: var(--border-weight) var(--accent-color) solid;
    border-radius: 0.5em;

    margin: var(--card-spacing) 0 0 0;

    color: var(--card-text);
}

.card .card-header,.card-body {
    padding: 0.3em 1em 0.3em 1em;
}

.card .card-header {
    font-size: 1.2em;
    text-align: center;
    border-bottom: var(--border-weight) var(--accent-color) solid;
}

.group-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: var(--card-spacing);
    margin: var(--card-spacing) 0 0 0;
}

.group-cards .card {
    margin: 0;
    flex: 1 1 calc(var(--body-width) / 2 - var(--card-spacing) - 1em);
}

.card h1,h2,h3 {
    margin: 2px 0.5em 2px 0;
}

.card p {
    text-indent: 1em;
}

.card a {
    color: var(--card-link);
}

.card a:hover {
    color: var(--card-bg);
    background-color: var(--card-link);
}

.email:hover {
    color: var(--card-link);
    background-color: none;
}

.card code {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

.card pre {
    border: 1px var(--accent-color) solid;
    padding: 0.5em;
}


.card-body ul,ol {
    padding-left: 1.5em;
}

.card-body ul {
    list-style-type: square;
}

.card-body li {
    padding-bottom: 0.3em;
}

ul.contact {
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.contact li {
    list-style-type: none;
    display: inline;
}

.eightyeightthirtyone {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: var(--card-spacing) 0 0 0;
}

.eightyeightthirtyone img {
    image-rendering: pixelated;
    width: 88px;
    height: 31px;
    border: 1px solid transparent;
    -webkit-user-select: none !important;
    user-select: none;
}

.eightyeightthirtyone img:hover {
    border: 1px solid var(--accent-color);
}