@font-face																							{ font-family: "JohnnyFever"; src: url("../assets/fonts/johnny_fever.otf"); }					/* possibly use https://github.com/typekit/webfontloader/blob/master/webfontloader.js to reduce font weirdness while the browser displays the page and downloads the Johnny Fever font */
*																									{ scrollbar-width: thin; }
html																								{ overflow-y: hidden; }
body																								{ display: flex; flex-direction: row; margin: 0; border-collapse: collapse; font-family: "Helvetica", "Times New Roman", serif; }
	nav#sidebar																						{ position: absolute; height: 100vh; width: 40px; z-index: 2; overflow: hidden; transition: all 0.2s ease-in-out; border-right: 1px solid #ddd; border-color: var(--page-border-color); }
		nav#sidebar:hover																			{ width: 250px; }
			nav#sidebar					div#menu													{ white-space: nowrap; overflow-x: hidden; padding-top: 25px; }
			nav#sidebar					div#menu_hamburger											{ display: none; margin: 5px; padding-top: 6px; height: 20px; width: 30px; background-color: #FFF; border-radius: 15px; border: 1px solid #666; text-align: center; }
	div#outercontent																				{ display: flex; flex-direction: column; flex-grow: 1; flex-wrap: wrap; position: absolute; height: 100vh; left: 42px; right: 0; z-index: 1; overflow: hidden; }	/* @@css: flex-wrap seems to have no effect, but i want header, main, and footer to automatically stack on top of each other so i don't have to keep setting heights in pixels everytime i change something */
		header#header																				{ display: flex; flex-direction: column; position: absolute; top: 0; width: 100%; /*height: 129px;*/ text-align: center; border-bottom: 2px solid #ddd; border-bottom-color: var(--page-border-color); }	/* @@css: text-align and height seem not to have an effect, is it safe to get rid of them, or will that possibly cause future problems? */
			header#header		div#logoblock														{ height: 100px; width: 100%; text-align: center; }
				header#header 	div#logoblock		img#logoblock_serieslogo						{ height: 100%; }
				header#header 	div#logoblock		img#logoblock_serieslogo_fulltitle				{ display: none; }
				header#header 	div#logoblock		span#logoblock_sitetitle						{ display: none; }
			header#header		div#banner															{ padding-bottom: 10px; border-top-left-radius: 15px; border-top-right-radius: 15px; padding-top: 5px; /* text-align: center; width: 100%; */ font-size: 90%; }	/* @@css: text-align and width seem not to have an effect, is it safe to get rid of them, or will that possibly cause future problems? commented them out January 23, 2025 */
			header#header		div#carousel														{ width: 100%; z-index: 2; overflow: hidden; margin-left: 0; transition: margin-left 1s ease-in-out; }
		main#mainblock																				{ display: flex; flex-direction: column; position: absolute; top: 130px; width: 100%; bottom: 61px; }
			main#mainblock div#innercontent															{ /*display: flex; flex-direction: column; flex: 1 0 auto;*/ overflow-y: auto; } /* @@css: i can't get the scrollbar to show up when i use flex stuff here */
			main#mainblock div#innercontent hr														{ width: 80%; }
		footer#footer																				{ position: absolute; bottom: 0; width: 100%; height: 60px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; background-color: #111; border-top: 2px solid #ddd; border-top-color: var(--page-border-color); }
			footer#footer	div#socialmediablock													{ padding-top: 5px; text-align: center; }
			footer#footer	div#footerlinks															{ text-align: center; }