@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

body{

    background-color: teal;

    color: white;

    font-family: 'Roboto', sans-serif;

}

header{

    background-color: black;

    text-align: center;

    padding-top: 2%;

    padding-bottom: 2%;

}

main{

    padding-top: 5%;

    text-align: center;

    background-color: black;

    padding-bottom: 15%;

}

h1{

    color: red; 

}

.hlavni_nadpis{

    font-family: 'Oswald', sans-serif

}

h2{

    color: rgb(146, 27, 27)

}

.menuNadpis{

    color: teal;

    font-size: medium;

}

a{

    text-decoration: none;

    color: white;

    padding: 20px;

    font-size: medium;

}



section{

    display: flex;

    flex-direction: column;  

    margin-left: 5%;

    margin-right: 5%;

}



article{

    display: flex;

    flex-direction: column;

    padding: 5%;

    border-top: solid gray 1px;

    border-bottom: solid gray 1px;

    flex: 1;

}

footer{

    background-color: black;

    padding-top: 1%;

    padding: 2%;

    margin: 0%;

    text-align: center;

}

/*semafor*/

.semafor{

    position: relative;

   top: 70px;

   width: 150px;

   height: 400px;

   margin: auto;

   background-color: rgb(37, 37, 37);

   border: gray 4px solid ;

   border-radius: 50px;

}

.tyc{

    position: relative;

    top: 70px;

    width: 40px;

    height: 300px;

    margin: auto;

    background-color: rgb(37, 37, 37);

    border: gray 5px solid ;

    border-top: 0px;

    border-bottom: 0px;

}

.stojan{

    position: relative;

    top: 70px;

    width: 150px;

    height: 10px;

    margin: auto;

    background-color: rgb(37, 37, 37);

    border: gray 5px solid ;

    border-radius: 50px;

}

.semafor div {

    width: 100px;

    height: 100px;

    margin: auto;

    margin-top: 10px;

    background-color: black;

    border: gray 5px solid;

    border-radius: 70px;

}



@media(min-width:640px){

    body{

        background-color: black;

        background-image:url(/css/fotky/biker.jpg);

        background-size: 100% auto;

        background-position: top left;

        background-repeat: no-repeat;

        color: white;

        margin: 5%;

    }

    header{

        padding-top: 2%;

        padding-bottom: 2%;

        background-color: rgba(0, 0, 0, 0.808);

    }

    main{

        padding-top: 5%;

        padding-bottom: 15%;

        background-color: rgba(0, 0, 0, 0.808);

    }

    a{

        padding: 5px;

    }

    a:hover{

        color: gray;

    }

    section{

        display: flex;

        flex-direction: row;  

        justify-content: center;

    }

    article{

        display: flex;

        flex-direction: column;

        padding: 5%;

        border-left: solid gray 1px;

        border-right: solid gray 1px;

        border-top-style: none;

        border-bottom-style: none;

        font-size: x-large;

    }



}

/*fotogalerie*/

.tlacitka{

    display: flex;

    padding: 20px 10%;

    justify-content: center;

    align-items: center;

    position: relative;

}

i{

    cursor: pointer;

}

.fas.fa-backward {

    display: block;

    padding: 2%;

}

.fas.fa-play {

    display: block;

    padding: 2%;



}

.fas.fa-pause {

    display: none;

    padding: 2%;



}

.fas.fa-forward {

    display: block;

    padding: 2%;

}

#prvniFoto img {

    height: 300px;

    width: 400px;

}

.ostatniFoto {

    display: flex;

    flex-wrap: wrap;

    gap: 15px 10px;

    justify-content: center;

}

.ostatniFoto img {

    cursor: pointer;

    width: 210px;

    height: 145px;

    border-radius: 10px;

}

@media(min-width:800px){

    #prvniFoto img{

        width: 500px;

        height: 277px;

    }

}

@media(min-width:1000px){

    #prvniFoto img{

        width: 640px;

        height: 450px;

    }

}