@import url("../css/style.css");



/* For Tablets and smaller desktop windows (under 768px) */
@media screen and (max-width: 768px) {
    nav.horizontal ul {
        flex-wrap: wrap; /* Allows buttons to drop to a new line if they run out of space */
        justify-content: center; /* Centers the buttons when they wrap, instead of pushing to edges */
        gap: 15px; /* Slightly smaller gap to save space */
    }
    
    nav.horizontal ul li a {
        padding: 10px 15px; /* Slightly smaller padding so they fit better */
    }
}

/* For Mobile Phones (under 480px) */
@media screen and (max-width: 480px) {
    nav.horizontal ul {
        flex-direction: column; /* Stacks the buttons completely vertically */
        width: 100%; 
        gap: 10px;
    }

    nav.horizontal ul li {
        width: 100%; /* Ensures the list item takes up the full width */
    }

    nav.horizontal ul li a {
        width: 100%; /* Makes the clickable button stretch all the way across the screen */
        box-sizing: border-box; /* Ensures the padding doesn't push the button off the screen */
    }
}