html,
body {
    margin: 0;
    padding: 0;
    background: black;
    text-align: center;
}

@font-face {
    font-family: 'Hammerhead';
    src: url('/static/19F29F15230C165C3C31775E0C6A4B454314933C46A774FDB5F99876') format('truetype');
}

@font-face {
    font-family: 'Bellefair';
    src: url('/static/225764D0575325749C33AE2D41F7E30795693C3C63868568399CB698') format('truetype');
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;

    .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
    }

    .bg_b {
        mix-blend-mode: hard-light;
        background-image: url("/static/01E62F342050716C87597D7F136567662457FC25B03EB43FF39CB779");
        background-position: center;
        background-size: cover;
    }

    .bg_c {
        mix-blend-mode: hard-light;
        background-image: url("/static/C3CA895CCD662D26F8ADA7AE78832FB605C28E64DD93D30F31A0EA3D");
        background-size: contain;
        background-position: bottom center;
        transform-origin: bottom center;
        animation: drift-c 13s ease-in-out infinite alternate;
        animation-delay: -7s;
    }

    .bg_l {
        mix-blend-mode: hard-light;
        background-image: url("/static/75AAD830F32A8E858A4B1447F3C6A2D3AA7598C6F9F16E2292C06205");
        background-size: contain;
        background-position: left;
        transform-origin: left center;
        animation: drift-l 29s ease-in-out infinite alternate;
        animation-delay: -18s;
    }

    .bg_bl {
        mix-blend-mode: hard-light;
        background-image: url("/static/A2FC50FA89F02CAE4AF727E0849CAE385075F10E1A9AE04B9119C38A");
        background-size: contain;
        background-position: left bottom;
        transform-origin: left bottom;
        animation: drift-bl 11s ease-in-out infinite alternate;
        animation-delay: -3s;
    }

    .bg_r {
        mix-blend-mode: hard-light;
        background-image: url("/static/8E739F7A453C3C8857396325AFC9EF3AEAB46328B4191CFF178F4ADA");
        background-size: contain;
        background-position: right;
        transform-origin: right center;
        animation: drift-r 47s ease-in-out infinite alternate;
        animation-delay: -31s;
    }

    .bg_br {
        mix-blend-mode: hard-light;
        background-image: url("/static/F906BC953917B3394E8C3F79A68AF2FD011BC42BB24A53F066585B9A");
        background-size: contain;
        background-position: right bottom;
        transform-origin: right bottom;
        animation: drift-br 27s ease-in-out infinite alternate;
        animation-delay: -12s;
    }

    .bg_tl {
        mix-blend-mode: hard-light;
        background-image: url("/static/D8F25D08D984408DAB9958CBB2461B4A2D8E37F214193591AD66DAC1");
        background-size: contain;
        background-position: left top;
        transform-origin: left top;
        animation: drift-tl 33s ease-in-out infinite alternate;
        animation-delay: -24s;
    }

    .bg_tr {
        mix-blend-mode: hard-light;
        background-image: url("/static/2EB8D1F5E506150F7F4A2B708AB343040C87A01CDF4179BD9CD7290F");
        background-size: contain;
        background-position: right top;
        transform-origin: right top;
        animation: drift-tr 19s ease-in-out infinite alternate;
        animation-delay: -9s;
    }

}

@keyframes drift-c {
    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(0.91);
    }
}

@keyframes drift-l {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.06);
    }
}

@keyframes drift-bl {
    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(0.94);
    }
}

@keyframes drift-r {
    from {
        transform: scale(1.14);
    }

    to {
        transform: scale(0.71);
    }
}

@keyframes drift-br {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.09);
    }
}

@keyframes drift-tl {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.06);
    }
}

@keyframes drift-tr {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.07);
    }
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
    position: relative;
    padding: 40px 20px;
}

#logo {
    width: 90%;
    mix-blend-mode: hard-light;
    margin-bottom: 0.5em;
}

.subtitle {
    font-family: 'Hammerhead', sans-serif;
    font-size: 1.5em;
    color: #ffe7be;
}

@media screen and (min-width: 720px) {
    #logo {
        width: 648px;
    }

    .subtitle {
        font-size: 2em;
    }
}

.announcement {
    font-family: 'Bellefair', serif;
    font-size: 1.7em;
    line-height: 1.2em;
    color: #ffffff;
    margin-top: 3.3em;
    margin-bottom: 2em;
}

.watch-button {
    position: relative;
    display: inline-block;
    text-decoration: none;
    margin-bottom: 3.5em;
    cursor: pointer;

    svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
    }

    .watch-button-text {
        position: relative;
        padding: 0.6em 2.5em;
    }

    #carnybtnback {
        fill: #00000030;
        transform-origin: top;
        transition: transform 0.3s ease;
    }

    #carnybtnfill {
        fill: #FBE8C1;
        stroke: #000;
        stroke-width: 0.7;
        transition: fill 0.25s ease;
    }

    .watch-button-text {
        display: block;
        font-family: 'Hammerhead', sans-serif;
        font-size: 1.6em;
        color: #3E433A;
        pointer-events: none;
        transition: color 0.25s ease;
        padding: 1em 2em;
    }

    &:hover {
        #carnybtnback {
            transform: translateY(-1.5px) scaleX(1.015) scaleY(1.06);
        }

        #carnybtnfill {
            fill: #A85651;
        }

        .watch-button-text {
            color: #ffffff;
        }
    }
}



@keyframes shine {
    from {
        transform: skew(-10deg) translateX(-120%);
    }

    to {
        transform: skew(-10deg) translateX(520%);
    }
}

#triple-i-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
}

#triple-i-logo {
    max-width: 6em;
    mix-blend-mode: screen;
}

#triple-i-wordmark {
    max-width: 12em;
}