html {
    background-image: linear-gradient(#f2f2f2, #b3b3b3);
    background-attachment: fixed;
    color: black;
}

body {
    padding-left: 2em;
    height: 100%;
    margin: 0;
}

article.card {
    position: relative;
    display: grid;
    grid-template-columns: max-content auto;
    border: 1px solid black;
    margin: 1em;
    width: 27.5rem;
    flex: none;
    clip-path: polygon(0% 0%, 0% 100%, calc(100% - 1em) 100%, 100% calc(100% - 1em), 100% 0%);
    background-color: #f7f7f7;
}

article.card > * {
    padding-top: 1em;
    padding-bottom: 1em;
}

dialog {
    background-color: #f2f2f2;
    color: black;
}

h2 {
    margin-top: 0.5em;
    margin-bottom: 0;
}

p {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

summary::marker {
    content: none;
}

summary .term {
    cursor: pointer;
    text-decoration: underline dotted;
}

img.icon {
    height: 8em;
    width: 8em;
    padding: 0.25em;
    border: 1px solid black;
    background-color: #4e4f54;
    border-radius: 1rem;
}

.cardbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 90rem;
}

.definition {
    font-size: small;
    margin-left: 1em;
}

.identity {
    border-right: 1px dotted black;
    padding-right: 0.5em;
    padding-left: 0.5em;
    text-align: center;
    border-left: 1em solid gray;
}

.identity p {
    font-style: italic;
}

.stats {
    display: inline-block;
    height: 100%;
    margin-left: 1em;
    margin-right: 1em;
    word-wrap: break-word;
    overflow-x: hidden;
}

.stats blockquote {
    margin: 0 0.5em 1rem 0;
    padding-left: 0.5em;
    border-left: 0.25em solid gray;
}

.stats h3 {
    margin: 0;
    font-size: 1em;
}

.stats p, .stats details {
    margin-top: 0;
    margin-left: 1em;
    margin-bottom: 0.5em;
}

.fold {
    position: absolute;
    height: 1em;
    width: 1em;
    top: calc(100% - 1em);
    left: calc(100% - 1em);
    border: 1px solid black;
    background-color: hsl(0, 0%, 95%);
}

@media (prefers-color-scheme: dark) {
    html {
        background-image: linear-gradient(hsl(0, 0%, 10%), hsl(0, 0%, 13.5%));
    }

    body {
        color: hsl(0, 0%, 80%);
    }

    card, article.card {
        background-color: #202020;
    }

    dialog {
        background-color: hsl(0, 0%, 10%);
        color: hsl(0, 0%, 80%);
    }

    .fold {
        background-color: #404040;
    }

    card, article.card, .fold, .identity {
        border-color: #4d4d4d;
    }

    img.icon {
        border-color: white;
    }

    a {
        color: #41ccff
    }

    a:visited {
        color: #a08bda;
    }
}

@media (max-width: 920px) {
    body {
        padding-left: 0;
    }
}