@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;600;700;900&display=swap');

html {
    min-height: 100%;
}

body {
    height: 0px;
    direction: rtl;
    background-color: #3DBDA4;
    padding-bottom: 200px;
    text-align: center;

}

.container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    gap: 2em;
    justify-content: center;
    align-items: center;
}

.gameOptions {
    width: 304px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


* {
    font-family: 'Rubik', sans-serif !important;
}

h1 {
    text-align: center;
    color: white;
    margin: 16px;
}

#board {
    background-color: white;
    border-radius: 6px;
    text-align: center;
    display: inline-grid;
    color: white;
    border: 4px solid black;

}

#board>div {
    height: 10px;
    width: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.snake {
    background-color: #3DBDA4;
    border-radius: 50%;
}

.snake.head {
    background-color: #000000;
    border: 2px solid #3DBDA4;
    box-sizing: border-box;
}

.apple::after {
    content: "🍎";
    font-size: 11px;
}

.score {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

.score>p {
    font-size: 24px;
    color: white;
}

.options {
    display: flex;
    gap: 1em;
}

button {
    width: 7em;
    font-size: 1em;
    border-radius: 1em;
    font-weight: bold;

}

.buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2em;
}

img {
    width: 5em;
    height: 5em;
}


footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #2D2C2F;
    padding: 0.75em 0.75em 0.75em 0.75em;

}

@font-face {
    font-family: "Heebo-Regular";
    src: url(./Heebo/static/Heebo-Regular.ttf);
}

footer>h2 {
    margin: 0 1em;
    color: white;
    font-size: 1.25em;
    font-family: "Heebo-Regular";
}


.MG {
    text-align: left;
}


.save {

    text-align: right;
}



@media screen and (max-width: 1000px) {
    .container {
        min-height: 100vh;
        flex-direction: column;
    }

    .buttons {

        gap: 0.5em;
    }


    footer {
        font-size: 1em;
        flex-direction: column;
    }

    .MG,
    .save {
        text-align: center;
    }


}