html {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 500;
}

body {
    background-color: rgb(191, 226, 255);
    margin: 0;
    padding: 0;
}
.index {
    width: 89%;
    margin: 3% 5% 30% 5%;
    position: relative;
}

.hore1 {
    height: 70px;
    max-width: 100%;
    margin: 0px;
    background-color: black;
}

.hore2 {
    float: left;
    background-color: rgb(0, 0, 0);
    box-shadow:inset ;
    width: 33%;
    height: 71px;
    font-size: 2vw;
    margin: 0px;
    box-sizing: border-box;
    padding: 30px;
    color: aliceblue;
    text-align: left;
    font-weight: 200;
}
.hore3{
    float: left;
    background-color: rgb(0, 0, 0);
    width: 17%;
    height: 71px;
    font-size: 31px;
    padding-left: 11%;
    box-sizing: border-box;
    color: aliceblue;
    text-align: center;
    font-weight: 200;
}

.mojpodpis{
    width: 55px;
}

.hore4 {
    float: right;
    background-color: rgb(0, 0, 0);
    width: 50%;
    height: 71px;
    font-size: 1.8vw;
    margin: 0%;
    box-sizing: border-box;
    padding: 30px;
    text-align: right;
    font-weight: 200;
}

.eng {
    float: right;
    width: 30%;
    margin: 10px;

}
.jazyk{
    width: 2.5vw;
    float: right;
    padding: 5px;
}

.jazykm{
    width: 2.7vw;
    float: right;
    padding: 5px;
}

.menu{
    padding: 8px;
    text-decoration: none;
    color: aliceblue;
}
.menu:hover{
    color:rgb(161, 159, 159);
    transform: translateY(-0.2rem) scale(2);
    transition: 550ms

}
.index0{
    background: url(obrazky/etretat.JPG);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.index {
    width: 89%;
    margin: 3% 5% 55vh 5%;
}
.index1{
    width: 100%;
    text-align: center;
    font-size: 15px;
}
h1{
    background-clip: text;
    display: inline;
    color: blue;
    text-align: center;       
}
.footercele{
    width: 100%;
    margin: 10px 0px 0px 0px;
    box-sizing: border-box;
    background-color: rgb(0, 0, 0);
    float: left;
    padding-top: 10px;
    color: aliceblue;
    margin-top: 1vh;
}

.fot1{
    width: 30%;
    padding-left: 10%;
    float: left;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: aliceblue; 
    font-weight: 200;  
    font-size: 1vw; 
    padding-bottom: 20px;
}
.fot2{
    width: 30%;
    padding-right: 10%;
    float: right;
    text-align: right;
    padding-bottom: 5px;
    font-weight: 200; 
    font-size: 1vw; 
    padding-bottom: 20px;
}

.imgnoha{
    width: 10%;
}

.footerspodok{
    width: 100;
    margin: 0px 0px 0px 0px;
    background-color: rgb(0, 0, 0);
    padding-left: 0px;
    color: aliceblue;
    text-align: center;
    font-size: 1vw;
    font-weight: 100;
    padding-bottom: 5px;

}

.footerspodoktext{
    margin-left: 100px;
}



.menu2{
    text-decoration: none;
    color: aliceblue;
}
.menu2:hover{
    color:rgb(190, 189, 189);
    font-size: 1.1em;
    color:rgb(168, 168, 168);
    transform: translateY(-0.2rem) scale(2);
    transition: 550ms
}

/* ja 2 nove s boxom */
.box2{
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);
    margin:6% 10% 10vh 10%;
    color: black;
    background: url(obrazky/solden.JPG);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.mainomne1{
    width: 30%;
    float: right;
    margin-top: 20px;
    margin-bottom: 0px;
    margin-left: 25%;
    margin-right: 35%;
    text-align: center;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);
    background-color: aliceblue;
    font-size: 1vw;
    padding: 15px;
}
.mainomne2{
    text-align: center;
    font-size: 1vw;
}

.center{
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);
    background-color: aliceblue;
    width: 10%;
    float: right;
    margin-top: 2%;
    margin-bottom: 0px;
    margin-left: 50%;
    margin-right: 45%;
    padding: 15px;
    font-size: 1vw;

}


.center2{
    overflow: hidden;
    float: left;
    margin-left: 20%;
    width: 60%;
    margin-top: 2%;
    margin-bottom: 2%;


}
.left{
    float: left;
    width: 40%;
    margin-top: 50px;
    margin-bottom: 0px;
    margin-left: 50px;
    margin-right: 0px;
}

.right{
    float: right;
    width: 49%;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 0px;
    margin-right: 50px;
}

.right1{
    float: right;
    width: 40%;
    margin-top: 50px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 50px;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);
    background-color: aliceblue;
    padding: 10px;
}

.left1{
    float: left;
    width: 40%;
    margin-top: 50px;
    margin-bottom: 0px;
    margin-left: 50px;
    margin-right: 0px;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);
    background-color: aliceblue;
    padding: 10px;
}

li{
    line-height: 20px;
    text-align: center;
    list-style-type:none;
}
.img{
    width: 50%;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);
}

.box{
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);
    margin:6% 10% 35vh 10%;
    background: url(obrazky/hmla.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 2rem;
    padding: 2rem;
}
.skolatextbackorund{
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.15);
    padding: 1.5rem 1.75rem;
    box-sizing: border-box;
}
.backround1{
    font-size: 1.4vw;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.15);
    padding: 1.5rem 1.75rem;
    box-sizing: border-box;
    align-self: start;
}
.skolafot1{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.skola1fotka{
    width: 80%;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);
    display: block;
    
}
.backround2{
    font-size: 1.4vw;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.15);
    padding: 1.5rem 1.75rem;
    box-sizing: border-box;
    align-self: start;
}
.skolafot2{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.skola2fotka{
    width: 80%;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);
    display: block;
}
.skola2fotkacenter{
    width: 70%;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);

}
.backround3{
    grid-column: 1 / -1;
    margin-top: 30px;
    margin-bottom: 50px;
    text-align: center;
}
/* css od tabulky */
table,th,td{
    border:1px solid rgb(0, 0, 0);
    border-collapse: collapse;
}
th,td{
    width:auto;padding: 10px;
}
caption{
    font-size: x-large; 
    color: blue;
}
img{
    width: 80px;
}

.chemia{
    text-decoration: none;
    color: black;
}

.chemia:hover{
    font-size: 1.1em;
    color:rgb(0, 0, 0);
    transform: translateY(-0.2rem) scale(2);
    transition: 550ms
}
thead{
    background-color: rgb(191, 226, 255)
}

table{
    background-color: aliceblue;
    margin: auto; width: 50%; 
    background-repeat: no-repeat; 
    background-size: cover;
}

/* koniec tabulky */

/* moje prace */
.coviem{
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.479);
    margin:6% 10% 41vh 10%;
    background: url(obrazky/srdce.JPG);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:scroll;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-bottom: 2rem;
    align-items: center;
}

.viem1{
    width: 30%;
    float: left;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);
    margin-left: 60%;
    background-color: aliceblue;
    font-size: 20px;
    padding: 10px;
    margin-top: 10px;

}
.viem2{
    width: 30%;
    box-sizing: border-box;
    float: right;
    text-align: center;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.3);
    margin-right: 60%;
    background-color: aliceblue;
    font-size: 20px;
    padding: 15px;
}
.viemimg{
    width: 42px;;
}