/* Hide the sidebar by default, which affects mobile devices */
.sidebar {
    display: none; /* This will hide the sidebar on mobile devices */
}

/* Base styles for the header to ensure it shows correctly on all devices */
header h1 {
    font-size: 16px; /* Adjust font size for mobile devices */
    text-align: center;
    padding: 10px 0;
    margin: 0 auto; /* Center the header */
    word-wrap: break-word; /* Prevents long words from overflowing */
}

/* Media Queries */

/* For tablets and desktops - show the sidebar */
@media (min-width: 768px) {
    .sidebar {
        display: block; /* Only show the sidebar for tablets and desktops */
        width: 25%; /* Set the width of the sidebar */
        float: left; /* Align sidebar to the left */
        padding: 10px; /* Padding for spacing inside the sidebar */
    }

    .content {
        width: 75%; /* Set the width of the main content area */
        float: right; /* Align content to the right */
    }

    header h1 {
        font-size: 22px; /* Increase font size for better visibility on larger screens */
    }
}

/* For larger desktops */
@media (min-width: 992px) {
    header h1 {
        font-size: 26px; /* Further increase font size for larger desktops */
    }
}

/* Additional adjustments for larger desktops */
@media (min-width: 1200px) {
    header h1 {
        font-size: 30px; /* Set font size for very large screens */
    }
}
/* Base style for the iframe to ensure it's responsive */
iframe {
    width: 100%; /* Full width on smaller devices to ensure it fits within the screen */
    height: auto;  /* Height is auto to maintain aspect ratio */
    aspect-ratio: 16 / 9; /* Maintains a 16:9 aspect ratio */
    border: none; /* Removes any default border */
}

/* Media Queries */
/* Adjustments for small mobile devices */
@media (max-width: 480px) {
    iframe {
        height: 200px;
        width:300px; /* Adjust height proportionally for small mobile screens */
    }
}

/* Media Queries for larger screens */
@media (min-width: 768px) {
    iframe {
        width: 460px; /* Fixed width for larger screens */
        height: 315px; /* Fixed height based on a 16:9 aspect ratio */
    }
}