body {
    background: #1e2124;
    color: white;
    margin: 0;
}

#screen {
    width: calc(min(70vw, 650px));
    margin: auto;
    margin-top: 2.5em;
    text-align: center;
}

#absfiller {
    height: 2em;
}

@media only screen and (min-height: 500px) {
    #screen {
        margin-top: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #absfiller {
        height: 100vh;
    }
}


@media only screen and (max-width: 500px) {
    #screen {
        max-width: 90vw;
    }
}

#header {
    color: #7289da;
    font-weight: 900;
    font-size: clamp(1.8rem, 4.5vw, 2.8rem);

    max-width: calc(max(500px, 65vw));
    margin: auto;
}

#pill:hover {
    box-shadow: 0.5em 0.5em #0a0a0a,
        inset 0 0 calc(max(5em, 10vw)) #e73234;
}

#pill {
    box-shadow: 1em 1em #0a0a0a,
        inset 0 0 calc(max(5em, 10vw)) #e73234;
    transition: 300ms box-shadow;
    margin-top: 1.2em;
    margin-bottom: 2em;
    background: #cc0000;
    width: fit-content;
    padding-top: 0.8em;
    padding-bottom: 1.2em;
    padding-left: 3em;
    padding-right: 3em;
    font-size: 1em;

    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;

    font-weight: 700;

    #counter {
        font-size: clamp(3rem, 8vw, 4.5rem);
        font-weight: 900;
    }
}

#dimmed {
    color: #7b8495;
    font-size: 1.2em;
}

@keyframes wave-shift {
    to {
        -webkit-mask-position: var(--wave-length) 0;
        mask-position: var(--wave-length) 0;
    }
}

.squiggle {
    --wave-length: 10px;
    /* width of one full wave */
    --wave-height: 4px;
    /* how tall the wave is */
    --wave-speed: .5s;
    /* lower = faster; 0s = static */
    --wave-gap: -5px;
    /* space between text and wave */

    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
    padding-bottom: calc(var(--wave-height) + var(--wave-gap));
}

.squiggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--wave-height);
    --wave-from: cyan;
    --wave-to: lightgreen;
    /* purplish red */
    background: linear-gradient(90deg, var(--wave-from), var(--wave-to));

    --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q5 0 10 2 T20 2' fill='none' stroke='black' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    -webkit-mask: var(--wave) 0 0 / var(--wave-length) 100% repeat-x;
    mask: var(--wave) 0 0 / var(--wave-length) 100% repeat-x;

    animation: wave-shift var(--wave-speed) linear infinite;
}

#subtext {
    font-weight: 700;
    font-size: 1.2em;
}

#qna {
    img {
        vertical-align: top;
    }

    .img-350 {
        width: calc(min(100% - 20px, 350px));
        border-radius: 10px;
        margin: 10px;
    }

    .img-600 {
        width: calc(min(100% - 20px, 600px));
        border-radius: 10px;
        margin: 10px;
    }

    a,
    a:visited {
        color: lightblue;
    }

    a.header-link,
    a.header-link:visited {
        color: inherit;
        text-decoration: none;
        position: relative;
    }

    a.header-link::before {
        content: "#";
        position: absolute;
        right: 100%;
        padding-right: 0.3em;
        opacity: 0;
        transition: 150ms opacity;
    }

    a.header-link:hover::before {
        opacity: 0.5;
    }

    h2 {
        margin-top: 1.5em;
        border-bottom: 3px solid;
        border-image: linear-gradient(90deg, #7289da, transparent) 1;
    }

    max-width: 80vw;
    margin: auto;
}

.note {
    border-radius: 0.5em;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;

    h3 {
        margin-bottom: -0.5em;
    }
}

.notecontainer {
    border-radius: 0.5em;
    display: grid;
    margin-top: 1em;
    transition: 150ms transform, 150ms box-shadow;
}

.notecontainer:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 10px 10px #0e1114;

}

.note-yellow {
    box-shadow: 0 -0.3em rgba(128, 0, 150, 1);
    background-color: rgba(128, 0, 150, 0.3);
}

.note-orange {
    box-shadow: 0 -0.3em rgba(255, 140, 0, 1);
    background-color: rgba(255, 140, 0, 0.3);
}

.note-red {
    box-shadow: 0 -0.3em rgba(255, 0, 0, 1);
    background-color: rgba(255, 0, 0, 0.3);
}

@media only screen and (min-width: 1000px) {
    .notes {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5em;

        h3 {
            height: 3em;
        }
    }

    .notecontainer {
        margin-top: 0;
    }
}

footer {
    margin-top: 5em;
    background: black;
    color: lightgrey;
    text-align: center;
    font-size: 80%;
    padding-top: 4px;
    padding-bottom: 4px;

    a,
    a:visited {
        color: lightblue;
    }
}