:root { --color-background: #2a2a2a; --color-surface: #4a4a4a; --color-text: #c0c0c0; --color-brown: #6b4f4f; --color-olive: #556b2f; --color-accent: #cc2200; --font-heading: 'Impact', 'Arial Black', sans-serif; --font-body: 'Arial', 'Helvetica', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--color-background); color: var(--color-text); line-height: 1.6; background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), radial-gradient(circle, var(--color-surface) 1px, transparent 1px); background-size: 100%, 3px 3px; } .container { max-width: 1000px; margin: 0 auto; padding: 1rem 2rem; } a { color: var(--color-olive); text-decoration: none; transition: color 0.3s ease; } a:hover { color: #8f9779; } h1, h2, h3 { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 2px; color: #e0e0e0; border-bottom: 3px solid var(--color-brown); padding-bottom: 0.5rem; margin-bottom: 1rem; } article ul { list-style: none; padding-left: 1rem; } article li { padding: 0.25rem 0; border-left: 2px solid var(--color-accent); padding-left: 1rem; margin-bottom: 0.5rem; } /* Header & Footer */ .site-header, .site-footer { background-color: rgba(0,0,0,0.4); border-bottom: 2px solid var(--color-brown); } .site-header .container, .site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .logo { font-size: 2rem; border: none; } .main-nav a, .footer-nav a { padding: 0.5rem 1rem; font-family: var(--font-heading); letter-spacing: 1px; text-transform: uppercase; } .site-footer { border-top: 2px solid var(--color-brown); border-bottom: none; margin-top: 2rem; padding: 1rem 0; font-size: 0.9em; text-align: center; } .site-footer p { width: 100%; text-align: center; margin-top: 1rem; } /* Game Section */ #game-section { text-align: center; } .game-container { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio */ background-color: #000; border: 4px solid var(--color-surface); margin-bottom: 1rem; } #game-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Buttons */ .btn { display: inline-block; background-color: var(--color-brown); color: #fff; padding: 12px 24px; border: 2px solid var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; transition: all 0.2s ease-in-out; } .btn:hover { background-color: var(--color-accent); border-color: #ff4411; } /* Share Section */ .share-buttons { display: flex; gap: 1rem; justify-content: center; } .share-btn { display: flex; align-items: center; gap: 0.5rem; } .share-btn svg { width: 24px; height: 24px; } /* Video Section */ .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; border: 4px solid var(--color-surface); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Form */ .contact-form { display: flex; flex-direction: column; gap: 1rem; background-color: rgba(0,0,0,0.2); border: 2px solid var(--color-surface); padding: 1.5rem; } .form-group { display: flex; flex-direction: column; } .form-group label { margin-bottom: 0.5rem; font-family: var(--font-heading); letter-spacing: 1px; } .form-group input, .form-group textarea { background-color: var(--color-background); border: 2px solid var(--color-surface); color: var(--color-text); padding: 0.75rem; font-size: 1rem; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); } /* Responsive */ @media (max-width: 768px) { .site-header .container { flex-direction: column; } .main-nav { margin-top: 1rem; } .footer-nav { flex-direction: column; align-items: center; gap: 0.5rem; } }