body {
    font-family: Arial, sans-serif;
    background-color: #FAF0BE; /* Changed to FAF0BE as per user request */
    font-size: 120%; /* Increased base font size */
}

.quiz-container {
    max-width: 90%; /* Changed from fixed width to 90% */
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1; /* Lower z-index to stay below the open button */
}

button {
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

button, label {
    font-size: 1.5em; /* Use relative units */
}

label, input {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

input[type="radio"] {
  opacity: 0;
  z-index: 100;
}

input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

label {
  padding: 5px;
  cursor: pointer;
  z-index: 90;
  display: flex;
  align-items: center;
}

label:hover {
  background: #DDD;
}

label::before {
  /* Remove the content to avoid numbering duplication */
  content: "";
}

.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
}

.modal-content {
    background-color: #fff;
    margin: 15% auto; /* Centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Adjust as needed */
    position: relative;
    border-radius: 5px;
    max-height: 80vh; /* Limits the modal height */
    overflow-y: auto;  /* Adds scroll if content is too long */
    font-size: 1em; /* Use relative units */
}

.modal-content p {
    font-size: 2.5em; /* Increased from 1em to 2.5em */
}

.close-button {
    position: absolute; /* Positions the close button relative to modal-content */
    top: 10px;          /* Positions 10px from the top */
    right: 10px;        /* Positions 10px from the right */
    z-index: 1;         /* Ensures the button stays above other elements */
    padding: 10px 20px;
    font-size: 1.5em; /* Use relative units */
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.close-button:hover {
    background-color: #0056b3;
}

.modal-content button.close-button { /* Added missing dot */
    outline: none; /* Remove default outline */
}

#restart button {
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#restart button:hover {
    background-color: #0056b3;
}

/* Progress Bar Styles */
#progress-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin-bottom: 20px;
    height: 25px;
    overflow: hidden;
}

#progress-bar {
    height: 100%;
    width: 0%;
    background-color: #76c7c0;
    border-radius: 5px;
    transition: width 0.3s ease;
}

/* Adjust options container to allow side-by-side layout */
.options-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    counter-reset: option; /* Initialize counter for options */
}

/* Consolidated option-container styles for two options per row */
.option-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: #f9f9f9; /* Add background color for uniformity */
    padding: 15px; /* Add padding for spacing */
    border: 1px solid #ccc; /* Add border for visual separation */
    border-radius: 5px; /* Rounded corners for consistency */
    width: 48%; /* Fit two options per row */
    box-sizing: border-box; /* Include padding and border in width */
    font-size: 1em; /* Ensure font-size inherits from body */
    counter-increment: option; /* Increment counter for each option */
    height: 150px; /* Set a fixed height for uniformity */
}

/* Remove margin on the right for every second option */
.option-container:nth-child(2n) {
    margin-right: 0;
}

.option-container input[type="radio"] {
    margin-right: 10px;
}

.option-container label {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: calc(100% - 170px); /* Adjust width to fit next to image */
    padding: 5px;
    z-index: 90;
    flex: 1; /* Allow label to take remaining space */
}

.option-container label::before {
    content: counter(option) ". ";
    font-weight: bold;
    margin-right: 10px; /* Display counter before label text */
}

.option-container img {
    width: 100px;    /* Set fixed width */
    height: 100px;   /* Set fixed height */
    margin-right: 20px; /* Space between image and text */
    border: 1px solid #ccc;
    border-radius: 5px;
    object-fit: cover; /* Ensure images maintain aspect ratio */
    flex-shrink: 0; /* Prevent images from shrinking */
}

.option-container span {
    font-size: 1.2em; /* Adjust as needed for larger text */
    word-break: break-word; /* Wrap text if it's too long */
    flex-grow: 1; /* Allow text to take remaining space */
}

/* Set the h1 text to match body font size */
h1 {
    font-size: 1em; /* Changed from 2em to match body text */
}

/* Increase the font size of the question text */
#question {
    font-size: 2.5em; /* Set to a larger size for prominence */
    margin-bottom: 20px; /* Optional: Adds spacing below the question */
}

#text-magnifier {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1000;
    /* Adjust width to accommodate the new input */
    width: auto;
}

#text-magnifier input[type="range"] {
    width: 150px;
    vertical-align: middle;
}

#text-magnifier input[type="number"] {
    display: none; /* Hide the number input if still present */
    width: 60px;
    margin-left: 10px;
    vertical-align: middle;
}

#text-magnifier input {
    font-size: 1em;
}

#text-magnifier select {
    width: 80px;
    margin-left: 10px;
    vertical-align: middle;
    font-size: 1em;
}

/* Increase font size for result and end text */
#result {
    font-size: 2em; /* Make result text larger */
}

#end {
    font-size: 2.5em; /* Make end results text even larger */
}

/* Adjust font sizes for smaller screens */
@media (max-width: 768px) {
    body {
        font-size: 100%; /* Adjust base font size */
    }
    
    .modal-content p,
    #question,
    #end,
    #result {
        font-size: 1.5em; /* Adjust font sizes */
    }

    .option-container img {
        width: 80px;
        height: 80px;
    }

    .option-container {
        width: 100%; /* Stack options vertically */
        height: 130px; /* Adjust height for smaller screens */
    }
}

/* Adjust layout for very small screens */
@media (max-width: 480px) {
    body {
        font-size: 90%; /* Further adjust base font size */
    }
    
    .modal-content p,
    #question,
    #end,
    #result {
        font-size: 1.2em; /* Further adjust font sizes */
    }
    
    .option-container {
        flex-direction: column; /* Stack options vertically */
        align-items: flex-start;
        height: auto; /* Allow height to adjust on very small screens */
    }
    
    .option-container img {
        width: 100%; /* Adjust image width */
        height: auto;
        margin-bottom: 10px;
    }
    
    .option-container label {
        width: 100%; /* Ensure labels take full width */
    }
}

/* Remove sidebar and open button styles */

/* Navigation Bar Styles */
nav {
    background-color: rgba(211, 211, 211, 0.7); /* Transparent gray */
    height: 40px; /* Shorter height */
    width: 100%;
    z-index: 1000;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;          /* Use Flexbox for horizontal alignment */
    align-items: center;    /* Vertically center items */
}

nav li {
    /* Remove float: left; */
}

nav li.logo {
    margin-right: 20px;     /* Add space between logo and navigation links */
}

nav li.logo img {
    height: 40px;           /* Increase logo size */
    width: auto;
}

nav li a {
    display: block;
    color: black; /* Changed text color to black */
    text-align: center;
    padding: 0 15px; /* Reduce padding */
    text-decoration: none;
}

nav li a:hover {
    background-color: #ddd;
    color: black;
}

/* Clear floats after the navigation items */
nav::after {
    content: "";
    display: table;
    clear: both;
}

/* Fullscreen Button Styles */
.fullscreen-button {
    margin-left: auto; /* Push to the right */
}

#toggleFullscreen {
    padding: 5px 10px;
    font-size: 1em;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#toggleFullscreen:hover {
    background-color: #0056b3;
}

/* Fullscreen Mode Styles */
.fullscreen .quiz-container {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.fullscreen nav,
.fullscreen #text-magnifier {
    display: none; /* Hide navigation and magnifier */
}