html, body {
    overflow: hidden;
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

.game-container {
    height: 60vh; /* Adjusted for mobile devices */
    display: flex;
    justify-content: center;
    align-items: center;
}

.target {
    width: 50px; /* Adjust target size for mobile */
    height: 50px; /* Adjust target size for mobile */
    background-color: red;
    border-radius: 50%;
    position: absolute;
    display: none;
}

.score {
    font-size: 24px;
    margin-top: 10px; /* Adjusted for mobile */
}

.result {
    font-size: 18px; /* Adjusted for mobile */
    margin-top: 10px; /* Adjusted for mobile */
}

.alcohol{
/* shows the end result of the game */
    /* optimize it for mobile */

    font-size: 34px;     /* Adjusted for mobile */
    margin: 10px; /* Adjusted for mobile */
    color: brown;
    text-align: center;
    font-weight: bold;

}


/* Add styles for the Start button */
.start-button {
    font-size: 24px;
    padding: 15px 30px; /* Increase padding to make the button bigger */
    background-color: #3498db; /* Add a blue background color */
    color: #fff; /* Text color */
    border: none; /* Remove the border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Add a transition for a hover effect */
}

.start-button:hover {
    background-color: #2980b9; /* Change background color on hover */
}


.countdown {
    font-size: 80px;
    color: #b700ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: scaleUp 1s ease-in-out;
}

@keyframes scaleUp {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}