body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: black;
    color: green;
    font-family: 'PrintChar21', monospace;
}

#game-container {
    width: 800px; /* Increased width */
    height: 600px; /* Increased height */
    margin-top: 30px; /* Added margin at the top */
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    width: 100%;
    height: 100%;
    background-color: black;
    border: 4px solid green;
}

/* Button styling */
button {
    font-family: 'PrintChar21', monospace;
    font-size: 16px;
    padding: 10px 20px;
    margin: 10px;
    margin-top: 30px;
    cursor: pointer;
    background-color: #111;
    color: green;
    border: 2px solid green;
}

button:hover {
    background-color: green;
    color: black;
}

/* Score styling - keeping it here for later use */
.score {
    color: green;
    font-size: 32px;
    position: absolute;
    top: 10px;
}

/* Add this CSS at the bottom of your style.css */
#controls {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 2px;
}

#controls label {
    display: inline-block;
    margin-right: 10px;
    color: green;
    font-family: 'PrintChar21', monospace;
}

#controls input[type="range"] {
    width: 120px;
    cursor: pointer;
}

@keyframes shake {
    0%, 100% {
      transform: translateX(0);
      transform: translateY(0);
    }
    25% {
      transform: translateX(-1px);
      /* transform: translateY(-5px); */
    }
    50% {
      transform: translateX(5px);
      transform: translateY(2px);

    }
    75% {
      transform: translateX(5px);
    }
  }
  
  .shake-animation {
    animation: shake 0.15s;
  }
  
  html, body {
    overflow: hidden; /* Disables scrollbars */
    width: 100%;      /* Ensures full width */
    height: 100%;     /* Ensures full height */
    margin: 0;        /* Removes default margin */
    padding: 0;       /* Removes default padding */
}