/* Importing the custom PrintChar21 font */
@font-face {
    font-family: 'PrintChar21';
    src: url('fonts/PrintChar21.ttf') format('truetype');
}

/* Basic styling for the body to achieve the retro terminal look */
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(5, 13, 0);
    color: lime;
    font-family: 'PrintChar21', monospace;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Styling for the game area */
#gameArea {
    width: 800px;  /* Adjust based on your preference */
    height: 600px; /* Adjust based on your preference */
    display: grid;
    grid-template-columns: repeat(32, 1fr);  /* Creates a 32x32 grid */
    grid-template-rows: repeat(24, 1fr);
    gap: 6px;
    animation: flicker 0.9s infinite alternate;
    /* background-color: rgb(0, 15, 3); */
    /* border: 2px dotted   rgba(0, 255, 0, 0.329); */
}

/* Individual cells within the game area, initially all cells are empty */
.gameCell {
    width: 100%;
    height: 100%;
    background-color: black; /* Same as the body background for empty cells */
}

.controls {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    background-color: black; /* Optional, to match the game's retro theme */
}

button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: green;
    border: none;
    cursor: pointer;
    margin-right: 5px;
}

button:hover {
    background-color: darkgreen;
}

.gameCell {
    width: 100%;
    height: 100%;
    background-color: black; /* Empty cells are black */
}

.snake {
    background-color: lime; /* Snake segments are lime */
}

.powerUp {
    background-color: red; /* Power-ups are red */
}

.borderCell {
    background-color: rgb(0, 51, 0);  /* or any color you prefer for the border */
}

#scoreDisplay {
    color: lime;
    font-size: 32px; /* Adjust the size as needed */
    text-align: center;
    margin: 20px 0;
}

#gameOverMessage {
    color: red;
    font-size: 48px; /* Adjust the size as needed */
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 10; /* Ensure it's above other elements */
}


@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: .8; }
    100% { opacity: 0.9; }
}