body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #000;
    overflow: hidden;
    
}
.question-container {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Center content vertically */
    align-items: center;      /* Center content horizontally */
    height: 100vh;              /* Full height */
    width: 100%;               /* Full width */
    padding: 0;
    background-color: #000;
}

#quiz-logo {
    max-width: 80px;      /* Decrease the size of the logo in the quiz container */
    height: auto;
    position: absolute;  /* Position the logo at a specific place inside the quiz container */
    right: 10px;        /* Move the logo 10px from the right */
    border-radius: 50%;
    top: 10px;
}

#logo-container {
    margin-bottom: 20px;
}

/* Container for the quiz content with a border */
#quiz-container {
    display: flex;
    flex-direction: column;
    width: 50%; /* Center quiz container */
    align-items: center; /* Center content inside quiz container */
}

/* Question section - Take full width of the quiz container */
#questions {
    font-size: 25px;
    padding-bottom: 20px;
    color: lightgoldenrodyellow;
    width: 100%;  /* Take full width inside the quiz container */
    text-align: center;  /* Center the question text */
}

/* Answer buttons - Take 60% width */
#answer-buttons {
    display: flex;
    flex-direction: column;
    width: 50%;  /* Set width of answer buttons */
    align-items: center; /* Center the buttons horizontally */
    margin-top: 20px;
}   

#answer-buttons .btn {
    background-color: #DBB157;
    color: #000;
    font-size: 18px;
    padding: 8px;
    text-align: left;
    cursor: pointer;
    width: 100%;  /* Full width of the parent container */
    margin-bottom: 20px;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    outline: none;
}

/* Button container */
.button-container {
    display: flex;
    justify-content: center; /* Center buttons horizontally */
    margin-top: 20px;
    width: 50%;
}

#previous-btn, #next-btn, #submit-btn {
    padding: 10px 15px;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    width: 15%;
    background-color:  lightgoldenrodyellow;
    color: #000;
    margin: 0 10px; /* Add space between buttons */
    border-radius: 10px;
    border: none;
    outline: none;
    animation:  zoomIn 1s ease-out;
    
}
#previous-btn:hover, #next-btn:hover, #submit-btn:hover {
    background-color: lightcoral;
    transform: scale(1.1);
}

@keyframes zoomIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
  }
/* Zoom-out effect (on hover) */
#previous-btn:hover, #next-btn:hover, #submit-btn:hover {
    animation: zoomOut 1s ease-in-out;
}

/* Zoom-out effect on hover */
@keyframes zoomOut {
    0% { transform: scale(0.5); } /* Start slightly zoomed in */
    100% { transform: scale(1); } /* End at normal size */
}

/* Result message */
#result-message {
    font-size: 50px;
    text-align: center;
    color: blueviolet; 
    opacity: 0;
    animation: fadeInMessage 1s ease-out forwards, scaleUpMessage 0.5s ease-out forwards 1s, bounceMessage 0.8s ease-out forwards 1.5s, colorChange 3s ease-in-out infinite, glowMessage 1.5s ease-in-out infinite, slideInFromTop 1s ease-out forwards 0.5s;
}

@keyframes fadeInMessage {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes scaleUpMessage {
    0% { transform: scale(0.8); }
    100% { transform: scale(1); }
}

@keyframes bounceMessage {
    0% { transform: translateY(-20px); }
    30% { transform: translateY(10px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

@keyframes colorChange {
    0% { color: blueviolet}
    50% { color: #ff6347;} 
    100% { color: #3b31ad; }
}

@keyframes glowMessage {
    0% { text-shadow: 0 0 10px blueviolet, 0 0 20px blueviolet }
    50% { text-shadow: 0 0 20px #ff6347, 0 0 30px #ff6347; }
    100% { text-shadow: 0 0 10px #3b31ad, 0 0 20px #3b31ad; }
}

@keyframes slideInFromTop {
    0% { transform: translateY(-100px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
#go-back-btn{
    color:#000;
    width: 10%;
    margin-top: 20px;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 10px;
    outline: none;
    border: none;
    background-color: lightgoldenrodyellow;
    animation: pulseButton 0.5s infinite ease-in-out;
}
#summary-page{
    background-color: #000;
    color: #fff;
    height: 100vh;
}

#summary-page h2{
    color: #fff;
}
.selected {
    background-color: #90EE90 !important; /* Light Green */
}

@keyframes pulseButton {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); } 
}


/* Mobile Responsiveness */
@media (max-width: 767px) {
    /* Adjust quiz container width for smaller screens */
    #quiz-container {
        width: 90%;  /* Take up more space on smaller screens */
        padding: 10px;
        
       
    }
    /* Adjust the question font size */
    #questions {
        font-size: 18px;  /* Reduce the font size for small screens */
        padding-bottom: 15px;
        width: 100%;
    }

    /* Answer buttons: Use full width */
    #answer-buttons {
        width: 100%;  /* Take full width for buttons on small screens */
    }

    #answer-buttons .btn {
        font-size: 16px;  /* Reduce button font size */
        padding: 10px;
        width: 100%;  /* Ensure buttons fill the width of their container */
    }

    /* Center the button container and adjust its width */
    .button-container {
        width: 100%; /* Make the button container full width on mobile */
        justify-content: space-evenly; /* Space out buttons evenly */
    }

    /* Adjust the width of the buttons */
    #previous-btn, #next-btn, #submit-btn {
        width: 30%; /* Buttons take up 30% width on small screens */
        margin: 0 5px; /* Reduce spacing between buttons */
    }

    /* Adjust the result message font size */
    #result-message {
        font-size: 35px; /* Smaller font size for result on mobile */
        margin-top: 10px;
    }
    #go-back-btn {
        width: 37%; 
        padding: 10px 10px; /* Adjust padding for better visibility */
        font-size: 15px; /* Increase font size for better readability */
        margin-top: 15px; /* Reduce top margin for smaller screens */
    }
    #quiz-logo {
        max-width: 60px; /* Adjust the max width for mobile screens */
        right: 5px;      /* Move the logo closer to the right edge */
        top: 5px;
    }
    
}