/* Navigation */
@media (max-width: 45rem){
    .primary-navigation{
        gap:2em;
        position: fixed;
        z-index:1000;
        inset: 0 0 0 30%;
        flex-direction: column;
        padding: min(30vh, 10rem) 2em;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    .primary-navigation[data-visible="true"]{
        transform: translateX(0%);
    }

    .mobile-nav-toggle{
        display: block;
        position: absolute;
        z-index: 9999;
        background-color: transparent;
        background-image: url("C:/Users/Sascha/OneDrive/Desktop/Projects/portfolio-sascha/images/navigation/hamburger-menu-icon.webp");
        background-repeat: no-repeat;
        width:1rem;
        border: 0;
        aspect-ratio: 1;
        top:3.5rem;
        right: 2rem;
    }

    .mobie-nav-toggle[aria-expanded="true"]{
        background-image: url("C:/Users/Sascha/OneDrive/Desktop/Projects/portfolio-sascha/images/navigation/cross-nav.png");
    }
    
}

@media (min-width: 45rem) and (max-width: 55rem){
    .primary-navigation a > span[aria-hidden]{
        display: none;
    }
}

@media (min-width: 45rem){
    .primary-navigation{
        gap: clamp(1.5rem, 5vw, 3rem);
        padding-block: 2rem;
        padding-inline: clamp(3rem, 8vw, 10rem);
    }
}


/* Main & section */
@media screen and (min-width:450px){
    .disappear{
        display: inline;
    }

    #landing-section h1{
        font-size: 2rem;
    }

    #landing-section p{
        font-size: 1.5rem;
    }

    h2{
        font-size: 1.5rem;
    }

    p{
        font-size: 1rem;
    }

    li{
        font-size: 1rem;
    }

    #about-me img{
        width:250px;
        height: 250px;
    }
}

@media screen and (min-width:600px){    
    main{
        margin-right: 5rem;
        margin-left: 5rem;
        padding: 1rem;
    }
}

@media screen and (min-width:1020px){
    .disappear{
        display: inline;
    }

    #landing-section h1{
        font-size: 3rem;
    }

    #landing-section p{
        font-size: 2rem;
    }

    #landing-section button{
        font-size: 1.5rem;
    }

    h2{
        font-size: 2rem;
    }

    p{
        font-size: 1.2rem;
    }

    li{
        font-size: 1.2rem;
    }
    
}

@media screen and (min-width:1300px){
    .disappear{
        display: inline;
    }

    #landing-section h1{
        font-size: 4rem;
    }

    #landing-section p{
        font-size: 3rem;
    }

    #landing-section button{
        font-size: 2rem;
    }

    h2{
        font-size: 3rem;
    }

    p{
        font-size: 1.8rem;
    }

    li{
        font-size: 1.8rem;
    }

    form{
        max-width: 800px;
    }
}


/* Project section */
@media screen and (max-width:950px) {
    .project-box{
        width:80%;
    }
}

/* Button */
@media (min-width: 768px) {
    button {
        padding: 10px 30px;
    }
}