@media screen and (max-width: 660px) {
    /* Adjustments for smaller screens */
    .vertical-nav {
        width: 50%; /* Full width on small screens */
        flex-direction: column; /* Change to row layout */
    }

    .vertical-nav ul {
        flex-direction: column; /* Change to column layout */
        justify-content: center; /* Space items evenly */
    }

    .vertical-nav li {
        flex: 1; /* Allow items to grow equally */
        text-align: center; /* Center text in each item */
        font-size: 30px; /* Increase font size for better readability */
    }
    .vertical-nav a {
        font-size: 30px; /* Increase font size for better readability */
        display: flex;
    }
        .logo {
        height: auto; /* Adjust logo height for smaller screens */
        padding-top: 20px; /* Reduce padding for smaller screens */
    }
    
}



/* HEADER */
header {
    padding: 0;
    margin: 0;
}

.logo {
   margin: auto;
   width: 500px;
    padding-top: 50px;
}

.logo-nanz {
    width: 150px;
}

/* Layout container */
.container {
    display: flex;
    flex: 1; /* Take up remaining space */
    align-items: flex-start; /* Align items at the top */
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
}

/* VERTICAL NAV BAR */
.vertical-nav {
    font-family: Clash Display medium;
    display: flex;
    flex-direction: column; /* Corrected order of flex-direction */
    background-color: #FE7D1E; /* Background color */
}

.vertical-nav ul {
    list-style: none; /* Remove default list style */
    padding: 0;
    margin: 0;
    display: flex;
}

.vertical-nav li {
    align-items: center;
    padding: 20px; /* Spacing inside each box */
    display: flex;
}

.vertical-nav a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    display: block;
    width: 100%;
    font-size: 30px;
}

.vertical-nav li:hover {
    background-color: #ADC7FF; /* Highlight on hover */;
}

/* BODY */
body {
    background-color: #ADC7FF;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Full viewport height */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    box-sizing: border-box; /* Ensure consistent box model */
    font-family: Clash Display medium;
}
/* MAIN */

main {
    flex: 1; /* Take up remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center;
    font-family: Clash Display light;
    font-weight: bold;
    font-size: 22px;
    padding: auto;
}
/* FOOTER */
footer {
    text-align: center;
    font-family: Clash Display light;
    font-weight: bold;
}

/* ABOUT PAGE */
header h1 {
    font-family: Clash Display medium;
    font-weight: bold;
    display: block;
    width: 100%;
    margin: auto;
    padding: 20px;
    background-color: #FE7D1E;
}