@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
    /* Initially hide the page content */


body {
    font-family: "Roboto Condensed", sans-serif;
    background-color: #fff;
}

html {
    font-family: "Roboto Condensed", sans-serif;
    margin: 0 auto;
    max-width: 381px;
    background-color: transparent;
}


.is-hidden {
    padding: 0 !important;
    margin: 0 !important;
}

.card {
    background-color: transparent;
}

.card__inner {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
}

.card__inner.is-flipped {
    transform: rotateY(180deg);
}

.card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* Ensure hidden when flipped */
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
    /* Add shadow if needed */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card {
    background-color: transparent;
    perspective: 1000px;
    /* Add perspective for 3D effect */
}

.card__face--front,
.card__face--back {
    background-color: transparent;
    /* Make sure the background is transparent */
}

.card__face--front {
    background-image: url("/img/LEVEL1.png");
}

.card__face--back {
    background-image: url("/img/LEVELBG-1.png");
    transform: rotateY(180deg);
}

#animated-text {
    font-family: "Patua One", serif;
    font-size: 55px;
    font-weight: 400;
    font-style: normal;
    font-size: 2em;
    transition: transform 0.5s ease-in-out;
    display: inline-block;
}

@keyframes bounce {

    0%,
    100% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(0.9);
    }

    80% {
        transform: scale(1.05);
    }
}

/* Button animation for zoom-in effect using similar logic */
.button.zoom-in {
    animation: scale-up-effect 0.5s forwards;
}

@keyframes scale-up-effect {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.button.bounce {
    animation: bounce 0.5s ease-out;
}

/* Larger button style to match requirements */
.button.is-large {
    font-size: 1.5rem;
    padding: 1rem 2rem;
}

.values {
    font-size: 2.5rem;
    color: #ff3860;
    /* Make the timer text more prominent */
}

/* Hidden values class */
.values.is-hidden {
    display: none;
}

@keyframes bounce {

    0%,
    100% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(0.9);
    }

    80% {
        transform: scale(1.05);
    }
}

.scale-down {
    animation: bounce 0.5s forwards, scale-down-effect 0.5s forwards;
}

.scale-up {
    animation: bounce 0.5s forwards, scale-up-effect 0.5s forwards;
}

@keyframes scale-down-effect {
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes scale-up-effect {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Custom styling for the dropdown */
.custom-dropdown {
    background-color: #444; /* Background color */
    color: #fff; /* Text color */
    border: 1px solid #444; /* Border color */
    border-radius: 5px; /* Optional: for rounded corners */
}

/* Styling for the options within the dropdown */
.custom-dropdown option {
    color: #7e7e7e; /* Color for options in the dropdown */
    background-color: #444; /* Background color for options */
}

/* Hover and focus styles */
.custom-dropdown:hover {
    color: #fff; /* Text color */
    background-color: #444; /* Darker background on hover */
}

.custom-dropdown:focus {
    color: #fff; /* Text color */
    outline: none; /* Removes default focus outline */
    border-color: #444; /* Different border on focus */
    box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.2); /* Subtle focus shadow */
}