/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
    --bg-color: #f4f4f4;
    --text-color: #333;
    --header-bg: #333;
    --header-text: #fff;
    --nav-bg: #555;
    --nav-hover-bg: #777;
    --main-bg: #fff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --section-border: #eee;
    --h2-border: #eee;
    --cool-item-bg: #e9e9e9;
    --game-container-bg: #fff;
    --game-shadow-color: rgba(0, 0, 0, 0.2);
    --canvas-border: #333;
    --canvas-bg: #aad751;
    --score-color: #0056b3;
    --start-button-bg: #28a745;
    --start-button-hover-bg: #218838;
    --instructions-color: #666;
    --footer-bg: #333;
    --footer-text: #fff;
}

.dark-mode {
    --bg-color: #000; /* Pitch black background */
    --text-color: #abb2bf; /* Light text */
    --header-bg: #0a0a0a; /* Even darker grey for header */
    --header-text: #fff;
    --nav-bg: #0e0e0e; /* Even darker grey for nav */
    --nav-hover-bg: #1a1a1a;
    --main-bg: #0f0f0f; /* Even darker grey for main content area */
    --shadow-color: rgba(0, 0, 0, 0.7); /* Stronger shadow in dark mode */
    --section-border: #1a1a1a; /* Darker border */
    --h2-border: #1a1a1a; /* Darker border */
    --cool-item-bg: #0e0e0e; /* Darker cool item background */
    --game-container-bg: #0f0f0f; /* Darker game container background */
    --game-shadow-color: rgba(0, 0, 0, 0.8); /* Stronger shadow */
    --canvas-border: #2a2a2a; /* Darker border */
    --canvas-bg: #0a0a0a; /* Darker background for canvas */
    --score-color: #61afef; /* Blue score for dark mode */
    --start-button-bg: #98c379; /* Green button for dark mode */
    --start-button-hover-bg: #8ac06a;
    --instructions-color: #888;
    --footer-bg: #0a0a0a; /* Even darker grey for footer */
    --footer-text: #fff;
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for dark mode */
}

header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 1em 0;
    text-align: center;
}

header h1 {
    margin: 0;
}

nav {
    background-color: var(--nav-bg);
    color: var(--header-text);
    padding: 0.5em 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: var(--header-text);
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

nav ul li a:hover {
    background-color: var(--nav-hover-bg);
    border-radius: 4px;
}

main {
    padding: 20px;
    max-width: 960px;
    margin: 20px auto;
    background-color: var(--main-bg);
    box-shadow: 0 0 10px var(--shadow-color);
    border-radius: 8px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--section-border);
}

section:last-child {
    border-bottom: none;
}

h2 {
    color: var(--text-color);
    border-bottom: 2px solid var(--h2-border);
    padding-bottom: 10px;
    margin-top: 0;
}

.cool-item {
    background-color: var(--cool-item-bg);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

/* Snake Game Specific Styles */
.game-container {
    background-color: var(--game-container-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 15px var(--game-shadow-color);
    text-align: center;
    max-width: fit-content; /* Adjust container to content */
    margin: 20px auto; /* Center the game container within its section */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

canvas {
    border: 5px solid var(--canvas-border);
    background-color: var(--canvas-bg); /* Light green background for the game area */
    display: block; /* Remove extra space below canvas */
    margin: 0 auto 20px auto;
    box-sizing: content-box; /* Ensure border doesn't shrink canvas drawing area */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

#score {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--score-color);
    transition: color 0.3s ease;
}

#startButton {
    background-color: var(--start-button-bg);
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

#startButton:hover {
    background-color: var(--start-button-hover-bg);
}

.instructions {
    margin-top: 20px;
    font-size: 0.9em;
    color: var(--instructions-color);
    transition: color 0.3s ease;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: var(--footer-bg);
    color: var(--footer-text);
    margin-top: 20px;
    border-radius: 8px 8px 0 0;
    transition: background-color 0.3s ease;
}

/* Dark mode toggle switch (optional, but good for user control) */
.dark-mode-toggle {
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dark-mode-toggle label {
    color: var(--text-color);
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #61afef; /* A nice blue for active dark mode */
}

input:focus + .slider {
    box-shadow: 0 0 1px #61afef;
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}