@import url('index.css');


#profT{
    display:none;
}

#hamburger-button{
    display:none;
}

#kdMobile{
    display:none;
}

/** LANDSCAPE **/


@media (orientation:landscape) and (max-width: 1748px){
    #linesV{
        display:none;
    }
    
    #cloud{
        display:none;
    }
}

@media (orientation:landscape) and (max-width: 1298px){
    #profD{
        display:none;
    }
    
    #profT{
        display:flex;
        bottom:0;
    }
    
    #linesH{
        left:0
    }
    
    #descContainer{
        display:flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    
}





/** PORTRAIT **/

@media (orientation:portrait) and (max-width: 1080px){
    #linesV{
        display:none;
    }
    #cloud{
        display:none;
    }
    #about{
        flex-direction: column;
    }
    #profD{
        display:none;
    }
    #profT{
        display:flex;
        bottom:0;
    }

    #linesH{
        left:0;
    }

    #about{
        justify-content: flex-start;
    }
}

@media (orientation:portrait) and (max-width:986px){
    .description{
        font-size:20px;
        width:50rem;
        text-align: center;
    }
    #descContainer{
        display:flex;
        flex-direction: column;
        align-items: center;
    }

    .nab h2 {
        font-size:96px;
    }
    .experienceHeader p {
        font-size:40px;
    }

    .eduTitle{
        font-size:40px
    }
    #navD div a{
        font-size: 25px;
    }
}

@media (orientation: portrait) and (max-width:810px){
   #navD div {
        flex-direction: column;
        background:#262627;
        padding-top:5rem;
        justify-content: flex-start;
        gap:10px;
        top:0;
        right:-100%;
        height: 100%;
        position:fixed;
        transition:right 0.4s ease-in-out;
   }

   #hamburger-button{
    display:flex;
    z-index: 2;
   }

   #navD{
    display:flex;
    justify-content: space-between;
    align-items: center;
   }

   #kdMobile{
    display:flex;
   }


    .about-containerR h2{
        font-size:30px;
    }

    .description{
        font-size:16px;
        width:30rem;
    }
}

@media (orientation: portrait) and (max-width:740px){
    
    .nab h2{
        font-size:72px;
    }

    .about-containerR h2{
        font-size:20px;
    }
}
@media (orientation: portrait) and (max-width:652px){
    .eduTitle{
        font-size:30px;
    }
    .skills-icon{
        max-width: 50px;
        max-height:50px;
    }
}

@media (orientation: portrait) and (max-width:552px){
    .nab h2{
        font-size:50px;
    }

    h1{
        font-size: 100px;
    }

    #linesH{
        top:4rem;
    }

    #circle{
        width:10px;
        height:10px;
    }
}

@media (orientation: portrait) and (max-width:494px){
    .experienceHeader p{
        font-size:20px;
    }

    .subtitle{
        font-size:20px;
    }

    .experienceHeader{
        align-items: center;
    }

    ul li{
        font-size:15px;
    }
    .eduTitle{
        font-size:20px;
    }
    .year{
        font-size:20px;
    }
    .eduSubtitle{
        font-size: 15px;
    }
    .eduSubtitleTwo{
        font-size: 15px;
    }
    .description{
        width:20rem;
    }
    .about-containerR h2{
        font-size: 15px;
    }

    h1{
        font-size: 64px;
    }

    #linesH{
        top:5.5rem;
        height:100px;
    }
}

@media (orientation:portrait) and (max-width:394px){

    .about-containerR h2{
        font-size:14px;
    }

    .description{
        font-size: 14px;
    }

    .eduTitle{
        font-size: 14px;
    }

    .eduSubtitle{
        font-size: 13px;
    }

    .eduSubtitleTwo{
        font-size: 13px;
    }

    .year{
        font-size: 13px;
    }

    .nab h2{
        font-size:40px;
    }

    #certifications img{
        max-width: 200px;
        max-height: 200px;
    }

    .skills-icon{
        max-width: 50px;
        max-height: 50px;
    }
}

@media (orientation:portrait) and (max-width:384px){
    .skills-icon{
        max-width: 30px;
        max-height: 30px;
    }
}
@media (orientation:portrait) and (max-width:374px){
    .about-containerR h2{
        font-size: 13px;
    }

    .description{
        font-size: 13px;
    }

    #profile{
        max-width: 302px;
        max-height: 302px;
    }
}
@media (orientation:portrait) and (max-width:328px){
    .about-containerR h2{
        font-size: 11px;
    }

    .description{
        font-size: 13px;
        width: 15rem;
    }

    #profile{
        max-width: 252px;
        max-height: 252px;
    }

    .educationHeader{
        padding-left: 0;
    }

    .experienceHeader p{
        font-size: 15px;
    }

    .subtitle{
        font-size:13px;
        position:relative;
        bottom:20px;
    }
}