/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your HTML content. To learn how to do something, just try searching Google for questions like "how to change link color." */ :root { --header-image: url('https://media.tenor.com/R_62J7UGkxQAAAAM/storm-lightning.gif'); --body-bg-image: url(''); --content: #43256E; } @font-face { font-family: Nightcore Demo; src: url(' https://alastonx.neocities.org/Fonts/Nightcore%20Demo.ttf'); } @font-face { font-family: DraculitoS; src: url('https://alastonx.neocities.org/Fonts/DraculitoS_.ttf'); } @font-face { font-family: Nunito; src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf') format("truetype"); font-weight: bold; } @font-face { font-family: Nunito; src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf'); font-style: italic; } @font-face { font-family: ugly handwriting; src: url('https://alastonx.neocities.org/Fonts/Mom%C2%ABt___.ttf'); } body { font-family: 'ugly handwriting', sans-serif; margin: 0; background-color: #08031A; background-image: url(' https://i.pinimg.com/1200x/00/00/54/00005495284dd2557efc559195fba7c0.jpg'); background-repeat: repeat; background-attachment: fixed; background-size: contain; color: #fceaff; cursor: url(' http://www.rw-designer.com/cursor-extern.php?id=148581'), auto; } } * { box-sizing: border-box; } #container { max-width: 900px; margin: 0 auto; border: 5px double white; box-sizing: border-box; } #container a { color: white; font-weight: bold; } #header { width: 100%; background-color: black; height: 150px; background-image: var(--header-image); background-size: cover; } ::selection { background-color: #ffffff; /* The color the "box" turns */ color: #000000; /* The color the actual text turns */ } /* Scroller CSS */ .top-bar-scroller { width: 100%; background:linear-gradient(to bottom, #5e5e5e, black); overflow: hidden; white-space: nowrap; display: block; clear: both; height: 70px; } .stamp-track { display: flex; align-items: center; width: max-content; animation: marquee 100s linear infinite; } .stamp-track img { height: 60px; margin: 7px 10px; flex-shrink: 0; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } #flex { display: flex; flex-wrap: nowrap; } aside { background-color: black; width: 200px; padding: 20px; font-size: smaller; } main { background-color: black; flex: 1; padding: 20px; order: 2; } #leftSidebar { order: 1; } #rightSidebar { order: 3; } footer { background-color: black; width: 100%; height: 40px; padding: 10px; text-align: center; } h1, h2, h3 { color: #BBBCB6; } .box { background-color: transparent; border: 1px outset #000; padding: 10px; height: 400px; /* Sets how tall the box is before it scrolls */ overflow-y: auto; /* Adds the scrollbar only when needed */ scrollbar-width: thin; /* Makes the scrollbar look sleeker in Firefox */ scrollbar-color: #FFF #08031A; } /* Styling the scrollbar for Chrome, Edge, and Safari */ .box::-webkit-scrollbar { width: 8px; } .box::-webkit-scrollbar-track { background: #08031A; /* Matches your body background */ } .box::-webkit-scrollbar-thumb { background: #FFF; /* Matches your pink 'strong' text */ border-radius: 10px; } .box::-webkit-scrollbar-thumb:hover { background: #fceaff; /* Lightens when you hover over it */ } #topBar { width: 100%; height: 50px; padding: 10px; font-size: smaller; background-color: #13092D; } @media only screen and (max-width: 800px) { #flex { flex-wrap: wrap; } aside { width: 100%; } main { order: 1; } #leftSidebar { order: 2; } #rightSidebar { order: 3; } #navbar ul { flex-wrap: wrap; } } #rightSidebar .box { background-image: url(' https://i.pinimg.com/736x/aa/13/02/aa1302fbacdecfcb4693fc9782dcba93.jpg') !important; background-size: cover !important; } #leftSidebar .box { background-image: url('https://i.pinimg.com/736x/15/ac/06/15ac06ad685ff918122f68c5ee83272d.jpg') !important; background-size: cover !important; } /* 1. Define the shake movement */ @keyframes shake-animation { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } /* Combined H1 Rules */ h1 { display: inline-block; animation: shake-animation 0.5s; animation-iteration-count: infinite; font-family: 'Nightcore Demo', sans-serif; font-size: 50px; margin-bottom: 10px; text-shadow: 2px 2px 4px gray; } h2, h3 { font-family: 'DraculitoS', sans-serif; } .main-body-image { float: right; /* Pushes image to the right */ margin-left: 15px; /* Adds space so text doesn't touch the image */ margin-bottom: 10px; /* Adds space below the image */ max-width: 200px; /* Adjust this to change the image size */ border: 0px solid #ED64F5; /* Optional: adds a pink border to match Alaston */ height: auto; } /* Fix to keep the float from "leaking" out of the main area */ main::after { content: ""; display: table; clear: both; } /* This targets every link on your page */ a:hover { color: #000000 !important; /* Turns the text black */ text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff; /* Creates the white outer glow */ transition: 0.3s; /* Makes the glow fade in smoothly */ text-decoration: none; /* Keeps it clean looking */ cursor: url(' https://alastonx.neocities.org/Images/frame_1_delay-0.2s.gif'), pointer !important; } /* This keeps images from overflowing the sidebar boxes */ .box img { max-width: 100%; /* Forces the image to be no wider than the box */ height: auto; /* Keeps the image from looking squished */ display: block; /* Prevents weird spacing at the bottom */ margin: 5px auto; /* Optional: centers the image and adds a little space */ } #song-widget { background-color: #000; border: 4px double gray; padding: 10px; width: 300px; text-align: center; font-family: 'Courier New', Courier, monospace; color: gray; margin: 10px auto; } /* Styling the "Now Playing" text */ #song-info { font-size: 10px; letter-spacing: 2px; margin-bottom: 8px; text-transform: uppercase; } /* This targets the actual browser player */ .custom-audio { width: 100%; height: 35px; /* This version makes the player gray but keeps the icons/text dark and sharp */ filter: sepia(100%) brightness(90%) contrast(90%) grayscale(100%); outline: none; } /* Optional: a subtle glow effect */ #song-widget:hover { box-shadow: 0 0 10px gray; } #side-nav { display: flex; flex-direction: column; /* This stacks them vertically */ gap: 5px; /* Adds space between buttons */ padding: 10px 5px; } .nav-link { display: block; color: gray; text-decoration: none; font-family: 'Courier New', Courier, monospace; font-size: 13px; padding: 8px; border: 1px solid #333; /* Subtle border for each button */ background:linear-gradient(to bottom, #5e5e5e, black); text-align: center; transition: 0.3s; border-radius: 8px; overflow: hidden; } .nav-link:hover { background-color: #1a1a1a; color: #fff; border: 1px solid gray; text-shadow: 0 0 5px #fff; transform: translateX(5px); /* Makes the button "pop" out slightly on hover */ }