@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap');


body {
  font-family: 'Patrick Hand SC';
  text-align: center;
  font-size: 25px;
  background-image: url("../img/pozadi2.png");
  
background-repeat: no-repeat;
background-size:contain;
background-position: center;

}
* {
  margin: 0;
  padding: 0;
}
*, *:after, *:before {
  box-sizing: border-box;
}
a, input {
  transition: all 0.3s ease-out;
  text-decoration: none;
 color: rgb(8, 8, 8);
 font-size: inherit;
}




i {
  color: #71a2c4;
}
.headerTop {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 0px 20px;

}


header {  
  text-align: center;
 
}
header img {
  width: 100%;
}


h1 {
  margin-top: 0;
  font-size: 6em;
 
  
  font-family: 'Patrick Hand SC', cursive;
  background-image: url("../img/oci.gif");
 
  



 text-shadow: 3px 3px #68c7ec;
  
background-repeat: no-repeat;
background-size: contain;
background-position: center
}


h2{
 

  font-size: 140%;
  margin-bottom: 30px;
  text-transform: uppercase;
  
}

#logo {
width: 50px;
height: 50px;

}

/*Menu*/
.menu {
  display: flex;
  flex-flow: row nowrap;
justify-content: center;
  font-size: 110%;
  list-style: none;
  margin: 0; 

}

.menu li {
  
  display: block;
  padding: 1em;
  color: rgb(250, 249, 249);
  }


.menu a:hover {
  border-bottom: 2px solid #4f748d;

}

@media all and (max-width: 600px) {
  .menu {
    flex-flow: column wrap;
    padding: 0;
  }
  .menu a { 
    
    text-align: center; 
    padding-top: 5px;
   
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
  }
  .menu li:last-of-type a {
    border-bottom: none;
  }


H1{
  font-size: 2em;
}

 }
.tuzka {

  
  width: 30%;
}
/*.tuzka img {
  opacity: 0.5;
}*/

.container {

  width: 100%;
  padding: 0 12% 0 8%;
/*background-image: url("../img/pozadi4.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;*/

  
}
section {
    display: flex;
  justify-content: space-between;
    flex-direction: row;
    margin: 50px 0 50px 0;
  
text-align: left;
  /* background-color: rgba(169, 218, 229, 0.486); */
}

.item {
  width: 48%;
  padding: 1%;
 
  

  
  }
  .item img {
    width: 100%;
    /*border-radius: 5%;*/
  }


  @media all and (max-width: 850px) {
    section {
      flex-flow: column wrap;
      flex-direction: column;
    }
    .item {
      width: 100%;
    }
    .container {
      padding: 0 5% 0 5%;
    }
  
    }


/*button*/
.button {
background-color: rgba(253, 253, 253, 0.5);
padding: 10px;
border: rgba(30, 153, 210, 0.712) 1px solid;
border-radius: 10px;
outline: 0;
align-content: flex-end;

}.button:hover {
	background-color:rgba(253, 253, 253, 0.876);
  color: rgb(36, 10, 80);
  transition: all 0.3s ease-out;
}.button:active {
  color: rgb(93, 93, 136);
	position:relative;
	top:1px;
}

.modalButton {
  background-color: rgba(253, 253, 253, 0.596);
  padding: 10px;
  border: rgba(210, 105, 30, 0.472) 1px solid;
  border-radius: 10px;
  outline: 0;
  align-content: flex-end;
  
  }.modalButton:hover {
    background-color:#fb9e25c0;
    color: rgb(36, 10, 80);
    transition: all 0.3s ease-out;
  }.modalButton:active {
    color: rgb(93, 93, 136);
    position:relative;
    top:1px;
  }





/*atrakce*/
.atrakce img {
  float: left;
  margin-right: 20px;
  
}
.atrakce {
  text-align: left;
  margin: 20px 0 20px 0;
  clear: both;
  margin-bottom: 50px;
}
.atrakce em {

 float: right;
margin-top: 20px;
  
}

.cenik{
text-align: left;
overflow: auto;
margin: 30px;
}
.cenik img {
float: left;
margin-right: 50px;

}

/*footer*/
footer {
  background-color: #4f748d;
  width: 100%;
  padding: 30px;
  color: white;
}