/*** TABLET ***/
@media (max-width: 1024px) {
    :root {
        --header-height: 100px;
    }

    /* Header */

    header .menu-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100px;
        right: 0;
        padding: 0;
        gap: 1rem;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
        text-align: right;
        max-height: 0;
        width: 0;
        overflow: hidden;
        transition: all 1s ease;
    }

    header .menu-links.open {
        display: flex;
        max-height: 300px;
        padding: 1.5rem;
        background-color: var(--mobile-menu-bg);
        width: 180px;
    }

    .burger-icon {
        display: inline-block !important;
    }

    header .logo {
        width: 75px;
    }

    #logo-without-brand {
        display: flex;
    }

    #logo {
        display: none;
    }

    /* Hero */
    #profile .content-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

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

    /* About */
    #about .section-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* .swiper-projects .swiper-slide {
        min-height: auto;
    } */
}

/*** MOBILE ***/
@media (max-width: 767px) {
    :root {
        --h1-font-size: 2rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.2rem;
        --text-font-size: 0.9rem;
        --button-font-size: 0.75rem;
        --nav-font-size: 1.5rem;
        --site-gutter: 1rem;
        --footer-nav-size: 1rem;
        --projects-font-size: 12px;
    }

    header .menu-links.open {
        width: 140px;
    }

    .title:not(h1) {
        margin-bottom: 1.5rem;
    }

    .details-container--about .icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .about-containers {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .details-container--about {
        width: 100%;
    }

    .details-container--about:first-of-type {
        order: 3;
    }

    .education-content {
        text-align: left;
    }

    /* Footer */
    footer .menu-links {
        flex-direction: column;
        gap: 0.75rem;
        font-size: smaller;
    }

    .job-article--skills>div {
        flex-basis: 32% !important;
        justify-content: center;
        opacity: 0.5;
        transition: opacity 0.5s ease;
    }

    .job-article--skills {
        gap: 1.5rem 2% !important;
    }

    .focus {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }

    .category img {
        width: 2.5rem;
        height: auto;
    }

    .skill-icon {
        width: 2rem;
        height: auto;
    }

    .skill-icon[alt="Oracle SQL icon"] {
        width: 3.5rem;
        height: auto;
        padding-block: calc((2rem - 8.6834px) / 2) !important;
    }

    .skill-item {
        flex-basis: 32%;
    }

    #skills-display {
        flex-wrap: wrap;
        gap: 1.5rem 1% !important;
    }

    .skills {
        height: 270px;
    }

    .swiper {
        width: 90vw;
        height: 215px;
    }

    .swiper-slide p {
        font-size: 0.9rem;
    }

    .nav-con {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        gap: 5rem;
        padding-top: 3rem;
        margin-inline: auto;
    }

    .typed-cursor {
        font-size: 1.5rem;
    }

    #projects .swiper-outer {
        max-width: 350px;
    }

    #projects .nav-con {
        padding: 0;
    }
    .prev-proj, .next-proj, .prev-a, .next-a {
        width: 3rem;
        height: 3rem;
    }
    #projects .swiper-slide-next {
        opacity: 0.5;
    }

    /* Credits */ 
    .credits-section {
        gap: 2rem;
        align-items: start;
        text-align: left;
    }
}

/** CUSTOM **/
@media (max-width: 600px) {
    .contact-info-upper-container {
        padding: 1rem;
        width: min-content;
    }
}

@media (max-width: 542px) {
    #skills-display--title {
        align-content: end;
    }
    .skills {
        height: 290px;
    }
}

@media (max-width: 400px) {
    .contact-info-container p {
        font-size: smaller;
    }
}

@media (max-width: 344px) {
    #current-skill {
        height: 54px;
    }
}

@media (max-width: 900px) {
    .job-article--skills>div {
        flex-basis: 40%;
        justify-content: center;
        opacity: 0.5;
        transition: opacity 0.5s ease;
    }

    .job-title {
        font-size: 1rem;
        font-weight: 900;
    }

    .company {
        font-size: 0.75rem;
    }
}

@media (max-width: 450px) {
    .category {
        flex-basis: 33%;
    }

    #categories {
        flex-wrap: wrap;
        gap: 1.5rem 0 !important;
    }

    .skills {
        height: 360px;
    }
    .swiper {
        height: 235px;
    }
}