@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');


body {
    padding: 0;
    text-align: center;
    margin: 0;
    align-items: center;
    display: flex;
    justify-content: center;
}



#game-intro {
    display: flex;
    width: 1536px;
    height: 1024px;
    background-image: url(./images/background_compressed.jpg);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px;
}

.hearts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin-top: -900px;
    margin-left: -1300px;
    margin-bottom: 0;
    margin-right: 0;
    padding: 0px;
}


h3 {
    font-family: "Pixelify Sans", sans-serif;
    font-size: 40px;
    color: rgba(47, 54, 53, 0.907);
    margin-bottom: 50px;
    margin-top: 300px;
}

#high-scores{
    margin-top: 0px;
    font-family: "Pixelify Sans", sans-serif;
    font-size: 40px;
    color: rgba(47, 54, 53, 0.907);
}

.heart{
    width: 40px;
    margin-bottom: 0;
    margin-right: 10px;
}

#counter{
    display: flex;
    width: 90px;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin-top: -50px;
    margin-left: 1300px;
    padding: 0px;
    color: white;
    font-size: 30px;
    font-family: "Pixelify Sans", sans-serif;
}

.score-coin{
    width: 40px;
}

#game-intro section{
background-color: rgba(16, 16, 18, 0.763);
width: 600px;
height: 500px;
border: 5px solid;
border-color: antiquewhite;
border-radius: 20px;
color: aliceblue;
margin-top: 0px;
margin-bottom: 50px;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
font-family: "Pixelify Sans", sans-serif;
font-size: 20px;

}


.foods{
    width: 80px;
    height: 80px;
}

#food-container {
align-items: center;
justify-content: space-around;
display: flex;
width:500px;
height: 150px;
border: 5px solid;
border-color: rgba(250, 235, 215, 0.221);
border-radius: 20px;
}

#arrows {
width: 200px;
}

#start-button{
width: 250px;
}



#game-container {
    display: none;
    width: 1536px;
    height: 1024px;
    background-image: url(./images/background_compressed.jpg);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
    
}



#game-end {
    display: none;
    width: 1536px;
    height: 1024px;
    background-image: url(./images/background_compressed.jpg);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px;
}

.game-over-message{
    color: rgb(56, 60, 59);
    margin-top: 100px;
    margin-bottom: -50px;
    font-size: 48px;
    font-family: "Pixelify Sans", sans-serif;
    
}
#restart-button{
    margin-top: 100px;
    width: 250px;

}

#sick-dog{
    width: 180px;
    margin-left: 900px;
    margin-bottom: 450px;
}