@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Pacifico&display=swap');
*
{
    padding: 0;
    margin: 0;
}
.body
{
    background: url("../img/background2.jpeg");
    min-height: 100vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
#scoreBox
{
    position: absolute;
    top: 9px;
    right: 119px;
    font-size: 39px;
    font-weight: bold;
    font-family: "Concert One", sans-serif;
}
#highScoreBox
{
    position: absolute;
    top: 45px;
    right: 20px;
    font-size: 39px;
    font-weight: bold;
    font-family: "Concert One", sans-serif;
}
#board
{
    background: linear-gradient(#d7b981 , #f47171);
    width: 80vmin;
    height: 82vmin;
    border: 2px solid #000000;
    display: grid;
    grid-template-rows: repeat(18 , 1fr);
    grid-template-columns: repeat(18 , 1fr);
    margin: 0 auto; /* Center board horizontally */
    position: relative; /* Ensure positioning can be adjusted */
    top: 0; /* Default position */
}
#musicToggle {
    position: absolute; /* Use absolute positioning */
    top: 10px; /* Adjust the top margin */
    left: 10px; /* Adjust the left margin */
    padding: 10px 15px; /* Add some padding */
    font-size: 16px; /* Adjust font size */
    cursor: pointer; /* Change cursor to pointer */
    background: linear-gradient(#d7b981 , #f47171); /* Light background color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    font-family: "Concert One", sans-serif;
}
#startGame, #pauseGame {
    position: absolute;
    top: 60px; 
    left: 10px; 
    padding: 10px 15px; 
    font-size: 16px; 
    cursor: pointer; 
    background: linear-gradient(#d7b981 , #f47171); 
    border: none; 
    border-radius: 5px; 
    margin-right: 10px; /* Add some space between buttons */
    font-family: "Concert One", sans-serif;
}
.controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 40px; /* Adjust to your liking */
    left: 10px; /* Adjust to your liking */
}

.control-btn 
{
    font-size: 40px; /* Increase arrow size */
    width: 80px; /* Increase button width */
    margin: 5px;
    padding: 10px 20px; /* Add more horizontal padding */
    border: none;
    background: linear-gradient(#d7b981 , #f47171);
    color: #000000;
    cursor: pointer;
    border-radius: 5px;
    text-align: center; /* Center arrow inside the button */
}

.head
{
    position: relative;
    background : linear-gradient(#008080 , #E8B86D);
    border:  2px solid #000000;
    transform: scale(1.02);
    border-radius: 15%; 
}
.snake
{
    background-color: #64503F;
    border: .25vmin solid #ffffff;
    border-radius: 10px;
}

/* Eyes */
.eye {
    position: absolute;
    width: 14px;
    height: 18px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for depth */
}

.eye.left {
    top: 5px;
    left: 1px;
}

.eye.right {
    top: 5px;
    right: 3px;
}

/* Pupils */
.pupil {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: black;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.food
{
    background: linear-gradient(#580558 ,#ea556e);
    border: .25vmin solid #000000;
    border-radius: 8px;
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    #board {
        top: -20px; 
        width: 90vmin; /* Increase size slightly on smaller screens */
        height: 92vmin;
    }
}

/* Responsive Design for Very Small Screens */
@media (max-width: 480px) {
    #board {
        top: -40px;
        width: 95vmin; /* Maximize board size for small devices */
        height: 97vmin;
    }
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    #scoreBox {
        font-size: 30px; /* Reduce font size */
        top: 10px; /* Keep score box near the top */
        right: 10px; /* Move closer to the right */
    }
    
    #highScoreBox {
        font-size: 30px; /* Reduce font size */
        top: 50px; /* Position below the scoreBox */
        right: 10px; /* Align to the right */
    }
}

/* Responsive Design for Very Small Screens */
@media (max-width: 480px) {
    #scoreBox {
        font-size: 20px; /* Further reduce font size */
        top: 5px; /* Adjust top position */
        right: 5px; /* Keep to the right */
    }

    #highScoreBox {
        font-size: 20px; /* Further reduce font size */
        top: 40px; /* Position slightly below the scoreBox */
        right: 5px; /* Align to the right */
    }
}
/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .controls {
        bottom: 20px; /* Move controls closer to the bottom */
        left: 10px; /* Keep it aligned to the left */
    }

    .control-btn {
        font-size: 20px; /* Reduce button font size for smaller screens */
        padding: 8px; /* Adjust padding for smaller buttons */
    }
}

/* Responsive Design for Very Small Screens */
@media (max-width: 480px) {
    .controls {
        bottom: 15px; /* Further adjust bottom positioning */
        left: 5px; /* Bring closer to the left edge */
    }

    .control-btn {
        font-size: 16px; /* Further reduce font size */
        padding: 6px; /* Make buttons more compact */
    }
}