@media only screen and (min-width: 48em) {
    
    #mobile {display: none;}
    #medium {display: inline-flex;}

    header {
        padding: 20% 36px;
        gap: 48px;
    }
    
    #title-shadow {
        font-size: 40px;
        left: 51px;
        top: 55px;
    }

    #title-header {height: 150px;}
    .title-text {font-size: 40px;}
    #subtitle {font-size: 20px;}

    #fom {padding-bottom: 80px;}
    #fom-text{font-size: 24px;}
    #arrow {width: 28px; height: 28px;}

    #experiments, #skills, #about {padding: 80px 36px;}
    .common-text{font-size: 18px;}
    #about-title, #skills-title, #exp-title{font-size: 36px;}
    
    #exp-container{padding: 90px 16px;}
    #exp-container , footer {
        flex-direction: row;
        justify-content: space-between;
    }
    .exp-section{width: 100%;}

}

@media only screen and (min-width: 64em) {

    #medium {padding: 2% 4%;}

    header {padding: 12.5% 36px;}

    #about-and-study {flex-direction: row;}
    #about, #study{width: 50%;}
    #study{padding: 64px 36px; padding-top: 180px;}

    footer {padding: 40px 54px;}
}