@media screen  and (max-width: 1400px) {
    #desktop-nav {
        display: none;
    }
    #hamburger-nav {
        display: flex;
    }
    .about-containers {
        flex-wrap: wrap;
    }
    .img-text-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .side-pic {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
     .code-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media screen  and (max-width: 1200px) {
    #desktop-nav {
        display: none;
    }
    #hamburger-nav {
        display: flex;
    }

    section, .section-container {
        height: fit-content;
    }
    section {
        margin: 0 5%;
    }
    .section__pic-container {
        width: 275px;
        height: 275px;
        margin: 0 auto 2rem;
    }
    .about-containers {
        margin-top: 0;
    }

    footer {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; 
        text-align: center; 
    }
    
    footer nav {
        height: fit-content;
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    footer .nav-links-container {
        align-items: center;
        justify-content: center;
    }

    footer .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .img-text-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    
    .side-pic {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    #projects-nav-links {
        flex-direction: row;
    }

    
    .slider-text-container {
        flex-direction: column;
    }

    .code-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media screen and (max-width: 600px) {
    
    nav {
        padding: 0 1rem;
        max-width: 600px;
    }
    
    html, body {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
    #contact, footer {
        height: 40vh;
    }
    article {
        font-size: 1rem;
    }
    .about-containers, .contact-info-upper-container, .btn-container {
        flex-wrap: wrap;

    }
    .contact-info-container {
        margin: 0;
    }
    .contact-info-container p, .nav-links li a {
        font-size: 1rem;
    }
    .logo {
        font-size: 1.5rem;
    }


    footer {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; 
        text-align: center; 
    }
    
    footer nav {
        height: fit-content;
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .nav-links-container {
        align-items: center;
        justify-content: center;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
    }
    .section-container {
        flex-wrap: wrap;
    }

    .section__pic-container {
        width: auto;
        height: 60vw;
        justify-content: center;
    }

    .section__text__p2 {
        font-size: 1.5rem;
    }
    .title {
        font-size: 2rem;
    }
    .text-container {
        text-align: justify;
    }

    .img-text-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .side-pic {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    #projects-nav-links {
        flex-direction: row;
    }

    .slider-text-container {
        flex-direction: column;
    }

    .slide .slide-title, .zoomable-container .slide-title {
        font-size: 18px;
    }

    .slide .slide-description, .zoomable-container .slide-description {
        font-size: 14px;
    }

    .code-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 2rem;
    flex-wrap: wrap;
    box-sizing: border-box;
}

pre {
    width: 100%;
    max-width: 600px;
    overflow-x: auto;
    padding: 1em;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #1e1e1e;
    color: #f8f8f2;
    box-sizing: border-box;
}

.code-description {
    font-size: 1.2rem;
    max-width: 500px;
    width: 100%;
    height: auto;
    text-align: justify;
    box-sizing: border-box;
}
}  

@media screen and (min-width: 1600px) {
    body {
        max-width: 100%;
        margin: 0 auto;
        font-size: 18px;
    }

    section, .section-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2rem 3rem;
        height: fit-content;
    }

    #bg-video, #top, #home {
        max-width: 100%;
    }

    .about-containers {
       
        gap: 2rem;
        margin-top: 2rem;
    }

    .img-text-container {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 3rem;
    }

    .side-pic {
        width: 50%;
        max-width: 600px;
        height: auto;
    }

    .text-container {
        width: 70%;
        font-size: 1.1rem;
        align-self: center;
    }

    .section__pic-container {
        width: 350px;
        height: 350px;
    }

    .btn  {
        width: 200px;
        height: fit-content;
        font-size: 1rem;
    }
    
    .icon, .non-clickable-icon {
        height: 2.5rem;
    }
    .title {
        font-size: 2.8rem;
    }

    .section__text__p2 {
        font-size: 1.8rem;
    }

    .nav-links {
        gap: 2.5rem;
        font-size: 1.2rem;
    }

    #projects-nav-links {
        flex-direction: row;
        gap: 2rem;
    }

    .slider-text-container {
        flex-direction: row;
        gap: 2rem;
        align-items: center;
        justify-content: space-between;
    }

    .slide .slide-title, .zoomable-container .slide-title {
        font-size: 22px;
    }

    .slide .slide-description, .zoomable-container .slide-description {
        font-size: 16px;
    }

    footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 2rem 5%;
        text-align: left;
    }

    footer nav {
        flex-direction: row;
        margin-bottom: 0;
        gap: 2rem;
    }

    .nav-links-container {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .nav-links {
        flex-direction: row;
        padding: 0;
        margin: 0;
    }
}