/*-------------------------------------------Background Image---------------------------------------------*/
#bg {
    width: 100%;
    height: auto;
}


/*-------------------------------------------Redirect Button---------------------------------------------*/
.redirect-btn {
    top: 30%;
}

.redirect-btn img {
    width: 65%;
    animation: pulse 0.9s infinite linear;
}

/*-------------------------------------------Redirect Button 2---------------------------------------------*/
.redirect-btn2 {
    top: 85%;
}

.redirect-btn2 img {
    width: 60%;
    animation: pulse 0.9s infinite linear;
}

/*-------------------------------------------Element 1---------------------------------------------*/
.element1 {
    top: 10%;
    left: 7%;
}

.element1 img {
    width: 14%;
    animation: floatCircle1 0.9s linear infinite;
}

/*-------------------------------------------Element 2---------------------------------------------*/
.element2 {
    top: 26%;
    left: 1%;
}

.element2 img {
    width: 15%;
    animation: floatCircle2 0.9s linear infinite;
}

/*-------------------------------------------Element 3---------------------------------------------*/
.element3 {
    top: 25%;
    left: 85%;
}

.element3 img {
    width: 12.5%;
    animation: floatCircle3 0.9s linear infinite;
}

/*-------------------------------------------Element 4---------------------------------------------*/
.element4 {
    top: 8%;
    left: 82%;
}

.element4 img {
    width: 20%;
    animation: floatCircle4 0.9s linear infinite;
}

/*-------------------------------------------GIF---------------------------------------------*/
.gif {
    top: 63%;
}

.gif iframe {
    border-radius: 18px;
    border: 5px solid white;
    width: 90%;
    max-width: 720px;
    height: 22vh;
    object-fit: cover; 
}

/*------------------------------------------- COUNTDOWN ---------------------------------------------*/
.countdown {
    top: 43%;
    display: flex;
    gap: 11vw;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.countdown p {
    color: white;
    font-size: 10vw;
    margin: 0;
}

.countdown .gold {
    color: gold;
}

/*-------------------------------------------Keyframe Animation---------------------------------------------*/
@keyframes pulse {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(0.9);
    }
}

@keyframes floatCircle1 {
    0% {
        transform: rotate(-40deg) translate(0px, 0px);
    }

    25% {
        transform: rotate(-40deg) translate(0px, 5px);
    }

    50% {
        transform: rotate(-40deg) translate(2.5px, 7.5px);
    }

    75% {
        transform: rotate(-40deg) translate(2.5px, 5px);
    }

    100% {
        transform: rotate(-40deg) translate(0px, 0px);
    }
}

@keyframes floatCircle2 {
    0% {
        transform: rotate(-110deg) translate(0px, 0px);
    }

    25% {
        transform: rotate(-110deg) translate(0px, 5px);
    }

    50% {
        transform: rotate(-110deg) translate(2.5px, 7.5px);
    }

    75% {
        transform: rotate(-110deg) translate(2.5px, 5px);
    }

    100% {
        transform: rotate(-110deg) translate(0px, 0px);
    }
}

@keyframes floatCircle3 {
    0% {
        transform: rotate(135deg) translate(0px, 0px);
    }

    25% {
        transform: rotate(135deg) translate(0px, 5px);
    }

    50% {
        transform: rotate(135deg) translate(2.5px, 7.5px);
    }

    75% {
        transform: rotate(135deg) translate(2.5px, 5px);
    }

    100% {
        transform: rotate(135deg) translate(0px, 0px);
    }
}

@keyframes floatCircle4 {
    0% {
        transform: rotate(30deg) translate(0px, 0px);
    }

    25% {
        transform: rotate(30deg) translate(0px, 5px);
    }

    50% {
        transform: rotate(30deg) translate(2.5px, 7.5px);
    }

    75% {
        transform: rotate(30deg) translate(2.5px, 5px);
    }

    100% {
        transform: rotate(30deg) translate(0px, 0px);
    }
}

/*-------------------------------------------Multi Device Screen Size---------------------------------------------*/
/* Large devices (desktops, 992px and up) */
@media (min-width: 343px) {

    .gif iframe {
        height: 18vh;
    }

}

@media (min-width: 360px) {

    .gif iframe {
        height: 22.5vh;
    }

}

@media (min-width: 375px) {

    .gif iframe {
        height: 27.5vh;
    }

}

@media (min-width: 389px) {

    .gif iframe {
        height: 27.5vh;
    }

}

@media (min-width: 539px) {

    .gif iframe {
        height: 35vh;
    }

}

@media (min-width: 820px) {
    #bg {
        height: 100vh;
    }

    .countdown {
        top: 43%;
        gap: 1.58vw;
    }

    .countdown p {
        color: white;
        font-size: 1.8vw;
        margin: 0;
    }
    
    .gif iframe {
        height: 16vh;
    }

}