@font-face { font-family: "Monocraft"; src: local("Monocraft"); src: url("https://www.xbazzi.com/Monocraft.ttf") format("truetype"); } :root { --background: rgba(150, 150, 150, 0.95); --main-color:#bf00ff; --main-color-dk:#441261; --accent-1: #0000ff; --accent-2:#00FFFF; --content-spacing:5px; --background-img:url('../img/bg-beach4.png'); --banner:url('../img/xbazzi_logo2.png'); --banner-footer: url('../img/tiny-bar-cyan.png'); --titleBars:url('../img/title-bars-win95.png'); --text-color: black; --text-bg: #00FFFF; --title-text-color: white; --text-shadow-custom: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; --link-color:var(--accent-1); --border:2px solid black; --arrows:url('../assets/images/arrow.png'); } html, body { margin: 0; box-sizing: border-box; font-family: "Monocraft"; } body { background-color: black; color: var(--text-color); background-attachment: scroll; z-index: 1; } .topbar { background-image:var(--banner); background-size: 100% 100%; height:150px; margin-bottom:var(--content-spacing); /* border:var(--border); */ } p.blog { font-weight: bold; padding: 5px; /* Add some space around the text */ display: inline-block; /* Ensure the background only covers the text */ } #container, .topbar img { max-width: 850px; margin: 0 auto; } #container a { color:var(--link-color); } .topbar img { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; } #container { border-top: none; position: relative; min-height: 100vh; width: 100%; z-index: 1; } /* Revised Pseudo-element Styles */ body::before { position: fixed; top: 0; left: 0; right: 0; bottom: 0; content: ''; background-image: var(--background-img); background-size: 100% 100%; /* Ensure the image covers the entire element */ background-repeat: no-repeat; /* Prevent the image from repeating */ opacity: 0.8; /* Adjust the transparency */ z-index: -1; } #flex { display: flex; max-width:850px; } aside { font-weight: bold; width: 25%; margin: 5px; /* Add some space around the text */ margin-left:var(--content-spacing); border-left:var(--border); background-color: var(--background); } .sidebar-title { background-image:var(--titleBars); font-weight:bold; font-size: 25px; border:var(--border); color: var(--title-text-color); text-shadow: var(--text-shadow-custom); } .title { background-image:var(--titleBars); background-size: 100% 100%; padding: 5px; font-weight:bold; font-size: 25px; border:var(--border); color: var(--title-text-color); text-shadow: var(--text-shadow-custom); /*position: sticky;*/ } .navclass { opacity: 1.0; } .wrapper { opacity: 0.9; } main { width: 74%; } nav { /*position:sticky;*/ top:20px; } nav ul { /*list-style-image:var(--arrows);*/ margin-left:0; padding-left:30px; } nav ul li a { color:var(--accent-1); } .content { padding:25px; opacity: 1; background-color: var(--background); font-size: 20px; } footer { background-image: var(--banner-footer); height:30px; margin-bottom:var(--content-spacing); margin-top:var(--content-spacing); text-align:center; } /* button styles */ button { background-image:var(--titleBars); border:var(--border); color:white; margin-bottom:10px; } th { color:var(--accent-2); } #linkNum { color:var(--accent-2); font-weight:bold; } h2 { color:var(--accent-2); } #themeDiv { position: sticky; top: 550px; } @media only screen and (max-width: 640px) { nav ul { list-style-image:none; list-style-type:none; } #flex { flex-wrap:wrap; } main { width:100%; order:2; } aside { display:block; width:50%; order:1; margin-left:0; } nav ul { display:flex; flex-wrap:wrap; } nav ul li { padding-right:10px; } nav ul > ul { display:none; } } @media only screen and (max-height: 640px) { nav ul > ul { display:none; } }