@media screen and (max-width: 1200px) {
    html {
        font-size: 55%;
    }
}

@media screen and (max-width: 992px) {
    html {
        font-size: 50%;
    }

    header {
        padding: 2rem 4%;
    }

    section {
        padding: 10rem 4% 2rem;
    }

    .contact-box .field-box {
        grid-template-columns: 1fr;
    }
}


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

    #menu-icon {
        display: block;
    }
    section.active {
        overflow: auto;
    }
    nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100vh;
        padding: 1rem 0;
        background: var(--bg-color);
        border-top: .1rem solid rgba(0, 0, 0, .2);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
        text-align: center;
        display: none;
    }

    nav.active {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    nav a {
        font-size: 3rem;
        display: block;
        margin: 4rem 0;
    }

    .home {
        flex-direction: column;
        justify-content: center;
        justify-content: space-around;
        gap: 3rem;
        text-shadow: none;
    }

    .home-img .img-box {
        width: 40rem;
        height: 40rem;
    }


    .resume-container,
    .portfolio-container,
    .contact-container {
        grid-template-columns: 1fr;
    }

    .resume-container {
        gap: 3rem;
    }

    .resume-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .resume-box .resume-btn {
        width: 75%;
        font-size: 2rem;
    }

    .portfolio-container .portfolio-box:first-child {
        order: 1;
    }

    .portfolio-box .live-github {
        margin-bottom: 3rem;
    }

    .contact-box .field-box {
        grid-template-columns: 1fr 1fr;
    }

    .color-circle {
        width: 25px;
        height: 25px;
    }
}

@media screen and (max-width: 600px) {
    .color-circle {
        width: 18px;
        height: 18px;
    }

    .home-img .img-box {
        width: 33rem;
        height: 33rem;
    }

    .contact-box .field-box {
        grid-template-columns: 1fr;
    }
}

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

    h2.text-typing,
    .typing {
        font-size: 2.4rem;
    }
}


@media screen and (max-width:400px) {
    .resume-list {
        height: auto;
    }

    .home-detail,
    .resume-box h2,
    .resume-box .heading,
    .resume-box .desc,
    .resume-detail.about .resume-item {
        text-align: center;
    }
    .home-detail p{
        color: var(--primary-color);
    }
    .resume-detail.skills .resume-item {
        color: var(--primary-color);
        box-shadow: inset 0 0 2rem var(--primary-color);
        border: .3rem solid var(--primary-color);
    }

    .resume-detail.skills .resume-item span {
        opacity: 1;
    }

    .resume-detail.about .resume-item {
        border: .2rem solid var(--primary-color);
    }

    .resume-detail.education .resume-item,
    .resume-detail.experience .resume-item {
        border: .2rem solid var(--primary-color);
    }

    h2.text-typing,
    .typing {
        font-size: 2.4rem;
    }

    .home-detail .btn-sci {
        flex-direction: column-reverse;
        gap: 1rem;
        margin-top: 0;
    }

    .home-detail .btn-sci .sci {
        margin-bottom: 2rem;
        gap: 4rem;
    }

    .home-detail .btn-sci .sci a {
        font-size: 3.4rem;
    }

    .home-detail .btn-sci .btn {
        font-size: 1.8rem;
    }

    .contact-box form {
        padding: 2.5rem 3rem 3.5rem;
    }

    .contact-box h2 {
        padding: 1.5rem;
    }

    .text-typing-2.desc {
        font-size: 2.2rem;
    }

    .home-img {
        flex-direction: column;
    }

    .color-picker {
        margin-top: 2rem;
        flex-direction: row;
        margin-bottom: 0;
    }

    .portfolio-box .live-github a {
        color: var(--primary-color);
        border: .3rem solid var(--primary-color);
        box-shadow: 0 0 1rem var(--primary-color);
        margin-right: 2.4rem;
    }
}