/* Different styles for landscape and portrait displays */

@media (orientation: landscape) {
    /* header */
    header {
        display: float;
        text-decoration: none;
    }
    .navbar {
        position: fixed;
        max-width: 100%;
        top: 10%;
        left: 10%;
    }
    .nav-links li {
        justify-content: center; /* Center items horizontally */
        padding: 1em 0em; /* Padding around the header */
        list-style-type: none;
    }
    .active {
        font-weight: bold;
    }
    /* content */
    .content-container {
        margin: 0 auto; /* Optional: centers content horizontally */
        max-width: 50%; /* Optional: limits the width of the content */
    }
}

@media (orientation: portrait) {
    /* header */
    header * {
        display: flex;
        flex-wrap: wrap; /* Allows items to move to a new line if needed */
        text-decoration: none;
        gap: 3em;
        margin: 0 auto; /* Optional: centers content horizontally */
        padding-left: 0em; /* Indent list items */
    }
    .navbar {
        padding: 2em 1em 1em 1em;
        justify-content: center; /* Center items horizontally */
        max-width: 100%;
    }
    .nav-links li {
        align-items: center;
        list-style-type: none;
    }
    .active {
        font-weight: bold;
    }
    /* content */
    .content-container {
        margin: 0 auto; /* Optional: centers content horizontally */
        max-width: 100%; /* Optional: limits the width of the content */
    }
}

/* Common styles for landscape and portrait displays */

footer * {
    color: #ffd166;
    text-shadow: 0px 0px 10px #f5b700;
    text-align: center;
    padding: 5em 1em;
    position: relative; /* Makes the footer sticky */
    max-width: 100%;
    bottom: 0; /* Position at the bottom of the page */
    text-decoration: none;
    margin: 2em 30em;
}