:root {
        --color-bg: #1a1a2e;
        --color-accent: #ffff00;
        --color-text: #fff5ee;
        --color-white: #ffffff;
    }
    body {
        margin: 0;
        padding: 0;
        background-color: var(--color-bg);
        color: var(--color-text);
        font-family: 'Verdana', sans-serif;
    }
    header, footer {
        text-align: center;
        padding: 20px;
    }
    nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 20px;
        background: rgba(255,255,255,0.05);
    }
    .nav-btn {
        padding: 8px 16px;
        border: 2px solid var(--color-white);
        color: var(--color-white);
        text-decoration: none;
        font-family: 'Comic Sans MS', cursive;
        transition: 0.3s;
    }
    .nav-btn:hover {
        background: var(--color-accent);
        color: #000;
        border-color: var(--color-accent);
    }
    #hero-container {
        max-width: 800px;
        margin: 40px auto;
        border: 4px solid var(--color-white);
        padding: 5px;
    }
    .hero-img {
        width: 100%;
        height: 500px;
        object-fit: cover;
        display: block;
    }
    h1 {
        font-family: 'Comic Sans MS', cursive;
        color: var(--color-accent);
        text-align: center;
    }
    footer {
        font-family: 'Times New Roman', serif;
        border-top: 2px solid var(--color-white);
        margin-top: 40px;
    }
    @media (max-width: 768px) {
        .hero-img { height: 300px; }
        .nav-btn { width: 40%; }
    }