/* body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #1a1a1a, #4d4d4d);
    color: #fff;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
} */
 body{
    overflow-x: hidden;
 }

.quiz-container {
    background: rgba(50, 50, 50, 0.8);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    width: 100%;
    min-height:300px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 300px;
}
#question-container{
    color:white
}

h1 {
    color: #0ff;
    margin-bottom: 20px;
}

h2 {
    margin: 20px 0 10px;
}

h3 {
    margin-top: 10px;
}

.neon-button {
    background-color: #222;
    color: #0ff;
    border: 2px solid #0ff;
    padding: 15px 30px;
    margin: 10px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
    transition: all 0.3s ease;
    /* box-shadow: 0 0 10px #0ff, 0 0 20px #0ff; */
}

.neon-button:hover {
    background-color: #0ff;
    color: #222;
    box-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
}

#options-container {
    margin: 20px 0;
}

.option-button {
    background-color: #444;
    color: #0ff;
    border: none;
    padding: 15px;
    margin: 5px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    display: block;  
    width: calc(100% - 20px);  
}

.option-button:hover {
    background-color: #555;
}

.button-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

#answer-details {
    text-align: left;  /* Align correct answers left for better readability */
    margin-top: 20px;
    color:white
}

#score{
    color:white
}
.correct {
    color: green;
}

.wrong {
    color: red;
}

/* Responsive Styles */
@media (max-width: 600px) {
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px; 
    }

    .neon-button, .option-button {
        font-size: 18px; 
        padding: 10px 20px; 
    }

    .button-container {
        flex-direction: column;
        align-items: center; 
    }

    .neon-button {
        width: 100%; 
        margin: 5px 0; 
    }
}
.correct {
    color: green;
}

.wrong {
    color: red;
}

.option-button.selected-option {
    background-color: rgb(67, 238, 10); /* Change background color for the selected option */
    color: #222; /* Change text color for contrast */
    border: 2px solid #222; /* Add border for clarity */
}
#result{
    padding-top: 300px;
}
@media (max-width: 395px) {
    #result{
        padding-top: 1500px;
    }

}
/* .navbar{
    width:100%;
    height:100px;
    background-color: rgb(13, 237, 219);
} */
#question-count-selection button{
    padding:8px;
    border:none;
    box-shadow:3px 3px 13px black;
    background-color: rgb(239, 239, 14);
    color:black;
    font-weight: 700;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#question-count-selection h3{
    color: #0ff;
}
#timer-selection h3{
    color: #0ff;
}
#timer-selection button{
    padding:8px;
    border:none;
    box-shadow:3px 3px 13px black;
    background-color: rgb(239, 239, 14);
    color:black;
    font-weight: 700;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#timer{
    width:200px;
    height:50px;
    background-color: rgb(239, 239, 14);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-left:50px;
    margin-bottom: 20px;
}