/* Default styles for larger screens (desktop) */
body {
    background-color: lightblue;
    text-align: center;
    font-size: 24px;
    padding: 50px;
}
pre {
    white-space: pre-wrap; /* Allows text to wrap */
    word-wrap: break-word; /* Breaks long words */
}
h1.page-title {
    color: navy;
    margin: 0; /* Set margin to 0 to position it at the top */
}

/* Add a class for the wide scrollbar */
.wide-scrollbar {
    max-width: 100%; /* Limit the width to the screen width */
}

/* Style for the scrollbar */
.wide-scrollbar::-webkit-scrollbar {
    width: 20px; /* Adjust the width as needed */
}

/* Style for the scrollbar thumb */
.wide-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
}

/* Media query for smaller screens (tablets) */
@media screen and (max-width: 768px) {
    body {
        background-color: lightblue;
        text-align: center;
        font-size: 24px;
        padding: 50px;
    }
    pre {
        white-space: pre-wrap; /* Allows text to wrap */
        word-wrap: break-word; /* Breaks long words */
    }

    h1.page-title {
        font-size: 24px; /* Adjust font size for tablets */
    }

    /* Move the play button below the combo box and increase its size */
    #video-selector input[type="submit"] {
        display: block; /* Display the button as a block element */
        font-size: 32px; /* Increase the font size for larger buttons */
        padding: 20px; /* Increase padding for touch-friendly interaction */
    }

    /* Add tablet-specific styles here */
}

/* --- NEW STYLES FOR INTERACTIVE LIST --- */
.result-item {
    border: 1px solid #ccc;
    background-color: lightblue;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
}
.result-header {
    font-weight: bold;
    cursor: pointer; /* Makes it look clickable */
    color: #0056b3;
}
.result-content {
    display: none; /* Hidden by default */
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
}