/* Basic CSS Reset */
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%; /* Ensure html takes full viewport height */
overflow-x: initial;
box-sizing: border-box;
}
body {
margin: 0;
width: 100%;
overflow-x: clip; /* Changed from initial, but might be better as inherit or initial */
font-family: var(--font-body); /* Updated to use variable */
background-color: #020602; /* Your original dark background */
color: var(--text-light);
line-height: 1.8;
position: relative; /* For ambient haze if still used */
padding-top: 60px; /* Adjusted based on new navbar height */
display: flex; /* Added for sticky footer */
flex-direction: column; /* Added for sticky footer */
min-height: 100vh; /* Added for sticky footer */
}
*, *:before, *:after {
box-sizing: inherit;
}
/* CSS Variables - These are defined in the of your HTML now, */
/* but good to have them here too for standalone CSS editing or fallback. */
/* If defined in HTML :root, they are globally available. */
:root {
--primary-green: #2E7D32;
--secondary-green: #1B5E20;
--accent-green-glow-rgba: rgba(46, 125, 50, 0.7);
--accent-green-border-rgba: rgba(46, 125, 50, 0.5);
--accent-green-bg-subtle-rgba: rgba(46, 125, 50, 0.15);
--text-light: #C8C8C8;
--text-muted: #A0A0A0;
--metallic-base: #1A1A1A;
--metallic-highlight: #2C2C2C;
--metallic-shadow: #101010;
--metallic-sheen-light: rgba(200, 200, 200, 0.02);
--metallic-item-border: rgba(80, 80, 80, 0.3);
--background-dark-block-metallic: linear-gradient(to bottom, var(--metallic-highlight) 0%, var(--metallic-shadow) 100%);
--background-item-metallic: linear-gradient(170deg, var(--metallic-highlight) 5%, var(--metallic-base) 60%, var(--metallic-shadow) 100%);
--background-overlay: rgba(22, 22, 22, 0.88);
--background-overlay-hero: rgba(12, 12, 12, 0.85);
/* Added from inline style in HTML */
--font-header: 'Orbitron', sans-serif;
--font-body: 'Roboto', sans-serif;
--text-light-secondary: #B0B0B0;
}
/* Old Sticky Top Banner Styles - REMOVE OR COMMENT OUT if using new Bootstrap navbar */
/*
.top-banner {
background: linear-gradient(to bottom, rgba(26, 26, 26, 0.95) 0%, rgba(16, 16, 16, 0.92) 100%);
padding: 15px 0;
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
border-bottom: 1px solid rgba(0,0,0,0.5);
transition: background-color 0.3s ease;
margin-top: 0;
}
.banner-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.banner-logo {
font-family: 'Orbitron', sans-serif;
color: var(--primary-green);
font-size: 1.8em;
text-decoration: none;
font-weight: 700;
text-shadow: 0 0 8px var(--accent-green-glow-rgba);
}
.banner-logo:hover {
color: #FFFFFF;
text-shadow: 0 0 12px rgba(46, 125, 50, 1);
}
.banner-links {
display: flex;
gap: 30px;
}
.banner-button {
font-family: 'Orbitron', sans-serif;
color: var(--text-light);
background-color: var(--accent-green-bg-subtle-rgba);
padding: 8px 18px;
text-decoration: none;
border-radius: 20px;
font-size: 0.95em;
font-weight: bold;
border: 1px solid var(--accent-green-border-rgba);
transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
white-space: nowrap;
}
.banner-button:hover {
background-color: var(--primary-green);
color: #0A0A0A;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
}
*/
/* Body Styles & Adjustments - Some of these are now in inline