@font-face {
    font-family: "atkinson_hyperlegible";
    font-style: normal;
    font-weight: 400;
    src: url('fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2'),
        url('fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Regular-102.woff') format('woff'),
        url('fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Regular-102.ttf') format('truetype');
}

@font-face {
    font-family: "atkinson_hyperlegible";
    font-style: italic;
    font-weight: 400;
    src: url('fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2'),
        url('fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Italic-102a.woff') format('woff'),
        url('fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Italic-102a.ttf') format('truetype');
}

@font-face {
    font-family: "atkinson_hyperlegible";
    font-style: normal;
    font-weight: 700;
    src: url('fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2'),
        url('fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Bold-102a.woff') format('woff'),
        url('fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Bold-102.ttf') format('truetype');
}


:root {
    color-scheme: light dark;

    --rolypoly: #2b2127;
    --text-color: light-dark(black, #bebebe);
    --background-color: light-dark(#fbecb2, #1f1f1f);
    --link-color: light-dark(#0000D7, #ABCCE0);
    --visited-link-color: light-dark(rgb(85, 26, 139), #E6B6FF);
    --h2-color: light-dark(black, #d3869b);
}

html {
    width: 100%;
}

body {
    background: var(--background-color);
    color: var(--text-color);
    font-family: atkinson_hyperlegible, Verdana, sans-serif;
    margin: 0;
    width: 100%;
}

img {
    display: block;
    /* margin: 1rem auto; */
    margin: 1rem;
    width: 150px;
}

h1 {
    text-align: center;
    margin-top: -1rem;
    font-size: 3rem;
    line-height: 1;
}

h1 img {
    display: inline;
    width: 1.7rem;
    margin: 0 2px 0 2px;
}

h2 {
    font-size: 2rem;
    color: var(--h2-color);
}

main {
    max-width: min(38rem, 90vw);
    margin: auto;
}

main h2 {
    margin: 1rem 0 0 0;
}

textarea {
    max-width: min(38rem, 90vw);
}

summary h2 {
    cursor: pointer;
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

details {
    width: fit-content;
}

ul {
    list-style-type: none;
}

ul a {
    text-decoration: none;
    color: var(--link-color);
}

ul a:visited {
    color: var(--visited-link-color);
}

ul a:hover {
    /* background-color: #4c002e; */
    text-decoration: underline;
}

li:not(:first-child) {
    margin-top: 1.75rem;
}

li>a {
    font-size: 1.4rem;
}

li p {
    margin: 0;
}

li {
    word-break: break-word;
}

input {
    margin-top: 0.5rem;
}

@media screen and (max-width: 650px) {
    h1 {
        margin-top: 2rem;
        font-size: 2.5rem;
    }

    img {
        margin: 1rem auto;
    }

    h2 {
        font-size: 1.5rem;
    }

    li>a {
        font-size: 1.1rem;
    }

    li p {
        font-size: 0.9rem;
    }

    li:not(:first-child) {
        margin-top: 1.25rem;
    }
}