body {
   margin: 2em;
   font-family: serif;
   font-size: 20px;
}

h1,h2,p,ul,.zarovnani {
   margin: 1em;
   text-align: center;
   font-family: 'Saira', sans-serif;
}  

h1 {
   font-size: 2em;
   text-shadow: 15px 15px 15px #4B0082;
}

ul {
   list-style-type: none;
   font-weight: bold;
   margin: 2em;
}

.odkazy1 {
   padding: 20px;
   font-family: 'Saira', sans-serif;
   font-weight: bold;
   text-decoration: none;
   color: white;
}

.odkazy2 {
   display: none;
}
 
#uvodni-foto {
   margin-left: auto;
   margin-right: auto;
   width: 50%;
   border-radius: 25px;
   box-shadow: 25px 25px 30px #1c2228;
}

#uvodni-scholastika {
   margin-left: auto;
   margin-right: auto;
   width: 20%;
   border-radius: 25px;
   box-shadow: 25px 25px 30px #1c2228;
}

.ramecky {
   background-color: #4B0082;
   overflow: hidden;
   border-radius: 25px;
}

.odsazeni {
   margin-bottom: 100px;
}

.zarovnani-vlevo {
   text-align: left;
}

li a {
   float: left;
   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
}

a:hover {
   background-color: #6A5ACD;
   color: white;
}

.uvod {
   padding: 14px 16px;
   color: white;
   font-weight: normal;
}

img {
   max-width: 50%; 
   height: auto;
   margin: 5px;
}

.galerie {
   text-align: center; 
}

.prvek {
   margin: 30px;
   font-family: 'Saira', sans-serif;
}

.prvek-1 {
   margin: 30px;
   font-family: 'Saira', sans-serif;
   text-align: center;
}

.box {
   display: flex;
   flex-wrap: wrap;
}

.okraj {
   margin-left: 25px;
}


@media only screen and (max-width: 900px){
  .odkazy1 {
   display: none;
}

.odkazy2 {
   display: inline;
   padding: 20px;
   font-family: 'Saira', sans-serif;
   font-weight: bold;
   text-decoration: none;
   color: white;
}

.prvek {
   width: 100%;
   text-align: center;
}

.okraj {
   text-align: center;
}

.zarovnani-vlevo {
   text-align: center;
}

}