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

section {
    margin-inline: auto;
    & > * {
        max-width: 34rem;
        margin-inline: auto;
    }
}

.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;
    }
}

section {
    --heading-gap: 1.25rem;
    background-color: var(--color-white);
    padding: 1rem;
    @media (width > 700px) {
        padding-block: 3.5rem;
    }
    h2 {
        font-size: 1rem;
        margin-block: 2rem;
        border: 1px solid black;
        border-radius: 999px;
        text-transform: uppercase;
        padding: 0.25rem var(--heading-gap);
    }
    p {
        font-size: 18px;
        padding-inline: var(--heading-gap);
    }
    & > *:last-child {
        margin-block-end: 2rem;
    }
}

.about {
    background-color: var(--color-purple-light);
}

.how-it-works {
    padding-inline: var(--page-padding-inline);
    a {
        color: var(--color-purple-dark);
        font-weight: bold;
        text-decoration: none;
        border-bottom: 1px solid var(--color-purple-dark);
    }
    a:visited {
        color: var(--color-purple-dark);
    }
    a:hover {
        color: var(--color-purple);
        border-color: var(--color-purple);
    }
    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;
        }
    }
}

.sponsors {
    background-color: var(--color-teal-light);
}