@media only screen and (max-width: 620px){
    .content{
        top: 50%;
        left: 5%;
        right: 5%;
     }
}
@media only screen and (max-width: 440px){
    .content{
        top: 45%;
        }
        .footer h4{
            display: none;
         }
}
@media only screen and (max-width: 420px){
    .content{
        top: 40%;
        }
        .footer h4{
            display: none;
         }
}
@media only screen and (max-width: 335px){
    .content{
        top: 30%;
        }
        .footer h4{
            display: none;
         }
}
@media only screen and (max-width: 320px){
    .content{
        top: 27.5%;
        }
        .footer h4{
            display: none;
         }
}
@media only screen and (max-width: 280px){
    .content{
        top: 22.5%;
        }
        .footer h4{
            display: none;
         }
}
@media only screen and (max-width: 245px){
    .content{
        top: 14%;
        }
        .footer h4{
            display: none;
         }
}
@media only screen and (max-width: 600px) {
    body {
      background: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)), url(img/jaroslav600.jpg);
      background-repeat:                            no-repeat;
      background-size:                                  cover;
      background-position:                             center;    
      height:                                                          100vh;   
  }
  }
  @media only screen and (max-width: 390px) {
    body {
        background: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)), url(img/jaroslav390.jpg);
        background-repeat:                            no-repeat;
        background-size:                                  cover;
        background-position:                             center;    
        height:                                                          100vh;   
    }
  }
  @media only screen and (max-height: 451px){
    nav {
        padding: 0.5% 8%;
    }
    .content{
        top: 50%;
        }
    .content h1{
        font-size: 22px;
    }
    .content p{
        font-size: 10px;
        max-width: 475px;
        letter-spacing: 2.0px;  
        word-spacing: 1.0px;  
        line-height: 14px;
    }   
    h4{
        font-size: 1px;
    }
    .footer h4{
        display: none;
        /*bottom: 0.5%;*/
     }
}
@media only screen and (max-height: 376px){
    nav {
        padding: 0.5% 8%;
    }
    .content{
        top: 50%;
        max-width: 350px;
        }
    .content h1{
        font-size: 22px;
    }
    .content p{
        font-size: 8px;
        letter-spacing: 1.5px;  
        word-spacing: 0.5px;
        line-height: 12px;  
    }   
    h4{
        font-size: 10px;
    }
    .footer h4{
        display: none;
        /*bottom: 0.5%;*/
     }
}
@media only screen and (max-height: 285px){
   
    nav ul li a{
        font-size: 12px;
    }
    .content{
        top: 50%;
        }
    .content h1{
        font-size: 18px;
    }
    .content p{
        font-size: 6px;
        max-width: 275px;
        line-height: 10px;
        letter-spacing: 1.0px;  
        word-spacing: none;
    }   
    h4{
        font-size: 10px;
    }
    .footer h4{
        display: none;
       /* bottom: 0.5%;*/
     }
}