body {
    font-family: Roboto, Helvetica, sans-serif, 'Raleway', sans-serif, Arial;

    background: url("/wp-content/uploads/2020/10/david-bruyndonckx-F_hft1Wiyj8-unsplash-scaled.jpg") center no-repeat 
}
    

.container {
    margin: auto;
    width: 1100px;
}

@media screen and (max-width: 479px) {
    .container {width: 92%}  
    } 

    /*obecný responsiv viz classroom 18.6, musí se pak zkoušet nastavení*/
                           /*mobil na výšku*/
    @media screen and (min-width: 480px) {
    .container {width: 95%} /*mobil na šířku*/
    }
    @media screen and (min-width: 740px) { /*tablet na výšku*/
    .container {width: 95%}
    }
    @media screen and (min-width: 960px) { /*tablet*/
    .container {width: 95%}
    }
    @media screen and (min-width: 1200px) { /*pc*/
    .container {width: 1100px}  /*viz výše*/
    }



h1,h2,h3,h4,p,ul,ol,li,body {
    margin: 0;
    padding: 0;
    } /*reset nastavení nápisů návod od Kuby v classroom 14.6*/

    .clearfix:after, .clearfix:before {
    content: "";
    display: block;
    clear: both; /*zafixovat float prvky v html*/
    }
    *, *:after, *:before {
    box-sizing: border-box;
    }
    a {
    transition: all 0.3s ease-out;
    } /*zpomalovačka efektu*/
    a:hover { 
    transition: all 0.3s ease-out;

}


.nadpis{

    text-align: center;
    color: green;
  margin-top: 30px;
  
    font-size: 20px;
   
   
}


.megabox{

    background: honeydew;
    width: 1100px;
   height: auto;
    padding: 30px 30px;
    margin-top: -10px;
}


@media screen and (max-width: 479px) {
    .megabox {width: 345px;}  
    } 


.box{

   margin-top: 30px;
  
  
}



.box img{

    margin-left: 50px;
    margin-top: 20px;
}

@media screen and (max-width: 479px) {
    .box img {display:none;}  
    } 


.box p {

margin-left: 350px;
margin-top: -130px;
width: 550px;
font-size: larger;

}


@media screen and (max-width: 479px) {
    .box p {margin-left:5px; margin-top: 50px; width: 300px;}  
    } 


.box2 img{

margin-top: 100px;
margin-left: 300px;

}

@media screen and (max-width: 479px) {
    .box2 {margin-left:-235px; margin-top: -60px;}  
    } 



.box2 p{

    margin-left: 500px;
    margin-top: -160px;
}

@media screen and (max-width: 479px) {
    .box2 p{ margin-top: 50px; margin-left: 250px;}  
    } 


.fotodarek img{

   margin-left: 910px;
   margin-top: -100px;
   

}

@media screen and (max-width: 479px) {
    .fotodarek img {display:none;}  
    }  


.tlacitko{

   text-align: center;
    margin-top: 60px;
} 

.tlacitko a{
color: #ffcc33;
 background-color: green;
 padding: 15px 25px;
border-radius: 10px;
text-decoration: none;
font-size: xx-large;
font-weight: 700;
}

@media screen and (max-width: 479px) {
    .tlacitko a {font-size:16px;}  
    } 



   .tlacitko a:hover    {

    color: green;
    background-color: #ffcc33;
   }


   .tlacitko2{

    text-align: center;
     margin-top: 60px;
 } 
 
 .tlacitko2 a{
 color: green;
  background-color:#ffcc33 ;
  padding: 15px 25px;
 border-radius: 10px;
 text-decoration: none;
 font-size:xx-large;
 font-weight: 700;
 }
 
 @media screen and (max-width: 479px) {
     .tlacitko2 a {font-size:16px;}  
     } 
 
 
 
    .tlacitko2 a:hover    {
 
     color: #ffcc33;
     background-color: green;
    }

     .cmelda{
            
        position: absolute;
            width: 20px;
        
            height: 20px;
        
            border-radius: 50%;
        
            animation: testovaci-animace 9s infinite;
        
        }

       
        
        
        @keyframes testovaci-animace {
        
            0% {
        
                top: 750px;
        
                left: 90%;
        
            }
        
            33% {
        
                left: 50%;
        
            }
        
            50% {
        
                width: 60px;
        
                height: 70px;
        
            }
        
            100% {
        
                top: 130px;
        
                left: 19%;
        
            }
        
        }