@media screen and (max-width: 580px) {
    
   
    
    
    h1{
        
        font-size: 20px;
    }
    
    .container {
        
        position: relative;
        left: -30px;
        text-align: center;
        
    }
    
    #nameOf {
        
        height: 10px;
        width: 100px;
        position: absolute;
        top: 5px;
    }
    
    .rp {
        
       margin-left: 30px;
     
    }
    
    #buttons {
        
        position: relative;
        left: 40px;
    }
    
    
    .navButtons {
        
        display: none;
    }
    
    #hamBurger {
        
        display: block;
        position: absolute;
        right: 10px;
        top: 40px;
        font-size: 30px;
        color: white;
    }
    
    li {
        
        display: block;
        position: relative;
        top: 40px;
        
    }

    .project {

        position: absolute;
        display: flex;
        width: 100%;
        height: 300px;
        flex-wrap: wrap;
        justify-content: center;
        align-content:center
        top: 50px;
        left: 40px;
    }

    #projectHeader {

        position: relative;
        text-align: center;
        left: 45px;
        
    }

   

   
}

@media screen and (min-width: 600px) {

    #navBtns {

        display: block;

    }
    
}