@media screen and (max-width: 1400px) {

    #projects-display {
        margin-top: 130rem;
    }
    
}


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

    .introduction {
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        width: 100%;
        margin: 0;
    }

     /* case study, the largest text in the site */
     .pd-title {
        font-size: 36px;
    }

    /* the card project show */

    .card {
        width: 3rem;
    }

    input[name="slide"]:checked + label {
        width: 12rem;
    }


    #projects-display {
        margin-top: 160rem;
    }


}

@media screen and (max-width: 750px) {

    #projects-display {
        margin-top: 170rem;
    }
    
}

@media screen and (max-width: 600px) {

    body, html {
        margin: 0;
        padding: 0;
    }

    /* page tabs */

    .tabs li{
        font-size: 18px;
        margin-left: 0;
        margin-right: 0;
    }

    .tabs li.active {
        font-size: 24px;
    } 

    /* gap between bodylogical vs Project Archive */
    .tabs li:nth-child(1) {
        margin-right: 2rem;
    }
    
    .introduction {
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        width: 100%;
        margin: 0;
    }
    
    .introduction p {
        text-align: left;
        font-size: 14px;  
        margin: 0;
     }
     
     strong {
         color: black; /* Sets the text color inside <strong> tags to black */
         font-weight: 600;
     }

    .introduction img {
        width: 270px;
        height: 180px;
        margin-top: 1rem;
    }


    /* selected Project */

    #sample-project {
        display: flex;
        flex-wrap: wrap;
        justify-content:center;
        align-items:center;
        margin: 0 5rem 0 5rem;
        margin-top: 3rem;
    }

    .text-desc-section {
        width: 70vw;
    }
    /* project desc */

    .text-desc-section .desc {
        text-align: justify;
        width: 70vw;
        font-size:16px;
        margin-bottom: 0.5rem;
    }

    /* case study, the largest text in the site */
    .pd-title {
        font-size: 36px;
    }

    /* the card project show */

    .card {
        width: 1rem;
    }

    input[name="slide"]:checked + label {
        width: 8rem;
    }



    #projects-display {
        margin-top: 230rem;
    }

    /* go to section */
    #go-to a{
        font-size: 18px;
    }

    /* footer section */

    #link-footer {
        min-height: 46vh;
    }



    /* email & social ICONS 

    #social-container {
        gap: 0.5rem;
    
        margin not working here
        margin-left: 2rem;
        margin-right: 2rem; 
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .contact-info-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.1rem;
        margin: 0 0.1rem;
    }

    .contact-info-container img {
        height: 1.5rem;

    }

    .contact-info-container a{
        font-size: 14px;
    }

    .disclaimer p{
        font-size: 8px;
        width: 80%;
        margin: 1rem auto;
    }

    .copyright p{
        font-size: 12px;
    }
        */
    
}