body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: black;
	font-family: arial;
}

#game-board {
    width: 400px; /* Legen Sie die Breite und Höhe des Videos fest */
    height: 400px;
    border-color: #f55da7;
    border-style: solid;
    box-shadow: 0 0 50px #f55da7; /* Fügen Sie einen Glow-Effekt hinzu */
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
}


.cell {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.snake {
    background-color: #CBff00;
    border: 1px solid #ccc;
}

.food {
    background-color: transparent; /* Hintergrundfarbe für das Essen auf transparent setzen */
    background-image: none; /* Hintergrundbild entfernen */
    background-size: contain; /* Hintergrundbildgröße anpassen */
   }



#start-button{
    position: absolute;
    right: calc(50% - 3em);
    bottom: calc(10% - 2em);
    height: 3em;
    width: 5em;
    background-color: #CBff00; /* Hintergrundfarbe des Buttons */
    color: rgb(74, 74, 74); /* Textfarbe */
    padding: 10px 20px; /* Innenabstand des Buttons */
    border: none; /* Entfernt die Standardtaste */
    cursor: pointer; /* Zeigt die Handcursor-Anzeige beim Überfahren mit der Maus an */
    font-size: 16px; /* Schriftgröße */
    border-radius: 5px; /* Abgerundete Ecken */

}

#linkSite{
	
	color:white;
	position: absolute;
  right: calc(50% -2em);
  top: calc(10% - 2em);
  text-decoration:none;
  text-transform:uppercase;
}






#score-instructions-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 30%;
    right: 10%;
    background-color: #383436;
    color: rgb(133, 120, 120);
    padding: 10px 20px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
}

#score {
    background-color: #f55da7;
    border-color: #d5267a;
    border-style: solid;
    box-shadow: 0 0 20px #d5267a;
    margin-bottom: 10px;
}

#instructions {
    width: 200px;
}