header {
    border-color: transparent;
    transition: border-color 0.3s;
    &.scrolled {
        border-color: var(--color-black)
    }
}

section {
    --heading-gap: 1.25rem;
    
    background-color: var(--color-white);
    padding: 1rem;
    margin-inline: auto;
    @media (width > 700px) {
        padding-block: 3.5rem;
    }
    & > * {
        max-width: 34rem;
        margin-inline: auto;
    }
    & > *:last-child {
        margin-block-end: 2rem;
    }
    h2 {
        margin-block: 2rem;
        border: 1px solid black;
        border-radius: 999px;
        padding: 0.25rem var(--heading-gap);
    }
    h2:nth-child(n+2) {
        margin-block-start: 3rem;
    }
    p {
        font-size: 18px;
        padding-inline: var(--heading-gap);
    }
    a {
        font-weight: bold;
    }
    h3 {
        text-align: center;
    }
}

.hero {
    gap: 1rem;
    padding-inline: var(--page-padding-inline);
    .heading {
        display: flex;
        flex-direction: column-reverse;
        padding-block-start: 3rem;
    }
    .follow-us {
        margin-block: 3rem;
        margin-inline-start: 0.75vw;
    }
    h1 {
        font-size: 17vw;
        margin: 0;
    }
    p {
        font-size: 3vw;
        font-family: "Archivo Black", sans-serif;
        text-transform: uppercase;
        margin: 0;
        margin-inline-start: 0.75vw;
        flex-grow: 1;
        display: flex;
        align-items: center;
    }
    .date-spacer {
        margin-inline: 1.3rem;
    }
}

@media (min-width: 700px) {
    .hero {
        padding-block-start: min(12vw, 8rem);
        .heading {
            margin-inline: auto;
        }
        h1 {
            font-size: min(13vw, 9rem);
        }
        p {
            font-size: min(10vw, 1.5rem);
        }
    }
}

@media (min-width: 1200px) {
    .hero {
        display: flex;
        justify-content: space-between;
        .heading {
            align-self: flex-start;
            margin-inline: 0;
            margin-bottom: 3rem;
        }
    }
    .follow-us {
        align-self: flex-end;
    }
}

.about {
    background-color: var(--color-purple-light);
    .dates {
        display: grid;
        grid-template-columns: 1fr 1fr;
        font-family: "Cutive Mono", monospace;
        text-align: center;
        div {
            text-transform: uppercase;
            font-family: "Archivo Black", sans-serif;
            margin-block-start: 1rem;
            margin-block-end: 0.5rem;
        }
        li {
            margin-bottom: 0.5rem;
            a, a:visited {
                --link-color: rgb(104 64 216);
            }
            a:hover {
                --link-color: var(--color-purple-dark);
            }
        }
    }
}

.how-it-works {
    padding-inline: var(--page-padding-inline);
    ul, ol {
        padding: 0;
        padding-inline: var(--heading-gap);
        font-family: "Cutive Mono", Courier, monospace;
        font-size: 20px;
        line-height: 1.25;
        text-align: center;
        div {
            margin-inline: auto;
            margin-block-start: 2rem;
            margin-block-end: 0.5rem;
        }
    }
    ul {
        font-size: 16px;
    }
}

.sponsors {
    background-color: var(--color-teal-light);
    p {
        text-transform: uppercase;
        text-align: center;
    }
    div {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
        align-items: center;
        margin-block-end: 2rem;
        @media (width < 450px) {
            grid-template-columns: 1fr;
            justify-items: center;
            img {
                max-width: 40vw;
            }
        }
    }
    ul  {
        text-align: center;
        li {
            font-family: "Cutive Mono", Courier, monospace;
            text-transform: uppercase;
            display: inline;
            &:not(:last-child)::after {
                content: " / ";
            }
            a {
                --link-color: var(--color-black);
                font-size: 1.125rem;
                font-weight: normal;
                display: inline-block;
                padding-block-start: 0.5rem;
                margin-block-end: 0.125rem;
            }
        }
    }
}

.bingo {
    > * {
        padding-block-start: 1rem;
    }
    li {
        span {
            text-transform: uppercase;
        }
        span::after {
            content: " - ";
        }
    }
}