/* large devices (992px and up) */
@media only screen and (min-width: 601px) {

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



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



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



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



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



    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        top: 0;
        position: sticky;
        z-index: 1000;
        max-width: 100vw;
        overflow-x: hidden;
    }
    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

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



    /* LOGO */



    .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;
    }



    /* MENU TOGGLE */



    .menu-toggle {
        display: none;
    }
    .menu-toggle:hover {
        color: #979797;
    }



    /* CLOSE MENU */



    .close-menu {
        display: none;
    }



    /* NAVIGATION */



    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        max-width: 100vw; /* Constrain nav width */
        overflow-x: hidden; /* Prevent horizontal scrolling within nav */
    }
    nav ul li {
        display: inline-block;
        position: relative;
        margin: 15px 10px;
    }
    nav ul li a {
        color: inherit;
        text-decoration: none;
        font-family: 'Poppins', Helvetica, sans-serif;
        font-weight: 400;
        font-size: 14px;
        padding: 10px 15px;
        transition: color 0.3s;
    }
    nav ul li a:hover {
        color: #979797;
    }



    /* THEME TOGGLE */



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

    .theme-toggle #moon {
        width: 100%;
        height: 17px;
        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;
    }



    /* ---------- BODY ---------- */



    body {
        font-family: Poppins, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

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

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



    /* MAIN */



    main {
        max-width: 100vw; /* Constrain main content width */
        overflow-x: hidden; /* Prevent horizontal scrolling within main */
        margin: 0px;
    }

    h1 {
        font-family: Poppins, Helvetica, sans-serif;
        font-weight: 800;
        font-size: 24px;
    }
    p {
        font-family: Poppins, Helvetica, sans-serif;
        font-weight: 400;
        font-size: 18px;
    }

    section {
        max-width: 100vw; /* Constrain section width */
        overflow-x: hidden;
        display: flex;
        place-items: center;
        align-content: center;
        min-height: 100vh;
    }



    /* PORTFOLIO GRID */


    
    .grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
        gap: 0; /* Gap between grid items */
        width: 100%; /* Ensure grid container takes full width */
    }
    .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; /* Ensure the entire image is visible and fills the square */
    }
    
    .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');
    }



    /* ---------- FOOTER ---------- */



    footer {
        text-align: center;
        padding: 10px 0;
        max-width: 100vw; /* Constrain footer width */
        overflow-x: hidden; /* Prevent horizontal scrolling within footer */
    }
    footer p {
        font-family: Poppins, Helvetica, sans-serif;
        font-weight: 400;
        font-size: 16px;
    }



    /* ARROW NAV */

    

    .arrow {
        font-size: 2em;
        text-decoration: none;
    }
    
    .arrow:hover {
        color: #979797; /* Highlight color on hover */
    }



    /* ABOUT */


    
    body.about {
        overflow: hidden;
    }
    
    .about-container {
        max-width: 100vw; /* Limit container width */
        margin: 0 auto; /* Center container horizontally */
        overflow: hidden; /* Hide any overflow content */
    }
    
    .about-content {
        display: flex; /* Use flexbox layout */
        align-items: center; /* Center items vertically */
        justify-content: center; /* Center items horizontally */
        text-align: left; /* Ensure text is aligned left */
    }
    
    .about-text {
        flex: 1; /* Take up remaining space */
        max-width: 50%; /* Limit text width */
        padding-left: 50px;
    }
    
    .about-image {
        margin-left: 80px; /* Add some space between text and image */
        max-width: 25%;
    }
    
    .about-image img {
        max-width: 100%; /* Ensure the image does not exceed its container's width */
        height: auto; /* Maintain aspect ratio */
    }



    /* RESUME */

    

    .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;
    }
    body.dark-mode .download-button {
        background-color: #fff;
        color: #000;
    }
    .download-button:hover {
        background-color: #979797;
        transition: all 0.3s;
    }
    body.dark-mode .download-button:hover {
        background-color: #979797;
        transition: all 0.3s;
    }
    
}