/* above 1400px  */
@media (min-width: 1400px){
    main{
        width: 70%;
    }
    .icon{
        width: 40px;
    }
    .btn{
        font-size: 1.2rem;
        padding: 10px 15px;
    }
    /* Nav */
    .nav-logo img{
        width: 200px;
    }
    .nav-item{
        margin: 0 20px;
    }
    .nav-item a{
        font-size: 1.7rem;
    }
    .icon-mode{
        width: 33px;
    }
    /* Home */
    .home-intro-name{
        font-size: 3rem;
    }
    .home-intro-job{
        font-size: 1.8rem;
    }
    .home-about-text{
        font-size: 1.3rem;
    }
    /* About Me */
    .about-title p{
        font-size: 1.6rem;
    }
    .about-title h1{
        font-size: 3rem;
    }
    .about-content-img{
        width: 20vw;
    }
    .about-content-me-experience p,
    .about-content-me-education p{
        font-size: 1.2rem;
    }
    .about-content-me-experience-title,
    .about-content-me-education-title{
        font-size: 1.7rem;
    }
    .about-content-me-text{
        font-size: 1.3rem;
    }
    .navigation-arrow img{
        width: 23px;
    }
    /* Skills */
    .icon-skill{
        width: 30px;
    }
    .skills-title p{
        font-size: 1.6rem;
    }
    .skills-title h1{
        font-size: 3rem;
    }
    .skills-content-frontend-title,
    .skills-content-others-title{
        font-size: 1.6rem;
    }
    .skills-content-frontend-skill h4,
    .skills-content-others-skill h4{
        font-size: 1.3rem;
    }
    /* Projects */
    .projects-title p{
        font-size: 1.6rem;
    }
    .projects-title h1{
        font-size: 3rem;
    }
    .btn-card{
        font-size: 1.2rem;
        font-weight: bold;
    }
    .projects-card-text h3{
        font-size: 1.5rem;
    }
    /* Contact Me */
    .contact-title p{
        font-size: 1.6rem;
    }
    .contact-title h1{
        font-size: 3rem;
    }
    .contact-list-content-link{
        font-size: 1.2rem;
    }
}


/* above 1280px */
@media (min-width: 1280px){
    .icon{
        width: 30px;
    }
    .btn{
        font-size: 1.1rem;
    }
    /* Nav */
    .nav-logo img{
        width: 180px;
    }
    .nav-item{
        margin: 0 15px;
    }
    .nav-item a{
        font-size: 1.4rem;
    }
    .icon-mode{
        width: 28px;
    }
    /* Home */
    .home-intro-name{
        font-size: 2.7rem;
    }
    .home-intro-job{
        font-size: 1.5rem;
    }
    .home-about-text{
        font-size: 1vw;
    }
    .home-img{
        width: 25vw;
    }
    /* About Me */
    .about-title p{
        font-size: 1.2rem;
    }
    .about-title h1{
        font-size: 2.8rem;
    }
    .about-content-img{
        width: 22vw;
    }
    .about-content-me-experience p,
    .about-content-me-education p{
        font-size: 1.1rem;
    }
    .about-content-me-experience-title,
    .about-content-me-education-title{
        font-size: 1.5rem;
    }
    .about-content-me-text{
        font-size: 1.2rem;
    }
    .navigation-arrow img{
        width: 23px;
    }
    /* Skills */
    .icon-skill{
        width: 25px;
    }
    .skills-title p{
        font-size: 1.2rem;
    }
    .skills-title h1{
        font-size: 2.8rem;
    }
    .skills-content-frontend-title,
    .skills-content-others-title{
        font-size: 1.5rem;
    }
    .skills-content-frontend-skill h4,
    .skills-content-others-skill h4{
        font-size: 1.3rem;
    }
    /* Projects */
    .projects-title p{
        font-size: 1.2rem;
    }
    .projects-title h1{
        font-size: 2.8rem;
    }
    .btn-card{
        font-size: 1.1rem;
        font-weight: bold;
    }
    .projects-card-text h3{
        font-size: 1.4rem;
    }
    /* Contact Me */
    .contact-title p{
        font-size: 1.2rem;
    }
    .contact-title h1{
        font-size: 2.8rem;
    }
    .contact-list-content-link{
        font-size: 1.1rem;
    }
}


/* above 1200px */
@media (min-width: 1200px){
    /* Home */
    .home-intro-name{
        font-size: 2.75rem;
    }
    .home-intro-job{
        font-size: 1.6rem;
    }
    .home-about-text{
        font-size: 1.6vw;
    }
    .btn{
        padding: 10px 13px;
    }
    /* About Me */
    .about-title p{
        font-size: 1.3rem;
    }
    .about-title h1{
        font-size: 2.4rem;
    }
    .about-content-me-experience p,
    .about-content-me-education p{
        font-size: 1.15rem;
    }
    .about-content-me-experience-title,
    .about-content-me-education-title{
        font-size: 1.4rem;
    }
    .about-content-me-text{
        font-size: 1.2rem;
    }
    /* Skills */
    .icon-skill{
        width: 25px;
    }
    .skills-title p{
        font-size: 1.3rem;
    }
    .skills-title h1{
        font-size: 2.4rem;
    }
    .skills-content-frontend-title,
    .skills-content-others-title{
        font-size: 1.5rem;
    }
    .skills-content-frontend-skill h4,
    .skills-content-others-skill h4{
        font-size: 1.2rem;
    }
    /* Projects */
    .projects-title p{
        font-size: 1.3rem;
    }
    .projects-title h1{
        font-size: 2.4rem;
    }
    .btn-card{
        font-size: 1rem;
        font-weight: bold;
    }
    .projects-card-text h3{
        font-size: 1.4rem;
    }
    /* Contact Me */
    .contact-title p{
        font-size: 1.3rem;
    }
    .contact-title h1{
        font-size: 2.4rem;
    }
    .contact-list-content-link{
        font-size: 1.08rem;
    }
}


/* under 1060 */
@media (max-width: 1050px){
    .projects-card-text h3{
        font-size: 1.1rem;
    }
}


/* under 980px */
@media (max-width: 980px){
    .home-intro-name{
        font-size: 2.1rem;
    }
    .projects-card-text h3{
        font-size: 1rem;
    }
    .projects-card-text .btn-card{
        font-size: .9rem;
    }
}


/* under 920px */
@media (max-width: 920px){
    main{
        width: 90%;
    }
    /* Nav */
    .nav-logo img{
        width: 130px;
    }
    .nav-item{
        margin: 0 10px;
    }
    .nav-item a{
        font-size: 1.2rem;
    }
    /* Home */
    .home-img{
        width: 250px;
    }
    /* projects */
    .projects-cards{
        grid-template-columns: repeat(2 , 1fr);
        gap: 20px 10px;
    }
    .projects-card-text h3{
        font-size: 1.2rem;
    }
    .projects-card-text .btn-card{
        font-size: 1rem;
    }
    /* Arrow */
    .navigation-arrow{
        display: none;
    }
    .last-nav-arrow{
        display: block;
    }
    .last-nav-arrow img{
        width: 17px;
    }
}


/* under 800px */
@media (max-width: 800px){
    /* Navbar */
    .responsive{
        display: block;
    }
    .nav-list{
        display: none;
    }
    .closing-nav{
        width: 100%;
        height: 100%;
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1023;
    }
    .nav-list-res{
        width: 30%;
        min-height: 100vh;
        position: fixed;
        right: -100%;
        top: 0;
        padding-top: 1rem;
        background-color: var(--nav-color);
        display: grid;
        grid-auto-rows: min-content;
        row-gap: 1rem;
        z-index: 1024;
        box-shadow: 0 0 5px gray;
        transition: .3s;
    }
    .nav-item a{
        display: block;
    }
    .icon-close{
        width: 20px;
        margin-bottom: 10px;
    }
    /* About */
    .about-content-me-experience,
    .about-content-me-education{
        padding: 10px 0;
    }
    .about-content-img{
        margin-right: 1rem;
    }
    .about-content-img img{
        border-radius: 5px;
    }
}


/* under 730px */
@media (max-width: 730px){
    .btn{
        font-size: .9rem;
        padding: 5px 7px;
    }
    .icon{
        width: 23px;
    }
    .icon-menu{
        width: 30px;
    }
    .icon-close{
        width: 20px;
    }
    /* Navbar */
    .nav-logo img{
        width: 100px;
    }
    .nav-list-res{
        width: 40%;
    }
    /* Home */
    .home-intro-name{
        font-size: 1.7rem;
    }
    .home-intro-job{
        font-size: 1.1rem;
    }
    .home-img{
        width: 200px;
        position: relative;
    }
    /* About */
    .about{
        margin-top: 4rem;
    }
    .about-content{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .about-content-me{
        display: flex;
        flex-direction: column;
    }
    .about-content-img img{
        height: 100%;
        object-fit: cover;
    }
    .about-content-me-education{
        margin-left: 0;
    }
}


/* under 640px */
@media (max-width: 640px){
    /* Home */
    .home-intro-name{
        font-size: 1.6rem;
    }
    .home-intro-job{
        font-size: 1.1rem;
    }
    .about-content{
        margin: 2rem;
        grid-template-columns: 1fr;
    }
    .about-content-img{
        margin-right: 0;
        margin-bottom: 2rem;
    }
    /* skills */
    .skills-content{
        flex-direction: column;
    }
    .skills-content-others{
        margin-left: 0;
        margin-top: 1rem;
    }
}


/* under 600px */
@media (max-width: 600px){
    main{
        width: 100%;
        padding: 0 1rem;
    }
    .home-about-text{
        font-size: .8rem;
    }
    .projects-cards{
        grid-template-columns: 1fr;
        gap: 20px 10px;
    }
    .project-four{
        grid-column: auto/auto;
    }
}


/* under 550px */
@media (max-width: 550px){
    #nav{
        margin-top: 2vh;
    }
    .home{
        height: 80vh;
        margin-top: 2vh;
        flex-direction: column;
    }
    .home-text{
        order: 1;
        text-align: center;
    }
    .home-contact{
        margin-top: 2vh;
        position: relative;
    }
    .about-content{
        margin: 0;
    }
}


/* under 480px */
@media (max-width: 480px){
    .im{
        display: block;
        font-size: 1.2rem;
    }
    .break-line{
        display: none;
    }
    .nav-list-res{
        width: 50%;
    }
    .about{
        padding-top: 2rem;
    }
    .about-content-me{
        gap: 0;
    }
    .about-content-me-experience,
    .about-content-me-education{
        margin-bottom: 1rem;
    }
    .skills-content{
        display: grid;
    }
}


/* under 300px */
@media (max-width: 300px){
    .nav-logo img{
        width: 70px;
    }
    .icon{
        width: 23px;
    }
    .icon-menu{
        width: 23px;
    }
    .icon-close{
        width: 17px;
    }
    .home-intro-name{
        font-size: 1.45rem;
    }
    .home-intro-job{
        font-size: 1.05rem;
    }
    .nav-item a{
        font-size: 1rem;
    }
    .about-title p{
        font-size: .9rem;
    }
    .about-title h1{
        font-size: 1.7rem;
    }
    .about-content-me-text{
        font-size: .9rem;
    }
    .about-content{
        margin: 0;
    }
    .skills-title p{
        font-size: .9rem;
    }
    .skills-title h1{
        font-size: 1.7rem;
    }
    .skills-content h4{
        font-size: .9rem;
    }
    .projects-title p{
        font-size: .9rem;
    }
    .projects-title h1{
        font-size: 1.7rem;
    }
    .projects-card h3{
        font-size: 1.1rem;
    }
    .btn-card{
        font-size: .9rem;
        font-weight: 600;
        padding: 5px 7px;
        
    }
    .contact-title p{
        font-size: .9rem;
    }
    .contact-title h1{
        font-size: 1.7rem;
    }
    .contact-list-content-link{
        font-size: .8rem;
    }
    .icon-contact{
        width: 20px;
    }
}



/* Height */
@media (max-height: 550px){
    .home{
        max-height: 100vh;
        margin-bottom: 130px;
    }
    .navigation-arrow{
        display: none;
    }
}
@media (max-height: 480px){
    .home{
        margin-bottom: 190px;
    }
}
@media (max-height: 400px){
    .home{
        margin-bottom: 250px;
    }
}
@media (max-height: 320px){
    .home{
        margin-bottom: 300px;
    }
}