/* ========================================================== ROOT / GLOBAL (shared by all pages) ========================================================== */ :root { --header-image: url("/images/Mountebank.jpg"); --content: #3e3946; } * { box-sizing: border-box; } body { font-family: 'Nunito', sans-serif; margin: 0; background-color: #040407; color: #ffeaea; /* If you use a variable for background-image, set it per page */ } /* ========================================================== PAGE-SPECIFIC BACKGROUNDS - use or ========================================================== */ body.page1 { background-image: url('/images/3.PNG'); background-size: cover; background-position: center; background-repeat: no-repeat; } body.page2 { background-image: url('/images/roadkill.PNG'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* ========================================================== LAYOUT / HEADER / NAV ========================================================== */ #container { width: 700px; margin: auto; padding-bottom: 10px; } #leftSidebar { flex: 0 0 230px; font-family: 'Courier New', Courier, monospace; overflow: visible; word-wrap: break-word; overflow-wrap: break-word; } #leftSidebar li { padding-top: 10px; } #leftSidebar li a { color: #e8d2e9; font-weight: 500; text-decoration: none; } #leftSidebar li a:hover { color: #a81111; text-decoration: underline; } #flex { display: flex; gap: 0px; flex-direction: row; } #header { width: 100%; background-color: #000000; height: 130px; background-image: var(--header-image); background-size: 33%; background-position: center; border: 1px solid #ff0000; } #navbar { height: 40px; background-color: #000000; width: 100%; border: 1px solid #ff0000; } #navbar ul { display: flex; padding: 0; margin: 0; list-style-type: none; justify-content: space-evenly; } #navbar li { padding-top: 10px; } #navbar li a { color: #e8d2e9; font-weight: 800; text-decoration: none; } #navbar li a:hover { color: #a81111; text-decoration: underline; } /* ========================================================== IMAGES / LOGO ========================================================== */ .logo { display: block; margin: 0 auto; padding: 0; } .gif { float: left; width: 10%; height: auto; clip-path: inset(0% 0% 0% 0%); padding-right: 0; margin-right: 20px; } .new2 { max-width: 40%; width: 300px; height: auto; display: block; margin: 0 auto; position: relative; top: -30px; /* move up slightly */ } #DarkCrystal { display: block; margin: 0 auto; } /* ========================================================== CONTENT AREAS (shared defaults) ========================================================== */ #main1 { background-color: #000000; flex: 1 1 auto; padding: 20px; order: 1; border: 1px solid #ff0000; padding-bottom: 10px; padding-top: 1px; height: 380px; font-family: 'Syne Mono', monospace; box-sizing: border-box; border-radius: 0px; margin: 0; } #main2 { background-color: #000000; flex:; padding: 20px; order: 1; border: 1px solid #ff0000; padding-bottom: 10px; padding-top: 1px; height: 800px; overflow-y: auto; box-sizing: border-box; min-width: 0; /* prevents overflow from children in flex */ } /* Sidebar / boxes */ aside { background-color: transparent; width: 200px; font-size: smaller; height: 400px; /* let content define the height */ /* height: 300px; set a fixed shorter height if desired */ display: flex; flex-direction: column; } .box { background-color: #000000; border: 1px solid #ff0000; padding-top: 10px; height: auto; flex: 1; margin-bottom: 0; box-sizing: border-box; } /* small top bar */ #topBar { width: 100%; height: 30px; padding: 10px; font-size: smaller; background-color: #a71c4a; } /* scrolling ticker */ .scrolling-textbox { width: auto; height: 40px; overflow: hidden; background: black; position: relative; display: flex; align-items: center; font-family: 'Syne Mono', monospace; } .scrolling-text { display: inline-block; white-space: nowrap; padding-left: 100%; animation: scroll 20s linear infinite; color: rgb(255, 255, 0); } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* ========================================================== FOOTER (shared) ========================================================== */ footer { background-color: #000000; width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px; border-top: 1px solid #ff0000; position: relative; margin-top: -20px; z-index: 5; } .footer-text { color: #fff; font-weight: bold; font-size: 10px; } .footer-gif { height: 50px; width: auto; display: inline-block; vertical-align: middle; } /* ========================================================== TYPOGRAPHY ========================================================== */ h1 { font-family: "Tektur", sans-serif; font-size: 70px; text-align: center; font-style: italic; margin: 0; padding: 3; color: rgb(184, 95, 95); } h2 { font-size: 25px; font-family: "Tektur", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-variation-settings: "wdth" 75; } #p1 { font-family: "Almendra", serif; font-weight: 800; font-style: italic; font-size: 20px; color: rgb(138, 111, 111); display: block; margin: 0 auto; text-align: center; } #p1 a { color: inherit; text-decoration: none; } #p1:hover, #p1:hover a { color: #a81111; text-decoration: underline; } #p1 a:hover { color: #a81111; text-decoration: underline; } #p2 { font-family: 'Jacquard 12 Charted', serif; font-size: 20px; color: rgb(116, 86, 86); display: block; margin: 0 auto; text-align: center; } #p3 { font-family: "Almendra", serif; font-weight: 800; font-style: italic; font-size: 20px; color: rgb(138, 111, 111); display: block; margin: 0 auto; text-align: center; } p { font-family: 'EB Garamond', serif; font-size: 18px; padding-top: 10px; } .video-intro { display: block; position: relative; top: -18px; margin-bottom: 8px; } /* small font helper classes */ .almendra-regular { font-family: "Almendra", serif; font-weight: 400; font-style: normal; } .almendra-bold { font-family: "Almendra", serif; font-weight: 700; font-style: normal; } .almendra-regular-italic { font-family: "Almendra", serif; font-weight: 400; font-style: italic; } .almendra-bold-italic { font-family: "Almendra", serif; font-weight: 700; font-style: italic; } /* ========================================================== ARCHIVE (Archive.html) — scoped rules (body.page2) ========================================================== */ /* make main2 fill more of the viewport on archive and be scrollable */ body.page2 #main2 { height: calc(100vh - 310px); /* tweak 220px to match header+footer heights */ min-height: 510px; overflow-y: auto; } /* make embedded videos responsive inside archive main */ body.page2 #main2 iframe, body.page2 #main2 video { width: 100%; max-width: 100%; display: block; margin-top: -20px } /* archive-specific box sizing */ body.page2 .box { max-height: ; overflow-y: auto; } /* optional large class for archive boxes */ body.page2 .box.large { height: 600px; } /* ========================================================== MEDIA QUERIES ========================================================== */ @media only screen and (max-width: 780px) { #flex { flex-direction: column; } aside { width: 100%; order: 3; } body.page1 #main1, body.page1 #main2, body.page2 #main2 { width: 100%; height: auto; } } @media only screen and (max-width: 300px) { #navbar ul { flex-wrap: wrap; } }