/* ############################################################################################################################################################################ */ /* ############################################################################################################################################################################ */ /* Glyh Entertainment Public Website */ /* • Page: Body Stylesheet (Body.css) */ /* • Description: Global body and main content area styles, dark theme foundation, and responsive layout across all supported resolutions */ /* • Location: /css/body.css */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* • Version: v0.0.01 α */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* • Project Start Date: 2026-04-07 */ /* • α Release Date: 2026-04-XX */ /* • β Release Date: 2026-04-XX */ /* • Last updated: 2026-05-07 @ 1851 EDT */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* • Author: by Conner Rhoads */ /* • Official Site: www.glyphentertainment.com */ /* ############################################################################################################################################################################ */ /* ############################################################################################################################################################################ */ /* ============================================================================================================================================================================ */ /* BODY STYLESHEET */ /* ============================================================================================================================================================================ */ body { margin: 0; padding: 0; background: #1a1a1a; color: #e0e0e0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; } main { background: #2a2a2a; border-radius: 12px; color: #e0e0e0; } /* ============================================================================================================================================================================ */ /* SPAN HEADER IMAGE – Full-width with 5% gaps, rounded corners, drop shadow */ /* ============================================================================================================================================================================ */ .span-header-image { width: 100%; padding-left: 5%; padding-right: 5%; box-sizing: border-box; margin: 0 auto; display: block; } /* Make the link fill the container */ .span-header-image a { display: block; text-decoration: none; } /* Image styling */ .span-header-image img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Hover effect */ .span-header-image a:hover img { transform: scale(1.01); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85); } /* ============================================================================================================================================================================ */ /* MOBILE RESOLUTIONS (Portrait Mode) */ /* ============================================================================================================================================================================ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MOBILE LDPI | 240x320 | 3:4 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 0px) and (max-width: 240px) { main { margin-left: 15px; margin-right: 15px; margin-top: 20px; margin-bottom: 20px; padding: 20px 15px; max-width: 100%; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MOBILE MDPI | 240x320 | 3:4 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 241px) and (max-width: 320px) { main { margin-left: 20px; margin-right: 20px; margin-top: 25px; margin-bottom: 25px; padding: 25px 20px; max-width: 100%; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MOBILE HDPI | 320x480 | 2:3 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 321px) and (max-width: 480px) { main { margin-left: 30px; margin-right: 30px; margin-top: 25px; margin-bottom: 25px; padding: 30px 25px; max-width: 100%; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MOBILE XHDPI | 480x800 | 3:5 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 640px) { main { margin-left: 30px; margin-right: 30px; margin-top: 25px; margin-bottom: 25px; padding: 35px 30px; max-width: 100%; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MOBILE XXHDPI | 720x1280 | 9:16 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 641px) and (max-width: 720px) { main { margin-left: 30px; margin-right: 30px; margin-top: 25px; margin-bottom: 25px; padding: 35px 30px; max-width: 100%; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MOBILE XXXHDPI | 1080x1920 | 9:16 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 801px) and (max-width: 1023px), (min-width: 1025px) and (max-width: 1080px) { main { margin-left: 40px; margin-right: 40px; margin-top: 30px; margin-bottom: 30px; max-width: 1220px; padding: 40px; box-sizing: border-box; } } /* ============================================================================================================================================================================ */ /* LEGACY RESOLUTIONS */ /* ============================================================================================================================================================================ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* LEGACY VGA | 640x480 | 4:3 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 640px) { main { margin-left: 30px; margin-right: 30px; margin-top: 25px; margin-bottom: 25px; padding: 35px 30px; max-width: 100%; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* LEGACY SVGA | 800x600 | 4:3 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 800px) and (max-width: 800px) { main { margin-left: 40px; margin-right: 40px; margin-top: 30px; margin-bottom: 30px; padding: 40px 35px; max-width: 100%; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* LEGACY XVGA | 1024x768 | 4:3 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1024px) { main { margin-left: 50px; margin-right: 50px; margin-top: 30px; margin-bottom: 30px; padding: 40px 35px; max-width: 100%; box-sizing: border-box; } } /* ============================================================================================================================================================================ */ /* MODERN RESOLUTIONS */ /* ============================================================================================================================================================================ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 720p | 1280x720 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 1081px) and (max-width: 1280px) { main { margin-left: 350px; margin-right: 350px; margin-top: 40px; margin-bottom: 40px; max-width: 1220px; padding: 40px 35px; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 1080p | 1920x1080 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 1281px) and (max-width: 1920px) { main { margin-left: 350px; margin-right: 350px; margin-top: 50px; margin-bottom: 50px; max-width: 1220px; padding: 50px; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 2k | 2560x1280 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 1921px) and (max-width: 2559px) { main { margin-left: 380px; margin-right: 380px; margin-top: 50px; margin-bottom: 50px; max-width: 1400px; padding: 45px 40px; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 4k | 3840x1400 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 2562px) and (max-width: 3439px), (min-width: 3442px) and (max-width: 3839px) { main { margin-left: 400px; margin-right: 400px; margin-top: 50px; margin-bottom: 50px; max-width: 1600px; padding: 50px 40px; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 6k | 6144x3456 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 3841px) and (max-width: 5119px), (min-width: 5121px) and (max-width: 6144px) { main { margin-left: 450px; margin-right: 450px; margin-top: 50px; margin-bottom: 50px; max-width: 1800px; padding: 60px 50px; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 8k | 7680x4320 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 6145px) and (max-width: 7680px) { main { margin-left: 500px; margin-right: 500px; margin-top: 50px; margin-bottom: 50px; max-width: 2000px; padding: 70px 60px; box-sizing: border-box; } } /* ============================================================================================================================================================================ */ /* ULTRAWIDE RESOLUTIONS */ /* ============================================================================================================================================================================ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE WFHD | 2560x1080 | 21:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 2560px) and (max-width: 2560px) { main { margin-left: 500px; margin-right: 500px; margin-top: 50px; margin-bottom: 50px; max-width: 1800px; padding: 60px 50px; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE FHD | 4608x1920 | 21:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 4608px) and (max-width: 4608px) { main { margin-left: 700px; margin-right: 700px; margin-top: 50px; margin-bottom: 50px; max-width: 2000px; padding: 70px 60px; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE UWQHD | 3440x1440 | 21:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 3440px) and (max-width: 3440px) { main { margin-left: 500px; margin-right: 500px; margin-top: 50px; margin-bottom: 50px; max-width: 1800px; padding: 60px 50px; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE WQHD+ | 3840x1600 | 21:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 3840px) and (max-width: 3840px) { main { margin-left: 500px; margin-right: 500px; margin-top: 50px; margin-bottom: 50px; max-width: 2000px; padding: 70px 60px; box-sizing: border-box; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE UW5K | 5120x2160 | 21:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 5120px) and (max-width: 5120px) { main { margin-left: 700px; margin-right: 700px; margin-top: 50px; margin-bottom: 50px; max-width: 2200px; padding: 80px 70px; box-sizing: border-box; } } /* ============================================================================================================================================================================ */ /* END STYLESHEET */ /* ============================================================================================================================================================================ */