/* Basic styling for the entire page */
body {
    background-color: #313131;
    margin: 0; /* This removes the default margin that browsers add */
    padding: 0; /* It's also a good practice to remove default padding */
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
/*    height: 100vh; */
/*    overflow: hidden; */ /* This is the key to preventing the scrollbar */
    min-height: 100vh;
    overflow-y: scroll;
    overyflow-x: hidden;
}

/* Styling for the header and navigation */
header {
    background-color: #222;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    width: 100%;
    /* These three lines are the key to fixing the header */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensures the navbar is on top of all other content */
    /* --- ADD THIS (A common fix for rendering glitches on some devices) --- */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

nav ul {
    list-style: none; /* Removes bullet points */
    padding: 0;
    margin: 0;
    display: flex; /* Creates a horizontal layout for the list items */
    gap: 30px; /* Provides spacing between menu items */
}

/* Styling for the individual links */
nav a {
    text-decoration: none; /* Removes the underline from links */
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease; /* Adds a smooth transition for the hover effect */
}

/* Hover effect for the links */
nav a:hover {
    border-bottom-color: orange;
}

/* Styling for the main content area */
main {
    /* Set a top margin/padding equal to the header's height to prevent content from being hidden */
    margin-top: 60px;
    /* Ensure the main container takes the remaining space in the flex layout */
    flex-grow: 1;
    /* Apply a flexible height to the iframe inside */
    display: flex;
    flex-direction: column;
}

/* Styling for the iframe */
/* Ensure the iframe fills the available space within the main container */
main iframe {
    flex-grow: 1;
    width: 100%;
    border: none;
}