/* style.css */
body {background-color: rgb(153, 0, 48);}

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}

#instructions-screen, #game-container {
    position: fixed;
    width: 600px;
    height: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    background-size: cover;
}
#win-clickable-area, #lose-clickable-area {
    z-index: 2000; /* Make sure it's above other elements */
}

#clickable-area {
    position: absolute;
    top: 420px; /* Adjust these values based on the clickable area on your image */
    left: 245px; /* Adjust these values based on the clickable area on your image */
    width: 330px; /* Adjust to the size of the clickable area */
    height: 145px; /* Adjust to the size of the clickable area */
    cursor: pointer; 
    background-color: rgba(144, 109, 109, 0);
}


.answer:active {
    transform: scale(0.98); /* Slightly scale down the button */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adjust shadow for depth effect */
}

#volume-control label, #music-volume-control label {
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-size: 20px;
    /* Add other styling properties for the labels as needed */
}

.clickable-text {
    border: 2px solid black;
    padding: 10px; 
    display: inline-block; 
    cursor: pointer; 
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}


#image-container {
    text-align: center;
    width: 600px;
    height: 600px;
    margin: auto; /* Centers the div horizontally */
}

#image-container img{
    max-width: 100%;
    height: auto;
}

#dynamic-image {
    z-index: 999;
}

@font-face {
    font-family: 'DMSansLight';
    src: url('Fonts/DMSans_18pt-Light.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
        font-family: 'Blox';
        src: url('Blox2.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;  
}

/* style.css */
body {
    font-family: 'DMSansLight', sans-serif;
    background-image: radial-gradient(ellipse farthest-corner at center, rgba(147, 0, 94, 1) 35%, rgba(153, 0, 48, 1) 65%, rgba(137, 42, 0, 1) 100%);
}


#question {
    text-align: center;
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
    background-color: white;
    margin: auto;
    padding: 10px;
    /* Position the question */
    position: fixed;
    top: 20px; /* Adjust as needed */
    left: 50%; 
    transform: translateX(-50%); /* This centers the div */
}

.answer {
    text-align: center;
    opacity: 1;
    animation: fadeIn 2s ease-in forwards;
    background-color: white;
    cursor: pointer;
    padding: 10px;
    /* Position each answer */
    position: absolute;
    /* Adjust top and left for each answer individually */
}

#answer1 {
    top: 130px; /* Adjust as needed */
    left: 20px; /* Adjust as needed */
}

#answer2 {
    top: 130px; /* Adjust as needed */
    right: 20px; /* Adjust as needed */
}

#answer3 {
    bottom: 350px; /* Adjust as needed */
    left: 20px; /* Adjust as needed */
}
#answer4 {
    bottom: 350px; /* Adjust as needed */
    right: 20px; /* Adjust as needed */
}

/* Rest of your styles */


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


#game-container {
    position: relative;
    width: 600px;
    height: 600px;
    left: 50%;
    top: calc(50% - 52px);
    transform: translate(-50%-10px, -50%);
    margin: 0;
    padding: 0;
}