html, body {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    background-color: #000000;
    color: white;
}

/* Centering content */
.center {
    text-align: center;
    padding: 10px;
}

/* Body text styling */
.bodytext {
    font-size: 18px;
    line-height: 2;
    text-align: left;
    background: #000000;
    margin: 5px 0;
    padding: 0 50px;
}


/* Header Image Specific Styling */
.header img {
    max-width: 250px;
    height: auto;
}

/* Answer Image Specific Styling */
.answer-image-container {
    display: none;  /* Initially hidden */
    margin-top: 20px;
    display: flex;
    justify-content: center;  /* Center the image horizontally */
}

.answer-image-container img {
    max-width: 200px;  /* Restrict the size of the answer image */
    height: auto;
}

/* Audio Player Styling */
audio.small-player {
    width: 300px;
}

/* Caret Container Styling */
.caret-container {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-family: 'Courier New', Courier, monospace;
}

.caret {
    transition: transform 0.3s ease;
    display: inline-block;
    transform-origin: center;
}

/* Footer links at the bottom */
.footer-links {
    text-align: center;
    background: #000000;
    padding: 10px 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
}

.footer-links a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
}

.footer-links a:hover {
    color: grey;
}

.footer-links a:visited {
    color: white;  /* Change visited links to grey */
}

/* Correct and Incorrect answer feedback */
.correct {
    color: green;
    font-weight: bold;
}

.incorrect {
    color: red;
    font-weight: bold;
}

/* Responsive Design */
@media (max-width: 600px) {
    .bodytext, .center {
        font-size: 14px;
        padding: 10px;
    }

    audio.small-player {
        width: 100%;
    }
}

/* W3C logos */
.w3c {
    font-family: 'courier', sans-serif;
    font-size: 16px;
    padding: 50px;
    border: none;
    text-align: center;
    background: #000000;
    color: white;
    margin: 0; /* Reset margin */
}

.w3c img {
    max-width: 50px;
    height: auto;
}

.green-text {
    color: green;
    text-decoration: underline;
    font-weight: bold;
    }

.italic-text {
    font-style: italic;
    text-decoration: underline;
    }

 .white-separator {
      border: none;
      height: 2px;
      background-color: white;
      margin: 20px 0;
    }

.number-correct {
    color: green;
    font-weight: bold; /* Optional */
}

.homepage-link {
    position: absolute; /* Pin the link to the top-left */
    top: 10px; /* Distance from the top */
    left: 25px; /* Distance from the left */
    display: inline-block; /* Ensures proper layout */
    margin: 0; /* Remove any browser default margins */
    padding: 0; /* Remove any browser default padding */
}

.homepage-link img {
    width: 50px !important; /* Force a specific width */
    height: auto !important; /* Maintain the aspect ratio */
    max-width: 100%; /* Prevent scaling beyond its container */
    max-height: 100%; /* Prevent overflows */
    object-fit: contain; /* Ensure proper image fitting */
    margin: 0; /* Remove unwanted margins */
    padding: 0; /* Remove unwanted padding */
}

sup {
      font-size: 0.5em; /* 70% of the parent font size */
    }