@import url('https://fonts.googleapis.com/css2?family=Average+Sans&family=Coiny&family=Margarine&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Coiny", sans-serif;
    text-align: center; 
    

}

#game {
    width: 1200px;
    height: 600px;
    border: 4px solid rgb(0, 157, 174);
    border-radius: 30px;
    margin: 50px auto;
    position: relative;
    overflow: hidden;
    background-color: rgb(206, 243, 255);
}
   

#hippo {
    width: 260px;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 50px;
}

.jump {
    animation: jump 0.45s ease-in-out;
}

@keyframes jump {
    0% { bottom: 0; }
    30% { bottom: 220px; }
    50% { bottom: 250px; }
    70% { bottom: 220px; }
    100% { bottom: 0; }
}

#steen {
    width: 120px;
    height: auto;
    position: absolute;
    bottom: 5px;
    left: 1200px;
    animation: move 1.5s infinite linear; 
}

@keyframes move {
    0% { left: 1200px; }
    100% { left: -20px; }
}
  
#score { 
    margin-top: 20px;
    font-size: 30px;
    color: rgb(0, 157, 174);
}

#intro {
    font-size: 20px;
    color: rgb(0, 157, 174);
}

#feedback {
    font-size: 50px;
    color: rgb(233, 121, 171);
}