styles.css

:root {
    --background: #282a36;
    --foreground: #f8f8f2;
    --comment: #6272a4;
    --cyan: #8be9fd;
    --green: #50fa7b;
    --orange: #ffb86c;
    --pink: #ff79c6;
    --purple: #bd93f9;
    --red: #ff5555;
    --yellow: #f1fa8c;
}

.light-mode {
    --background: #282828;
    --foreground: #ebdbb2;
    --comment: #928374;
    --cyan: #83a598;
    --green: #b8bb26;
    --orange: #fe8019;
    --pink: #d3869b;
    --purple: #b16286;
    --red: #fb4934;
    --yellow: #fabd2f;
}

#toggleColorButton {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 16px;
    padding: 10px;
    background-color: var(--comment);
    color: var(--background);
    border: none;
    cursor: pointer;
    display: block;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background-color: var(--background);
}

#gameContainer {
    position: relative;
    width: 100%;
    height: 100%;
}

canvas {
    display: block;
    background-color: var(--background);
}

#startScreen, #loseScreen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    text-align: center;
    color: var(--foreground);
}

#startScreen.active, #loseScreen.active {
    display: block;
}

button {
    padding: 10px 20px;
    font-size: 20px;
    background-color: var(--purple);
    color: var(--foreground);
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: var(--cyan);
}

#scoreBoard {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 24px;
    color: var(--foreground);
    display: none;  /* Hide the scoreboard initially */
}

#scoreBoard.active {
    display: block;  /* Show the scoreboard when the game starts */
}

#fpsCounter {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: var(--foreground);
    display: none;  /* Hide the FPS counter initially */
}

#fpsCounter.active {
    display: block;  /* Show the FPS counter when the game starts */
}

#pauseMenu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--foreground);
    display: none;
}

#pauseMenu.active {
    display: block;
}