@import url('https://fonts.googleapis.com/css2?family=Island+Moments&family=Roboto:wght@100;300;400;900&display=swap');

body{
    font-family: 'Roboto', sans-serif;
    padding: 10px;
    background-color: rgb(218, 218, 218);
}

.header {
    text-align: center;
    /* border: 0px solid darkblue; */
    padding: 5px 0px;
    margin-bottom: 10px;
    border-radius: 20px;
    color: white;
    background-image: linear-gradient(45deg,#283048,#859398);
    transition: 0.5s;  
}


.header:hover {
    opacity: 0.8;
    box-shadow: 5px 5px 10px black;
    padding: 8px 0px;
}

.topnav{
    /* background-color: rgb(51, 51, 51); */
    background-image: linear-gradient(30deg, #232526,#43474a);
    overflow: hidden;
    border-radius: 10px;
    transition: 0.5s; 
}

.topnav:hover {
    box-shadow: 5px 5px 10px black;
    opacity: 0.8;
}

.topnav a{
    color: whitesmoke; /* barva textu*/
    text-decoration: none; /*odstrani podržítko*/
    float: left;        /* nastaví elementy do leva*/
    display: block;     /*blokové zobrazení*/
    padding: 5px 15px;  /* mezery pro odkazy*/
    transition: 0.4s;
    border-radius: 10px;
}

.topnav a:hover {
    background-color: #d0d0d0;
    color: black;
}

.container:after{
    clear:both;
    display: table;
}

.card{
    padding: 20px;
    margin-top: 20px;
    background-color: white;
    border-radius: 20px;
}

.footer{
    background-image: radial-gradient(circle,#000, #434343);
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    color:white;
    border-radius: 20px;
    
}
.footer a {
    text-decoration: underline;
    color: white;
}

@keyframes example {
    0% {color: #FF0000}
    35%{color: #FF0000}
    65% {color: #0000FF}
    100% {color: #0000FF}
}

.secret {
    color: black;
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}