:root {
    --blue-dark: #002173;
    --blue: #0150b6;
    --copy-blue: #00276f;
    --yellow: #ffb719;
    --red: #e2241d;
    --font-base: "proxima-nova", Arial, sans-serif;
    --font-condensed: "proxima-nova-extra-condensed", "Arial Narrow", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background: #fff;
    color: var(--copy-blue);
    font-family: var(--font-base);
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

.page,
.stage {
    width: 100%;
    overflow: hidden;
}

.stage {
    position: relative;
}

.canvas {
    position: relative;
    width: 88.889%;
    margin: 0 auto;
}

.stage-top {
    background: transparent;
}

.canvas-top {
    width: 100%;
    aspect-ratio: 1440 / 2330;
    overflow: hidden;
}

.canvas-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 34%;
    background:
        radial-gradient(circle at 32% 46%, rgba(190, 238, 182, .95) 0 12%, rgba(64, 177, 72, .9) 34%, rgba(18, 82, 30, .95) 78%),
        linear-gradient(120deg, #104f22 0%, #33ad3f 100%);
}

.top-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-copy {
    display: none;
}

.outlined {
    margin: 0;
    font-family: var(--font-condensed);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    paint-order: stroke fill;
}

.outlined-blue {
    color: #0053ad;
    -webkit-text-stroke: .625vw #fff;
    text-shadow: 0 0 1.667vw rgba(255, 255, 255, .58), 0 .556vw 1.111vw rgba(0, 8, 43, .2);
}

.outlined-red {
    color: var(--red);
    -webkit-text-stroke: .625vw #fff;
    text-shadow: 0 0 1.25vw rgba(255, 255, 255, .55);
}

.hero-title {
    position: absolute;
    z-index: 2;
    top: 40%;
    left: 4.861%;
    width: 90.278%;
    text-align: center;
    font-size: 5.694vw;
    line-height: .97;
}

.intro-copy {
    position: absolute;
    z-index: 2;
    top: 79.3%;
    left: 5.556%;
    width: 88.889%;
    display: grid;
    grid-template-columns: 39.063% .156% 1fr;
    column-gap: 4.297%;
    color: #fff;
}

.intro-copy h2 {
    margin: 0;
    font-family: var(--font-condensed);
    font-size: 3.65vw;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0;
}

.intro-divider {
    width: 100%;
    height: 12.222vw;
    margin-top: .625vw;
    background: rgba(255, 255, 255, .24);
}

.intro-copy p {
    margin: .139vw 0 0;
    font-size: 1.5vw;
    line-height: 1.58;
    font-weight: 400;
}

.stage-rules {
    padding: 0 0 3vw;
    background: #fff;
    top: -3vw;
}

.canvas-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 3.2%;
    align-items: start;
}

.section-title {
    grid-column: 1 / -1;
    margin: 0 0 5.208vw;
    color: var(--blue-dark);
    font-family: var(--font-condensed);
    font-size: 4.444vw;
    line-height: 1;
    font-weight: 900;
    text-align: center;
    letter-spacing: 0;
}

.rule {
    text-align: center;
}

.rule-img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.rule strong {
    display: block;
    margin-top: 1vw;
    color: var(--yellow);
    font-family: var(--font-condensed);
    font-size: 6.528vw;
    line-height: .82;
    font-weight: 900;
    letter-spacing: 0;
}

.rule p {
    margin: 2.361vw auto 0;
    color: var(--copy-blue);
    font-size: 1.944vw;
    line-height: 1.22;
    font-weight: 400;
}

.rule p b {
    font-weight: 800;
}

.stage-prizes {
    padding: 6.597vw 0 5vw;
    background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
}

.canvas-prizes {
    width: 100%;
    text-align: center;
}

.confetti {
    position: absolute;
    z-index: 1;
    width: auto;
    pointer-events: none;
}

.confetti-left {
    top: 0;
    left: 0;
    width: 23.889vw;
}

.confetti-right {
    top: 0;
    right: 0;
    width: 24.514vw;
}

.prizes-title {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-family: var(--font-condensed);
    font-size: 4.306vw;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
}

.prizes-lead {
    position: relative;
    z-index: 2;
    margin: 3.403vw 0 0;
    color: #fff;
    font-family: var(--font-condensed);
    font-size: 3.542vw;
    line-height: 1.32;
    font-weight: 800;
    letter-spacing: 0;
}

.prizes-art {
    position: relative;
    z-index: 2;
    width: 88.889vw;
    height: auto;
    margin: 3.472vw auto 0;
}

.serio {
    position: relative;
    z-index: 3;
    margin: 3vw 0 0;
    text-align: center;
    font-size: 8.194vw;
    line-height: 1;
    text-transform: none;
}

.stage-start {
    padding: 5.417vw 0 4.722vw;
    background: #fff;
    text-align: center;
}

.canvas-start h2,
.canvas-start p {
    margin: 0;
    font-family: var(--font-condensed);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.canvas-start h2 {
    color: var(--blue-dark);
    font-size: 4.167vw;
}

.canvas-start p {
    margin-top: .694vw;
    color: var(--yellow);
    font-size: 3.611vw;
}

.site-footer {
    position: relative;
    min-height: 23.194vw;
    background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
}

.canvas-footer {
    z-index: 1;
    min-height: 23.194vw;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8.333vw;
    align-items: end;
    padding-bottom: 2.639vw;
}

.footer-blob {
    position: absolute;
    right: -6.25vw;
    bottom: -1vw;
    z-index: 0;
    width: 62.5vw;
    max-width: none;
    height: auto;
    pointer-events: none;
}

.footer-logo {
    width: 10.278vw;
    height: auto;
}

.footer-nav {
    display: flex;
    gap: 4.861vw;
    color: #fff;
    font-size: 2.014vw;
    line-height: 1;
    font-weight: 800;
    padding-bottom: 3vw;
}

.socials {
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 3.75vw;
    padding-bottom: 3vw;
    margin-right: -2vw;
}

.socials a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.socials img,
.socials svg {
    width: 2.917vw;
    height: 3.194vw;
    object-fit: contain;
}

.socials svg {
    fill: none;
    stroke: #fff;
    stroke-width: 4;
}

.socials a:last-child img {
    width: 1.597vw;
    height: 2.986vw;
}

@media (max-width: 767px) {
    .canvas {
        width: 100%;
    }

    .canvas-top {
        width: 100%;
        aspect-ratio: 390 / 1107;
    }

    .canvas-top::before {
        height: 24%;
        background:
            radial-gradient(circle at 31% 42%, rgba(190, 238, 182, .95) 0 10%, rgba(59, 177, 69, .92) 37%, rgba(19, 84, 30, .96) 86%),
            linear-gradient(120deg, #105323 0%, #33ad3f 100%);
    }

    .desktop-copy {
        display: none;
    }

    .mobile-copy {
        display: block;
    }

    .outlined-blue {
        -webkit-text-stroke: 1.282vw #fff;
        text-shadow: 0 0 3.077vw rgba(255, 255, 255, .55), 0 1.282vw 2.564vw rgba(0, 8, 43, .18);
    }

    .outlined-red {
        -webkit-text-stroke: 2.795vw #fff;
        text-shadow: 0 0 2.564vw rgba(255, 255, 255, .55);
    }

    .hero-title {
        top: 27.823%;
        left: 4.103%;
        width: 91.795%;
        font-size: 9.744vw;
        line-height: 1.08;
        white-space: nowrap;
    }

    .intro-copy {
        top: 62.15%;
        left: 5.128%;
        width: 89.744%;
        display: block;
    }

    .intro-copy h2 {
        font-size: 8.718vw;
        line-height: 1.12;
    }

    .intro-divider {
        display: block;
        width: 100%;
        height: .513vw;
        margin: 6.154vw 0;
        background: rgba(255, 255, 255, .28);
    }

    .intro-copy p {
        margin: 0;
        font-size: 4.1vw;
        line-height: 1.42;
    }

    .stage-rules {
        padding: 8.205vw 0 18vw;
    }

    .canvas-rules {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .section-title {
        margin: 0 0 13.846vw;
        font-size: 12.821vw;
    }

    .rule {
        width: 100%;
    }

    .rule + .rule {
        margin-top: 24.615vw;
    }

    .rule strong {
        margin-top: 2vw;
        font-size: 23.59vw;
        line-height: .8;
    }

    .rule p {
        width: 84.615vw;
        margin-top: 5.692vw;
        font-size: 5.385vw;
        line-height: 1.2;
    }

    .stage-prizes {
        padding: 0 0 10.256vw;
    }

    .confetti-left {
        width: 35vw;
    }

    .confetti-right {
        width: 35vw;
    }

    .prizes-title {
        width: 75.385vw;
        margin: 0 auto;
        font-size: 12.564vw;
        line-height: 1.08;
        padding-top: 12.308vw;
    }

    .prizes-lead {
        width: 66.103vw;
        margin: 8.462vw auto 0;
        font-size: 6.41vw;
        line-height: 1.36;
    }

    .prizes-art {
        width: 89.744vw;
        margin-top: 8.974vw;
    }

    .serio {
        width: 87.179vw;
        margin: 6.282vw auto 0;
        font-size: 18.205vw;
        line-height: .93;
    }

    .stage-start {
        padding: 17.436vw 0 17.949vw;
    }

    .canvas-start {
        width: 100%;
    }

    .canvas-start h2,
    .canvas-start p {
        font-size: 8.205vw;
    }

    .canvas-start p {
        margin-top: 3.077vw;
    }

    .site-footer,
    .canvas-footer {
        min-height: 74.872vw;
    }

    .canvas-footer {
        width: 89.744%;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo socials"
            "nav nav";
        gap: 0;
        align-content: space-between;
        padding: 15.897vw 0 12.564vw;
    }

    .footer-blob {
        right: -5.487vw;
        bottom: -.1vw;
        width: 106vw;
    }

    .footer-logo {
        grid-area: logo;
        width: 21.538vw;
    }

    .footer-nav {
        grid-area: nav;
        flex-direction: column;
        gap: 5.128vw;
        font-size: 5.385vw;
    }

    .socials {
        grid-area: socials;
        gap: 7.949vw;
        align-self: start;
        margin-top: 2.564vw;
        margin-right: 0;
    }

    .socials img,
    .socials svg {
        width: 7.949vw;
        height: 8.974vw;
    }

    .socials svg {
        stroke-width: 4.4;
    }

    .socials a:last-child img {
        width: 4.359vw;
        height: 8.205vw;
    }
}