/* 🌎 Global.css - The central stylesheet for the website. This file defines the core styles (like colors, fonts, and layouts) that apply across all pages, keeping the design consistent and easy to update. */ /* Reset - Removes default browser styles. Sets all elements to start with a clean base for predictable design. Every single thing on the page is an element (like text or buttons). Every element has space around it β€” this is called margin. Every element has space inside it β€” this is called padding. */ * { /* The little asterisk (*) is a CSS superhero! πŸ¦Έβ€β™€οΈπŸ¦Έ It targets EVERYTHING on the page - here, we’re using it to wipe out browser defaults. */ /* --- Size It --- */ /* By default, browsers use content-box, where width and height only include the content, excluding padding and borders. With border-box, the width and height include content, padding, and borders, making layout calculations more predictable. */ box-sizing: border-box; /* --- Space It --- */ /* Setting these to 0 removes any space added to the elements by the browser. */ margin: 0; padding: 0; } /* Root - a CSS pseudo-class targeting the document's root (the element in HTML). It defines custom properties (variables) like colors and fonts, reusable across the document. */ :root { /* --- Size It --- */ /* Root font size: Sets the baseline for all rem units across the site. Default is 16px in most browsers, but we define it explicitly for consistency and control, ensuring responsive scaling starts from a known value. */ font-size: 16px; /* --- Style It --- */ /* Core Color Palette 🎨 Colors are defined using 6-digit hex codes (#RRGGBB), blending red, green, and blue. Examples: #000000 (black), #FFFFFF (white) (can be shortened to #000 and #FFF). Hex Code Shorthand A 6-digit hex color (#RRGGBB) can be shortened to 3 digits (#RGB) when each pair of red, green, and blue digits is identical (e.g., #FF0000 β†’ #F00, #FFFFFF β†’ #FFF). If pairs differ (e.g., #4A90E2), use the full 6 digits. 🌈 Use https://coolors.co/ to explore palettes. Dark Mode Default πŸŒ‘ Reduces eye strain, enhances focus, and saves battery on OLED screens. Light mode can be toggled as an alternative. */ /* πŸŒ‘ Dark Theme Agnostic Variables */ --primary-color: #0D1B2A; --secondary-color: #2A3F54; --background-color: #2D5A8E; --text-color: #FFF; --accent-color: #C9C2BA; --header-color: #9CBB80; --subheader-color: #FACAA1; } /* 🌞 Light Theme Agnostic Variables - These override default colors only in light mode. */ .light-theme { --primary-color: #3A80D2; --secondary-color: #1E5A96; --background-color: #F5F7FA; --text-color: #2C3E50; --accent-color: #FFF; --header-color: #C00; --subheader-color: #E23D28; } /* Body - The root element for page content. Defines base styling (fonts, colors) and layout structure for flexible content arrangement. */ body { /* --- Size It --- */ /* Ensures the body is at least as tall as the viewport, allowing it to grow if content overflows. */ min-height: 100vh; /* --- Space It --- */ /* Establishes a flex container to stack children (e.g., nav, main, footer) vertically. Enables flexible alignment and stretching, unlike default block stacking. */ display: flex; flex-direction: column; /* --- Style It --- */ /* Sets a modern font stack with fallbacks and uses custom variables for theme colors. */ font-family: 'Space Grotesk', system-ui, sans-serif; color: var(--text-color); background-color: var(--background-color); } /* Main Page Heading */ h1 { /* --- Size It --- */ /* 2.5rem = 40px (16px root Γ— 2.5) */ font-size: 2.5rem; /* --- Space It --- */ /* Adds space below the heading (1.618rem β‰ˆ 26px) using the golden ratio for aesthetic harmony (and bc 6/18 is my bday 😎). */ margin-bottom: 1.618rem; /* --- Style It --- */ font-family: Righteous, system-ui, sans-serif; color: var(--header-color); text-align: center; } /* Page Subheading */ h2 { /* --- Size It --- */ /* 1.5rem = 24px (16px root Γ— 1.5) */ font-size: 1.5rem; /* --- Space It --- */ /* Adds 1rem (16px) space above and below for breathing room between sections. */ margin-top: 1rem; margin-bottom: 1rem; /* --- Style It --- */ font-family: Righteous, system-ui, sans-serif; font-weight: 700; color: var(--subheader-color); } /* Navigation Bar */ nav { /* --- Size It --- */ /* Spans the full width of the page */ width: 100%; /* --- Space It --- */ /* Enables flexbox to control layout of nav items and toggle */ display: flex; /* Adds spacing inside the nav bar */ padding: 1rem; /* Centers the nav items and toggle horizontally within the nav bar */ justify-content: center; /* Centers inline or inline-block content (e.g., link text) within flex items */ text-align: center; /* --- Style It --- */ color: var(--accent-color); background-color: var(--primary-color); } /* Navigation Bar Links πŸ”— */ nav a { /* --- Space It --- */ /* Adds 0.3rem spacing on left/right for nav links, with margin-inline as modern fallback */ margin-left: 0.3rem; margin-right: 0.3rem; margin-inline: 0.3rem; /* Adds 0.5rem padding on all sides of links */ padding: 0.5rem; /* --- Style It --- */ color: var(--accent-color); /* Links are not underlined */ text-decoration: none; /* Rounds link corners, noticeable when hovering links */ border-radius: 0.3rem; /* --- Chaos It --- */ /* Enables smooth background color change on hover */ transition: background-color 0.3s; } /* Navigation Hover Effect */ nav a:hover { /* --- Style It --- */ background-color: var(--secondary-color); } /* πŸ” Menu */ .hamburger { /* --- Size It --- */ /* 3rem = 48px (16px root Γ— 3) */ font-size: 3rem; /* --- Space It --- */ /* Shows the hamburger icon on mobile screens */ display: block; } .nav-menu { /* Hides the navigation menu on mobile screens */ display: none; /* --- Style It --- */ /* Removes the default bullet points from the navigation list */ list-style: none; } .nav-menu.active { /* --- Space It --- */ /* Shows the navigation menu as a flex container on mobile */ display: flex; /* Stacks navigation items vertically when active on mobile */ flex-direction: column; /* Adds vertical space between nav items */ gap: 1rem; } /* Footer Styling 🐾 */ footer { /* --- Size It --- */ /* Spans the full width of the page */ width: 100%; /* --- Space It --- */ /* Pins footer to bottom (requires body: display: flex, min-height: 100vh, flex-direction: column) */ margin-top: auto; /* Inner padding */ padding: 1.5rem; /* Centers the footer text */ text-align: center; /* --- Style It --- */ color: var(--accent-color); background-color: var(--primary-color); } /* Sun/Moon Toggle πŸŒžπŸŒ™ */ #sun-moon-toggle { /* --- Size It --- */ /* 3em = 3 Γ— 48px = 144px */ font-size: 3em; /* --- Space It --- */ padding: 0.5rem 1.5rem; /* --- Style It --- */ /* Wipes out any background, so the toggle emoji blends in with the nav bar */ background: none; /* Removes the border; uncomment to see the toggle’s padding and margin during design */ border: none; /* --- Chaos It --- */ cursor: pointer; transition: transform 0.3s ease; } /* Grows the emoji to 1.2x size scaled evenly from the center */ #sun-moon-toggle:hover { /* --- Chaos It --- */ transform: scale(1.2); } /* Yin Yang Toggle ☯️ */ #yin-yang-toggle { /* --- Size It --- */ /* 3em = 3 Γ— 48px = 144px */ font-size: 3em; /* --- Space It --- */ padding: 0.5rem 1.5rem; /* --- Style It --- */ /* Wipes out any background, so the toggle emoji blends in with the nav bar */ background: none; /* Removes the border; uncomment to see the toggle’s padding and margin during design */ border: none; /* --- Chaos It --- */ cursor: pointer; transition: transform 0.3s ease; } /* Grows the emoji to 1.2x size scaled evenly from the center */ #yin-yang-toggle:hover { /* --- Chaos It --- */ transform: scale(1.2); } /* Smooth Theme Transitions Change colors smoothly over 0.3s when toggling the light/dark mode button. */ body, h1, h2, nav, footer, .hamburger { /* --- Chaos It --- */ transition: background-color 0.3s, color 0.3s; } /* πŸ’» Tablet/Desktop Styles Applies above 768px (tablet portrait width, e.g., iPad). */ @media (width >= 769px) { h1 { /* --- Size It --- */ /* 3.5rem = 56px (16px root Γ— 3.5) */ font-size: 3.5rem; } /* Main Navigation List */ .nav-menu { /* --- Space It --- */ /* Arranges nav items in a horizontal row */ display: flex; /* Adds consistent spacing between nav items */ gap: 1rem; /* Vertically centers nav items within the nav bar */ align-items: center; } /* Hides the hamburger menu on desktop */ .hamburger { display: none; } #sun-moon-toggle { /* --- Size It --- */ /* 2em = 2 Γ— 32px = 64px */ font-size: 2em; } #yin-yang-toggle { /* --- Size It --- */ /* 2em = 2 Γ— 32px = 64px */ font-size: 2em; } }