/* Styles to body */
body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    background-color: #23260c;
}

/* Styles for the header and instructions */
main,
.instructions {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.instructions {
    text-align: center;
    padding: 0 10vw;
}

header h1 {
    font-size: 150%;
    font-family: 'Raleway', sans-serif;
    color: #f5f5f5;
    text-align: center;
    border-bottom: 0.2em groove #d6f8a0;
}

a {
    text-decoration: none;
}

p {
    font-family: 'Raleway', sans-serif;
    color: #f5f5f5;
}

/* Styles for the speed toggle */
.choose-speed {
    margin: 1%;
}
.speed {
    display: none;
}

.speed-choice {
    cursor: pointer;
    background-color: #f5f5f5;
    color: #23260c;
    padding: 1vw;
    border: 0.3vw solid #D6F8A0;
    border-radius: 25%;
    opacity: 0.6;
    transition: 0.3s;
}
.speed-choice:hover{
    opacity: 1;
}

.speed[type="radio"]:checked + label {
    background-color: #D6F8A0;
    opacity: 1;
}

/* Styles for the gaming area */
.game-board {
    background-color: #D6F8A0;
    width: 70vmin;
    height: 70vmin;
    display: grid;
    grid-template-rows: repeat(21, 1fr);
    grid-template-columns: repeat(21, 1fr);
    border-style: dashed;
    border-color: #000000;
}

/* Game over message */
.game-over {
    color: #f5f5f5;
    text-align: center;
}

/* Style of the snake */
.snake {
    background-color: #3C533F;
    border: .25vmin solid #23260c;
}
/* Style for the food */
.food {
    background-color: #ff0000;
    border: .25vmin solid #ff4800;
    border-radius: 50%;
}

/* Styles for the form section */

.feedback {
    display: flex;
    width: 100vmin;
}

.feedback-p, .feedback-form {
    width: 100%;
    padding: 3%;
    margin: auto;
}

.feedback-p {
    text-align: justify;
}

.feedback-form {
    font-family: 'Raleway', sans-serif;
    color: #f5f5f5;
    text-align: center;
    align-self: center;
}
.feedback-title, .feedback-form input {
    margin: 0.1em;
}

.message-area {
    vertical-align: top;
}

/* Control buttons */
.btnControls, .restart {
    font-size: x-large;
}


/* Style for the footer */
ul {
    list-style: none;
    display: flex;
    padding: 1vw;
}

li {
    font-family: 'Raleway', sans-serif;
    color: #f5f5f5;
    padding: 1em;
    font-size: 140%;
}

li a {
    text-decoration: none;
    color: inherit;
    align-items: center;
    vertical-align: middle
}

/* Animation when mouse hover the icons on footer */
i:hover {
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 20vh 20vh #03f74c91;
    animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Styles for the success page */

.success {
    color: #f5f5f5;
    text-align: center;
}

.success img {
    max-width: 100%;
    height: auto;
}

/* Media queries */

@media screen and (max-width: 820px) {
    .feedback {
        display: block;
        padding: 0;
        width: auto;
    }

    .feedback-p, .feedback-form {
        width: 70%;
        padding: 3%;
        margin: auto;
    }
}