/* small devices (600px and below) */
@media only screen and (max-width: 600px) {



    /* ---------- FONTS ---------- */



    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
    


    /* ---------- SCROLL ANIMATION ---------- */



    @media(prefers-reduced-motion) {
        .hidden {
            opacity: 0;
            filter: blur(5px);
            transition: all 1s;
        }
        .show {
            opacity: 1;
            filter: blur(0);
            transition: all 1s;
        }
    }



    /* ---------- HEADER ---------- */



    header {
        background-color: #ffffff;
        color: #000000;
        padding: 10px 5px;
        top: 0;
        position: sticky;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    body.light-mode header {
        background-color: #ffffff;
        color: #000000;
        transition: all .3s;
    }

    body.dark-mode header {
        background-color: #000000;
        color: #ffffff;
        transition: all .3s;
    }

    .header-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 10px;
    }

























    
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        font-size: 16px;
        background-color: #ffffff;
        color: #000000;
    }
    body.no-scroll {
        overflow: hidden; /* Prevent scrolling */
    }
    
    body.light-mode {
        background-color: #ffffff;
        color: #000000;
        transition: all .3s;
    }
    body.dark-mode {
        background-color: #000000;
        color: #ffffff;
        transition: all .3s;
    }

    main {
        max-width: 100vw;
        overflow-x: hidden;
        margin: 0px;
    }
    
    

    
    .menu-toggle {
        display: block;
        cursor: pointer;
        font-size: 24px;
    }

    body.light-mode .menu-toggle {
        color: #000000;
    }

    body.dark-mode .menu-toggle {
        color: #ffffff;
    }
    
    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        position: fixed;
        top: 0;
        left: -100%; /* Initially hidden off the screen */
        z-index: 1000;
        justify-content: center;
        align-items: center;
        transition: left 0.3s ease; /* Transition for sliding effect */
    }
    body.dark-mode nav ul {
        background-color: #000000;
    }
    
    nav ul.show {
        left: 0; /* Slide in from the left */
    }
    
    nav ul li {
        text-align: center;
        padding: 15px 0;
    }
    
    nav ul li a {
        color: #000000;
        text-decoration: none;
        font-family: 'Poppins', Helvetica, sans-serif;
        font-weight: 400;
        font-size: 20pt;
        display: block;
    }

    body.dark-mode nav ul li a {
        color: #ffffff;
    }
    
    nav ul li a:hover {
        color: #9b194d;
    }
    
    .logo {
        width: 30px;
        height: auto;
    }
    .logo:hover {
        cursor: pointer;
    }
    .logo:hover path {
        fill: #979797;
        transition: all .3s;
    }
    .logo svg {
        width: 100%;
        height: 100%;
    }
    .logo #top {
        fill: #000000; /* Change the color */
        opacity: 0.75; /* Change the opacity */
    }
    .logo #bottom {
        fill: #000000; /* Change the color */
        opacity: 0.25; /* Change the opacity */
    }
    .logo #top, .logo #bottom {
        transition: fill 0.3s ease, opacity 0.3s ease;
    }
    
    body.dark-mode .logo #top {
        fill: #ffffff;
        opacity: 0.75;
    }   
    body.dark-mode .logo #bottom {
        fill: #ffffff;
        opacity: 0.25;
    }

    .theme-toggle {
        order: 1;
        cursor: pointer;
        width: 15pt;
        height: auto;
    }
    .theme-toggle:hover path {
        fill: #979797; /* Change color on hover */
    }

    .theme-toggle:hover #moon {
        width: 100%;
        height: 100%;
        transition: fill 0.3s ease;
    }

    .theme-toggle path {
        fill: #000000;
        transition: fill 0.3s ease;
    }

    body.dark-mode .theme-toggle path {
        fill: #ffffff;
    }
    body.dark-mode .theme-toggle:hover path {
        fill: #979797;
    }

    .close-menu {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 50px;
        height: 50px;
        color: #000;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        cursor: pointer;
        z-index: 1001; /* Ensure it's above the nav */
        transform: translateX(-1000px); /* Start off-screen to the left */
        transition: transform .8s ease; /* Transition for sliding effect */
    }

    body.dark-mode .close-menu {
        color: #ffffff;
    }

    .close-menu.show {
        transform: translateX(0); /* Move to its final position */
    }

    section {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: 75vh;
        max-width: 100vw;
        overflow-x: hidden;
    }

    footer {
        color: #000000;
        text-align: center;
        padding: 10px 0;
    }

    body.light-mode footer {
        background-color: #ffffff;
        color: #000000;
    }

    body.dark-mode footer {
        background-color: #000000;
        color: #ffffff;
    }
    
    /* Grid Layout Adjustments for Smaller Screens */
    .grid-container {
        display: grid;
        grid-template-columns: 1fr; /* Single column */
        gap: 0;
        width: 100vw;
    }
    .grid-item {
        position: relative;
        overflow: hidden;
        padding-top: 100%; /* Set the height of each grid item equal to its width */
    }
    .grid-item img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .grid-item:hover .hover-gif-1 {
        content: url('turntable_magazine/turntable.gif');
    }
    .grid-item:hover .hover-gif-2 {
        content: url('morphic/morphic.gif');
    }
    .grid-item:hover .hover-gif-3 {
        content: url('iceland/iceland.gif');
    }
    .grid-item:hover .hover-gif-4 {
        content: url('decorum/decorum.gif');
    }
    .grid-item:hover .hover-gif-5 {
        content: url('tryptic/tryptic.gif');
    }
    .grid-item:hover .hover-gif-6 {
        content: url('album/album.gif');
    }
    .grid-item:hover .hover-gif-7 {
        content: url('book_people/book_people.gif');
    }
    .grid-item:hover .hover-gif-8 {
        content: url('motion/boxee.gif');
    }
    .grid-item:hover .hover-gif-9 {
        content: url('grub/grub.gif');
    }
    .grid-item:hover .hover-gif-10 {
        content: url('motion/boxee.gif');
    }
    .grid-item:hover .hover-gif-11 {
        content: url('chloe/gif/chloe.gif');
    }
    
    h1 {
        font-family: 'Poppins', Helvetica, sans-serif;
        font-weight: 800;
        font-size: 24pt;
    }
    p {
        font-family: 'Poppins', Helvetica, sans-serif;
        font-weight: 400;
        font-size: 10pt;
    }
    footer p {
        font-family: Poppins, Helvetica, sans-serif;
        font-weight: 200;
        font-size: 12pt;
    }
    .copyright {
        font-family: Poppins, Helvetica, sans-serif;
        font-weight: 300;
        font-size: 10pt;
    }
    
    /* ABOUT Section */

    .about-container {
        max-width: 100%; /* Full width for small screens */
        margin: 0 auto;
        padding: 10px;
        overflow: hidden;
    }
    
    .about-content {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center;
        text-align: left;
    }
    
    .about-text {
        max-width: 70%;
        padding: 20px;
    }
    
    .about-image {
        margin: 20px 0;
        max-width: 80%;
    } 
    .about-image img {
        max-width: 100%;
        height: auto;
    }

    .download-button {
        display: inline-block;
        padding: 10px 20px;
        margin-top: 20px;
        background-color: #000000;
        color: #ffffff;
        text-decoration: none;
        border-radius: 5px;
        font-family: 'Poppins', Helvetica, sans-serif;
        font-weight: 400;
        font-size: 16px;
    }
    .download-button:hover {
        background-color: #979797;
    }


}