@keyframes FadeInOut {
    0%,
    100% {
        opacity: 1;
    }
    20%,
    70% {
        opacity: 0.2;
    }
    25%,
    65% {
        opacity: 0;
    }
}

@keyframes Reversed-FadeInOut {
    0%,
    100% {
        opacity: 0;
    }
    20%,
    75% {
        opacity: 0.3;
    }
    35%,
    65% {
        opacity: 1;
    }
}

@keyframes Pulse {
    0%,
    50%,
    100% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes Slide {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -455000px 0;
    }
}

@keyframes Jump {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-150px);
    }
}

@keyframes Move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-102vw);
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    overflow-y: hidden;
}

.start-screen,
.game,
.game-over {
    height: 100vh;
    width: 100vw;
    transition: all 750ms ease-out;
    position: absolute;
    top: 0;
    left: 0;
}

.start-screen,
.game-over {
    background-color: #131313;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.game,
.game-over {
    transform: translateY(100%);
}

h1 {
    color: #fff;
    align-self: center;
    font-size: 45px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
}

.btn {
    height: 45px;
    width: 250px;
    text-transform: uppercase;
    border-radius: 5px;
    align-self: center;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(-70deg, #5c5231, #302b1b);
    border: none;
    letter-spacing: 2px;
    margin-top: 20px;
    box-shadow: 0px 3px 3px rgba(133, 120, 50, 0.3);
    transition: all 0.3s ease 0s;
    cursor: pointer;
}

.btn:hover {
    background: linear-gradient(-70deg, #584f32, #272316);
}

button:focus {
    outline: 0;
}

.game {
    background: linear-gradient(50deg, #fff, #f3f0e7, #555555, #222222);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;
}

.city-img {
    background: url(./img/background.png);
    background-size: cover;
    height: 100vh;
}

.moon-img,
.sun-img {
    position: absolute;
    top: 5vh;
    width: 20vh;
}

.moon-img {
    right: 15vw;
    animation: Reversed-FadeInOut 15s ease-in-out 0s infinite;
}

.sun-img {
    left: 20vw;
    animation: FadeInOut 15s ease-in-out 0s infinite;
}

span {
    color: white;
    align-self: center;
    letter-spacing: 1.5px;
}

.lives,
.result,
i {
    position: absolute;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
}

.result {
    top: 2vh;
    right: 2vw;
    letter-spacing: 2px;
}

.lives {
    top: 2vh;
    right: 13vw;
    letter-spacing: 2px;
}

i {
    color: white;
    top: 2.3vh;
    right: 14.5vw;
    padding-right: 8px;
}

.ostrich-game-over {
    height: 30vh;
    align-self: center;
}

.ostrich-game-start {
    height: 20vh;
    height: 120px;
    align-self: center;
}

.ostrich-standing,
.ostrich-moving,
.ostrich-down {
    position: absolute;
    bottom: 14vh;
    left: 4vw;
    height: 120px;
}

.jump {
    animation: Jump 1.4s ease 0s 1 normal;
}

.lose-life {
    animation: Pulse 0.5s ease 0s 1 normal;
}

.jump.lose-life {
    animation: Jump 1.25s ease 0s 1 normal, Pulse 0.5s ease 0s 1 normal;
}

.hidden {
    display: none;
}

.final-result {
    font-size: 20px;
    margin-bottom: 20px;
}

.button-info {
    margin-top: 15px;
}

.egg {
    width: 32px;
    height: 45px;
    background-color: rgb(248, 247, 180);
    bottom: 14vh;
    position: absolute;
    right: -1vw;
    border: 5px solid #000;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: Move 6s infinite linear;
    display: none;
}

.grass-small,
.grass-big,
.grass-big-second,
.grass-thin,
.grass-double {
    position: absolute;
    bottom: 14vh;
    right: -1vw;
    display: none;
    animation: Move 7.3s infinite linear;
}

.grass-small {
    width: 57px;
}

.grass-big,
.grass-big-second {
    height: 49px;
}

.grass-thin {
    height: 53px;
}

.grass-double {
    height: 45px;
}