@import url('https://fonts.googleapis.com/css2?family=Faster+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Faster+One&family=Oswald:wght@200..700&display=swap'); 

body {
    padding: 0;
    margin: 0;
}

.top{
    display: block;
    margin: 0;
    padding: 0;
}

.head{
        position: relative;
        text-align: center;
        color: rgba(255, 255, 255, 0.566);
        margin-bottom: 0px;
        padding-bottom: 0px;
}

.forza{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

h1{
    font-family: Faster One;
    font-size: 400%;
}


.odkazy_menu{
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: green;
    gap: 5%;
    background-image: url(fmenu.png);
    background-size: contain;
}

.odkazy_menu span {
    margin-top: 3%;
    margin-bottom: 3%;
    font-size: 125%;
}

.menu{
    border-top: 1.5px solid gray;
    border-bottom: 1.5px solid gray;
    margin-top: -5px;
}

a:hover{
    animation-name: idk1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

a{
    color: rgba(255, 255, 255, 0.566);
    font-family: Oswald;
    text-decoration: none;
}

.obsah{
    color: rgba(255, 255, 255, 0.566);
    font-size: 110%;
    margin-top: 6%;
}

.bot{
    background-image: url(forza-horizon-5-keyart_1.jpg);
    color: rgba(255, 255, 255, 0.566);
    display: flex; 
    bottom: -10; 
    left: 0; 
    padding-right: 94.5%;
    margin-top: 10%;
}

@keyframes idk1{
    0% {color: rgba(255, 255, 255, 0.566)}
    25% {color: greenyellow;}
    50% {color: rgba(255, 255, 255, 0.566)}
    75% {color: greenyellow}
    100% {color: rgba(255, 255, 255, 0.566)}
}

@media screen and (max-width: 840px) { 
    .obsah{
        display: block;
        text-align: center;
        align-content: center;
    }

    .bot{
        margin-top: 60%;
    }
    
    h1{
        font-size: 200%;
    }
}