@import url('reset.css');
@import url('fonts.css');

body {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000;
    gap: 10px;
    overflow-x: hidden;
    position: relative;
}

section {
    width: 100vw;
}

div {
    border-radius: 24px;
    border: 21px solid;
}

.row {
    border-radius: 0;
    border: 0;
    display: flex;
    flex-direction: row;
}

.column {
    border-radius: 0;
    border: 0;
    display: flex;
    flex-direction: column;
}

.font-geometria {
    font-family: "geometria_bold";
}

.the-first-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.masks {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 26vw;
    height: 36vw;
    background-color: #E5C441;
    border-color: #761614;

    img {
        height: 32vw;
        width: auto;
    }

    p {
        font-size: 6vw;
        color: #761614;
        animation: theater-text 2s linear infinite;
    }
}

.staging {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 74vw;
    height: 17vw;
    background-color: #28160A;
    border-color: #E73928;

    img {
        height: 5vw;
        width: auto;
    }

    div {
        display: flex;
        align-items: center;
    }

    h2 {
        color: #FCEFD6;
        font-family: "geometria_bold";
        font-size: 7vw;
        animation: theater-text 500ms linear infinite;
    }

    p {
        color: #E73928;
        font-family: "Kucheryavy";
        font-size: 4vw;
    }
}

.leftArrow {
    position: absolute;
    bottom: 16px;
    left: 20px;
    rotate: 50deg;
    animation: left-arrow-rotate 1500ms linear infinite;
}

.rightArrow {
    position: absolute;
    bottom: 16px;
    right: 20px;
    rotate: -50deg;
    animation: right-arrow-rotate 1500ms linear infinite;
}

.paint {
    width: 38vw;
    height: 19vw;
    background-color: #2A3596;
    border-color: #FCEFD6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    gap: 3px;
    overflow: hidden;

    p {
        font-family: "geometria_bold";
        font-size: 6vw;
        color: #2A3596;
        -webkit-text-stroke: #FCEFD6 6px;
        z-index: 100;
        animation: text-stroke-color 1s linear infinite;
    }

    img {
        position: absolute;
    }
}

.paint-circle {
    width: 6vw;
    height: auto;
}

.paint-ticket {
    width: 10vw;
    height: auto;
}

.tape {
    width: 36vw;
    height: 19vw;
    background-color: #E73928;
    border: 16px solid;
    border-color: #E5C441;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 1%;
    padding-bottom: 1%;

    div {
        border: 0;
    }
}

.circle {
    display: flex;
    width: 20vw;
    height: 20vw;
    border-radius: 100%;
    border: 0;
    align-items: center;
    justify-content: center;

    img {
        max-width: 60%;
        height: auto;
    }
}

.the-second-section {
    display: flex;
    flex-direction: row;
    position: relative;
}

.jump-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    width: 25vw;
    height: 60vw;
    padding-bottom: 10%;

    p {
        font-family: "geometria_bold";
        font-size: 2vw;
        position: absolute;
        bottom: 1%;
        left: 3%;
    }
}

.ellipse {
    height: 18%;
    width: auto;
}

.circle-jump {
    height: 25%;
    width: auto;
    margin-bottom: -25%;
    z-index: 4;
    animation: jump 2s linear infinite;
}

.the-third-section {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 50vw;
}

.card {
    width: 50vw;
    height: 100vw;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-paint {
    width: 100%;
    height: 100%;
    border: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2%;

    div {
        border: 0;
    }
}

.card-paint-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    h2 {
        font-family: "Kucheryavy";
        font-size: 7vw;
    }

    h3 {
        font-family: "Kucheryavy";
        font-size: 2.5vw;
    }

    p {
        font-family: "BebasNeueCyrillic";
        font-size: 2.5vw;
    }
}

.card-paint-top-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2%;
}

.card-paint-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3%;

    h1 {
        font-family: "Kucheryavy";
        font-size: 6vw;
    }
}

.card-paint-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    p {
        font-family: "BebasNeueCyrillic";
        font-size: 2vw;
    }
}

.card-row {
    display: flex;
    flex-direction: row;
    border: 0;
    height: 50%;
    width: 100%;
    gap: 12px;
}

.card-paint-border {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bigAsset {
    max-width: 75%;
    height: auto;
    animation: masks-rotate 5s linear infinite;
    transition: all 2s ease;
}

.smallAsset {
    max-width: 60%;
    height: auto;
    animation: masks-rotate 5s linear infinite;
    transition: all 2s ease;
}

.last-section {
    height: 266px;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 8px;
    overflow: hidden;
    padding: 11px 0;
    align-items: flex-start;
    justify-content: space-between;
    background-color: #E5C441;

    div {
        border: 0;
    }
}

.tape-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    overflow: hidden;
    width: 2700px;
    position: absolute;
    left: -197px;
    top: 35px;

    div {
        height: 196px;
        width: 196px;
        background-color: #761614;
    }

    animation: right-scroll 1s linear infinite;
    transition: all 2s ease;
}

.square-row {
    display: flex;
    flex-direction: row;
    gap: 9px;
    overflow: hidden;
    width: 2100px;

    div {
        border-radius: 20%;
        height: 16px;
        width: 16px;
        background-color: #761614;
    }

    animation: left-scroll 500ms linear infinite;
    transition: all 2s ease;
}

.the-fourth-section {
    width: 100vw;
    height: 50vw;
    display: flex;
    flex-direction: row;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.card-opacity {
    border: 0;
    width: 100%;
    height: 20%;
    position: absolute;
    opacity: 90%;
    z-index: 100;
}

.mobile {
    display: flex;
    flex-direction: row;
    border: 0;
}

.mobile-reverse {
    display: flex;
    flex-direction: row;
    border: 0;
}

.main {
    position: absolute;
    top: 6%;
}

.roles {
    position: absolute;
    top: 23%;
}

.brown-main-animation {
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50%;
    width: 100%;
    position: absolute;
    bottom: 0;
    overflow: hidden;

    div {
        border: 0;
    }
}

.gapSix {
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    align-items: center;
}

.card-border-radius {
    border: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    border-radius: 50%;
}

.gap15 {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    align-items: center;
}

.goAnimation {
    display: flex;
    flex-direction: column;
    gap: 4vw;
    animation: textTop1 4s linear infinite;
}

.tape-row-first {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    width: 100%;

    div {
        height: 11vw;
        width: 10vw;
        background-color: #FCEFD6;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            max-width: 60%;
            height: auto;
            animation: masks-jump 1s linear infinite;
        }
    }
}

.firstTicket {
    top: 15%;
    left: 6%;
    rotate: -12deg;
    animation: ticketAround1 7s linear infinite;
}

.secondTicket {
    top: 15%;
    right: 6%;
    rotate: -168deg;
    animation: ticketAround2 7s linear infinite;
}

.thirdTicket {
    bottom: 15%;
    right: 6%;
    rotate: 170deg;
    animation: ticketAround3 7s linear infinite;
}

.fourthTicket {
    top: 40%;
    left: 35%;
    rotate: -168deg;
    animation: ticketAround4 7s linear infinite;
}

.fifthTicket {
    bottom: 15%;
    left: 6%;
    rotate: 7deg;
    animation: ticketAround5 7s linear infinite;
}

.lights {
    position: absolute;
    border: 21px dotted;
    z-index: 100;
}

.circle-lights {
    width: 25vw;
    height: 60vw;
    border: 21px dotted;
}

.gap-lights1 {
    border: 0;
    display: flex;
    flex-direction: row;
    position: absolute;
    z-index: 100;
    animation: theater-text 1s linear infinite;
}

.gap-lights2 {
    border: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    position: absolute;
    z-index: 100;
    animation: theater-text 1s linear infinite;
}

#card-brown-first-lights {
    width: 50vw;
    height: 50vw;
    right: 0;
    border-color: #28160A;
    animation: theater-text 800ms linear infinite;
}

#card-brown-second-lights {
    width: 50vw;
    height: 50vw;
    border-color: #28160A;
    animation: theater-text 800ms linear infinite;
}

#circleFirst-lights {
    border-color: #E5C441;
}

#circleSecond-lights {
    border-color: #761614;
}

#circleThird-lights {
    border-color: #FCEFD6;
}

#circleFourth-lights {
    border-color: #E73928;
}

#masks-lights {
    width: 26vw;
    height: 36vw;
    border-color: #FCEFD6;
    animation: theater-text 2s linear infinite;
}

#staging-lights {
    width: 74vw;
    height: 17vw;
    border-color: #FCEFD6;
    animation: theater-text 500ms linear infinite;
}

#square-row-white {
    div {
        background-color: #FCEFD6;
    }
}

#opacity-top {
    top: 0;
    background: linear-gradient(to top, rgb(40, 22, 10, 0), rgb(40, 22, 10, 1));
}

#opacity-bottom {
    bottom: 0;
    background: linear-gradient(to top, rgb(40, 22, 10, 1), rgb(40, 22, 10, 0));
}

#paint-circle-first {
    top: 5px;
    left: 5px;
    rotate: -30deg;
}

#paint-circle-second {
    bottom: 5px;
    right: 5px;
    rotate: 30deg;
}

#paint-ticket-first {
    top: 15px;
    right: 5px;
    rotate: 28deg;
    animation: ticket-first-rotate 2s linear infinite;
}

#paint-ticket-second {
    bottom: 15px;
    left: 5px;
    rotate: -146deg;
    animation: ticket-second-rotate 2s linear infinite;
}

#paint-ticket-thrid {
    rotate: -17deg;
    animation: ticket-third-rotate 2s linear infinite;
}

#circle-orange {
    background-color: #E73928;
    animation: mask-rotate 5s linear infinite;
}

#circle-brown-first {
    background-color: #28160A;
    animation: first-arrow-rotate 5s linear infinite;
}

#circle-brown-second {
    background-color: #28160A;
    animation: second-arrow-rotate 5s linear infinite;
}

#circle-blue-first {
    background-color: #2A3596;
    animation: third-arrow-rotate 5s linear infinite;
}

#circle-blue-second {
    background-color: #2A3596;
    animation: fourth-arrow-rotate 5s linear infinite;
}

#the-first-jump {
    border-color: #761614;
    background-color: #E5C441;
    color: #2A3596;
}

#the-second-jump {
    border-color: #FCEFD6;
    background-color: #761614;
    color: #FCEFD6;
}

#the-third-jump {
    border-color: #761614;
    background-color: #FCEFD6;
    color: #E73928;
}

#the-fourth-jump {
    border-color: #FCEFD6;
    background-color: #E73928;
    color: #E5C441;
}

#card-brown-first {
    background-color: #28160A;
    border-color: #FCEFD6;
    height: 50vw;
    position: absolute;
    bottom: 0;
    right: 0;

    img {
        width: 17vw;
        height: auto;
        position: absolute;
    }
}

#card-border-none-first {
    border: 0;
    animation: masks-scroll 5s linear infinite;
    transition: all 2s ease;
    position: absolute;
    bottom: 0;
}

#card-brown-second {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #28160A;
    border-color: #FCEFD6;
    height: 50vw;
    position: absolute;
    bottom: 0;

    h2 {
        font-family: "Kucheryavy";
        font-size: 8vw;
        color: #E5C441;
    }

    p {
        font-family: "BebasNeueCyrillic";
        font-size: 4vw;
        color: #FCEFD6;
    }
}

#card-border-none-second {
    border: 0;
    animation: masks-scroll 5s linear infinite;
    transition: all 2s ease;
    position: absolute;
    bottom: 0;
    right: 0;
}

#paint-red {
    background-color: #761614;
}

#paint-yellow {
    background-color: #E5C441;

    h1,
    h2,
    h3,
    p {
        color: #761614;
    }
}

#paint-blue {
    background-color: #2A3596;

    h1,
    h2,
    h3,
    p {
        color: #FCEFD6;
    }
}

#paint-white {
    background-color: #FCEFD6;

    h1,
    h2,
    h3,
    p {
        color: #761614;
    }
}

#paint-orange {
    background-color: #E73928;

    h1,
    h2,
    h3,
    p {
        color: #FCEFD6;
    }
}

@keyframes ticketAround1 {

    0%,
    100% {
        top: 15%;
        left: 6%;
        rotate: -12deg;
    }

    16% {
        top: 40%;
        left: 35%;
        rotate: -102deg;
    }

    33% {
        top: 15%;
        left: 60%;
        rotate: -192deg;
    }

    57% {
        top: 70%;
        left: 60%;
        rotate: -282deg;
    }

    76% {
        top: 70%;
        left: 6%;
        rotate: -192deg;
    }
}

@keyframes ticketAround2 {

    0%,
    100% {
        top: 15%;
        left: 60%;
        rotate: -168deg;
    }

    24% {
        top: 70%;
        left: 60%;
        rotate: -258deg;
    }

    41% {
        top: 70%;
        left: 6%;
        rotate: -348deg;
    }

    65% {
        top: 15%;
        left: 6%;
        rotate: -438deg;
    }

    81% {
        top: 40%;
        left: 35%;
        rotate: -348deg;
    }
}

@keyframes ticketAround3 {

    0%,
    100% {
        top: 70%;
        left: 60%;
        rotate: 170deg;
    }

    16% {
        top: 70%;
        left: 6%;
        rotate: 260deg;
    }

    40% {
        top: 15%;
        left: 6%;
        rotate: 350deg;
    }

    54% {
        top: 40%;
        left: 15%;
        rotate: 440deg;
    }

    76% {
        top: 15%;
        left: 60%;
        rotate: 350deg;
    }
}

@keyframes ticketAround4 {

    0%,
    100% {
        top: 40%;
        left: 35%;
        rotate: -168deg;
    }

    14% {
        top: 15%;
        left: 60%;
        rotate: -258deg;
    }

    36% {
        top: 70%;
        left: 60%;
        rotate: -348deg;
    }

    61% {
        top: 70%;
        left: 6%;
        rotate: -438deg;
    }

    83% {
        top: 15%;
        left: 6%;
        rotate: -348deg;
    }
}

@keyframes ticketAround5 {

    0%,
    100% {
        top: 70%;
        left: 6%;
        rotate: 7deg;
    }

    24% {
        top: 15%;
        left: 6%;
        rotate: 97deg;
    }

    40% {
        top: 40%;
        left: 35%;
        rotate: 187deg;
    }

    52% {
        top: 15%;
        left: 60%;
        rotate: 277deg;
    }

    76% {
        top: 70%;
        left: 60%;
        rotate: 187deg;
    }
}

@keyframes masks-jump {

    0%,
    100% {
        transform: translateY(0%);
    }

    25% {
        transform: translateY(-5%);
    }

    75% {
        transform: translateY(5%);
    }
}

@keyframes text-stroke-color {
    0% {
        -webkit-text-stroke-color: #FCEFD6;
    }

    50% {
        -webkit-text-stroke-color: #2A3596;
    }

    100% {
        -webkit-text-stroke-color: #FCEFD6;
    }
}

@keyframes ticket-first-rotate {
    0% {
        rotate: 28deg;
    }

    50% {
        rotate: -28deg;
    }

    100% {
        rotate: 28deg;
    }
}

@keyframes ticket-second-rotate {
    0% {
        rotate: -146deg;
    }

    50% {
        rotate: -190deg;
    }

    100% {
        rotate: -146deg;
    }
}

@keyframes ticket-third-rotate {
    0% {
        rotate: -17eg;
    }

    50% {
        rotate: 17deg;
    }

    100% {
        rotate: -17deg;
    }
}

@keyframes textTop1 {
    0% {
        transform: translateY(0%)
    }

    100% {
        transform: translateY(calc(-30% - 3vw))
    }
}

@keyframes textTop2 {
    0% {
        transform: translateY(0%)
    }

    100% {
        transform: translateY(calc(-30% - 6vw))
    }
}

@keyframes left-arrow-rotate {
    0% {
        rotate: 50deg;
    }

    50% {
        rotate: 10deg;
    }

    100% {
        rotate: 50deg;
    }
}

@keyframes right-arrow-rotate {
    0% {
        rotate: -50deg;
    }

    50% {
        rotate: -10deg;
    }

    100% {
        rotate: -50deg;
    }
}

@keyframes masks-scroll {
    0% {
        transform: translateY(0%)
    }

    100% {
        transform: translateY(calc(50% + 5px))
    }
}

@keyframes left-scroll {
    0% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(calc(-2% - 9px))
    }
}

@keyframes right-scroll {
    0% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(calc(4% + 100px))
    }
}

@keyframes theater-text {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 7.5;
    }

    40% {
        opacity: 5;
    }

    60% {
        opacity: 2.5;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes mask-rotate {
    0% {
        rotate: 0deg;
    }

    25% {
        rotate: 90deg;
    }

    45% {
        rotate: 180deg;
    }

    65% {
        rotate: 270deg;
    }

    90% {
        rotate: 360deg;
    }

    100% {
        rotate: 360deg;
    }
}

@keyframes first-arrow-rotate {
    66% {
        rotate: 0deg;
    }

    88% {
        rotate: -90deg;
    }

    94% {
        rotate: -90deg;
    }

    100% {
        rotate: 0deg;
    }
}

@keyframes third-arrow-rotate {
    44% {
        rotate: 0deg;
    }

    66% {
        rotate: -90deg;
    }

    94% {
        rotate: -90deg;
    }

    100% {
        rotate: 0deg;
    }
}

@keyframes second-arrow-rotate {
    22% {
        rotate: 0deg;
    }

    44% {
        rotate: -90deg;
    }

    94% {
        rotate: -90deg;
    }

    100% {
        rotate: 0deg;
    }
}

@keyframes fourth-arrow-rotate {
    0% {
        rotate: 0deg;
    }

    22% {
        rotate: -90deg;
    }

    94% {
        rotate: -90deg;
    }

    100% {
        rotate: 0deg;
    }
}

@keyframes masks-rotate {
    0% {
        rotate: 0deg;
    }

    25% {
        rotate: 90deg;
    }

    50% {
        rotate: 180deg;
    }

    75% {
        rotate: 270deg;
    }

    100% {
        rotate: 360deg;
    }
}

@keyframes masks-scroll-mobile {
    0% {
        transform: translateY(0%)
    }

    100% {
        transform: translateY(calc(100% + 12px))
    }
}

@keyframes jump {
    0% {
        margin-bottom: -25%;
    }

    49%,
    51% {
        transform: translateY(calc(-209%))
    }

    50% {
        transform: translateY(calc(-210%))
    }

    100% {
        margin-bottom: -25%;
    }
}

@keyframes jump-mobile {
    0% {
        margin-bottom: -20%;
    }

    49%,
    51% {
        transform: translateY(calc(-209%))
    }

    50% {
        transform: translateY(calc(-210%))
    }

    100% {
        margin-bottom: -20%;
    }
}

.tape-row:hover {
    animation-play-state: paused
}

#card-border-none-first:hover {
    animation-play-state: paused
}

#card-border-none-second:hover {
    animation-play-state: paused
}

@media (max-width: 1024px) {
    body {
        gap: 8px;
    }

    div {
        border-radius: 16px;
        border: 17px solid;
    }

    .staging {
        width: 100vw;
        height: 25vw;

        img {
            height: 7vw;
            width: auto;
        }

        h2 {
            font-size: 10vw;
        }

        p {
            font-size: 6vw;
        }
    }

    .masks {
        display: none;
    }

    .paint {
        width: 52vw;
        height: 24vw;

        p {
            font-size: 7vw;
            -webkit-text-stroke: #FCEFD6 4px;
        }
    }

    .paint-circle {
        width: 8vw;
    }

    .paint-ticket {
        width: 12vw;
    }

    .tape {
        width: 48vw;
        height: 24vw;
        border: 12px solid;
        border-color: #E5C441;
    }

    .card-row {
        gap: 8px;
    }

    .the-third-section {
        gap: 8px;
    }

    .tape-row-first {
        div {
            height: 13vw;
            width: 13vw;

            img {
                max-width: 55%;
            }
        }
    }

    .the-fourth-section {
        gap: 8px;
    }

    .card {
        gap: 8px;
    }

    .jump-circle {
        padding-bottom: 8%;

        p {
            font-size: 2.5vw;
        }
    }

    .lights {
        border: 17px dotted;
        border-radius: 18px;
    }

    .circle-lights {
        border: 17px dotted;
        border-radius: 18px;
    }

    #staging-lights {
        width: 100vw;
        height: 25vw;
    }

    #paint-circle-first {
        top: 3px;
        left: 3px;
    }

    #paint-circle-second {
        bottom: 3px;
        right: 3px;
    }

    #paint-ticket-first {
        top: 10px;
        right: 3px;
    }

    #paint-ticket-second {
        bottom: 10px;
        left: 3px;
    }

    #masks-lights {
        display: none;
    }
}

@media (max-width: 440px) {
    body {
        gap: 6px;
    }

    div {
        border-radius: 10px;
        border: 12px solid;
    }

    .mobile {
        border: 0;
    }

    .the-first-section {
        gap: 0;
    }

    .staging {
        display: none;
    }

    .mobile-reverse {
        flex-direction: row-reverse;
    }

    .masks {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 120vw;
        background-color: #E5C441;
        border-color: #761614;

        img {
            height: 110vw;
            width: auto;
        }

        p {
            font-size: 20vw;
            color: #761614;
            animation: theater-text 2s linear infinite;
        }
    }

    .paint {
        width: 100vw;
        height: 50vw;

        p {
            font-size: 15vw;
            -webkit-text-stroke: #FCEFD6 4px;
        }
    }

    .card-opacity {
        height: 40%;
    }

    .paint-circle {
        width: 16vw;
    }

    .paint-ticket {
        width: 24vw;
    }

    .tape {
        width: 100vw;
        height: 50vw;
        border: 8px solid;
        border-color: #E5C441;
    }

    .card-row {
        gap: 6px;
    }

    .the-second-section {
        gap: 6px;
        flex-direction: column;
    }

    .jump-circle {
        width: 50vw;
        height: 100vw;

        p {
            font-size: 4.5vw;
        }
    }

    .card {
        gap: 6px;
        width: 100vw;
        height: 100vw;
    }

    .circle {
        width: 50vw;
        height: 50vw;
    }

    .column-mobile {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .the-third-section {
        width: 100vw;
        height: 200vw;
    }

    .the-fourth-section {
        width: 100vw;
        height: 200vw;
    }

    .card-paint {
        width: 50vw;
        height: 50vw;
    }

    .card-paint-top {
        h2 {
            font-size: 16vw;
        }

        h3 {
            font-size: 6.5vw;
        }

        p {
            font-size: 6.5vw;
        }
    }

    .card-paint-center {
        h1 {
            font-size: 11vw;
        }
    }

    .card-paint-bottom {
        p {
            font-size: 5.5vw;
        }
    }

    .card-paint-border {
        width: 50vw;
        height: 50vw;
    }

    .tape-row-first {
        div {
            height: 28vw;
            width: 25vw;

            img {
                max-width: 70;
            }
        }
    }

    .main {
        position: absolute;
        top: 6%;
    }

    .roles {
        position: absolute;
        top: 22%;
    }

    .gapSix {
        gap: 1vw;
    }

    .gap15 {
        gap: 4vw;
    }

    .goAnimation {
        gap: 8vw;
        animation: textTop2 4s linear infinite;
    }

    .circle-jump {
        padding-bottom: -20%;
        animation: jump-mobile 2s linear infinite;
    }

    .lights {
        border: 12px dotted;
        border-radius: 14px;
    }

    .circle-lights {
        width: 50vw;
        height: 100vw;
        border: 12px dotted;
        border-radius: 14px;
    }

    .gap-lights1 {
        right: 0;
        flex-direction: row-reverse;
    }

    .gap-lights2 {
        left: 0;
        bottom: 0;
    }

    #card-brown-first-lights {
        width: 100vw;
        height: 100vw;
        bottom: 0;
    }

    #card-brown-second-lights {
        width: 100vw;
        height: 100vw;
        bottom: 0;
        z-index: 1000;
    }

    #masks-lights {
        display: block;
        width: 100vw;
        height: 120vw;
    }

    #staging-lights {
        display: none;
    }

    #paint-circle-first {
        top: 2px;
        left: 2px;
    }

    #paint-circle-second {
        bottom: 2px;
        right: 2px;
    }

    #paint-ticket-first {
        top: 7px;
        right: 2px;
    }

    #paint-ticket-second {
        bottom: 7px;
        left: 2px;
    }

    #circle-blue-second {
        display: none;
    }

    #circle-blue-first {
        display: none;
    }

    #circle-brown-second {
        display: none;
    }

    #circle-brown-first {
        display: none;
    }

    #circle-orange {
        display: none;
    }

    #card-border-none-first {
        height: 100vw;
        position: absolute;
        top: calc(-100vw - 12px);
        animation: masks-scroll-mobile 5s linear infinite;
    }

    #card-brown-first {
        height: 100vw;
        position: absolute;
        bottom: 0;
        left: 0;

        img {
            width: 30vw;
        }
    }

    #card-brown-second {
        height: 100vw;
        position: absolute;
        bottom: 0;
        z-index: 100;

        h2 {
            font-size: 14vw;
        }

        p {
            font-size: 8vw;
        }
    }

    #card-border-none-second {
        height: 100vw;
        animation: masks-scroll-mobile 5s linear infinite;
        position: absolute;
        top: calc(-100vw - 12px);
        left: 0;
    }
}