@media (min-width: 420px) and (max-width: 500px){
    #hero-container{
        width: 95%;
    }
    
    #hero-box-text{
        left: 0;
        width: 60%;
    }
    
    #box-hero-name>h1{
        font-size: 8rem;
    }
    
    #hero-img{
        height: 48vh;
        right: -10vw;
    }
    
    #box-hero-webdeveloper{
        font-size: 3.5rem;
    }
    
    .section-title{
        font-size: 5rem;
    }    
}

@media (min-width: 0px) and (max-width: 419px){
    #hero-container{
        width: 95%;
    }
    
    #hero-box-text{
        left: 0;
        width: 50%;
    }
    
    #box-hero-name>h1{
        font-size: 7rem;
    }
    
    #hero-img{
        height: 48vh;
        right: -10vw;
    }
    
    #box-hero-webdeveloper{
        font-size: 2rem;
        bottom: 2rem;
    }
    
    .section-title{
        font-size: 4rem;
    }    
}

@media (min-width: 0px) and (max-width: 500px){
    section{
        width: 100% !important;
    }

    #whosme-content{
        flex-direction: column;
    }

    #whosme-content>div{
        width: 100%;
    }

    #whosme-boxes{
        flex-direction: column;
        gap: 10vh;
    }

}