/* TABLET - IPAD PRO */
@media only screen and (max-width: 1024px){
    .logo-container{
        width: 20%;
    }
    
    .links-container{
        width: 80%;
    }
    
    .abouttext{
        width: 100%;
        text-align: center;
    }

    #container3d{
        opacity: 0.5;
        width: 50%;
    }

    .project-des{
        padding: 10%;
    }
    
}


/* MOBILE */
@media only screen and (max-width: 500px){

    /* NAV */
    .homenavli {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgb(0, 0, 0, 0.8);
        padding: 15%;
        border-radius: 5px;
        z-index: -2;
        font-size: 1em;
        line-height: 2em;
    }

    .homenavli.show {
        display: flex;
    }

    .menu-toggle {
        display: flex;
    }

    /* HOME */
    .textframe{
        right: 0%;
    }

    .textframe .iam{
        left: -35%;
    }

    .textframe .yn{
        left: 0;
    }

    .textframe span{
        padding-left: 5%;
    }
    
    .textframe h1{
        font-size: 12vw;
        line-height: 1.5em;
    }

    .back-circle{
        width: 80vw;
        height: 80vw;
        right: -20%;
    }

    #scroll{
        font-size: 2.5vw;
        left: 40%;
    }
    
    
    /* WORK */
    .project-grp{
        flex-wrap: wrap;
    }

    .project{
        padding: 5% 0;
    }

    .project-img{
        width: 50vw;
        height: 50vw;
    }

    .project-des{
        overflow: hidden;
        padding: 5%;
    }

    .project-des p, h3{
        font-size: 0.8em;
    }

    .hide {
        display: none;
    }

    #contact{
        flex-wrap: wrap;
    }
    
    .textbox, .formbox{
        width: 100%;
    }

    
}