@media (prefers-color-scheme: dark) {
	 :root {
		 --main-color: #111111 !important;
		 --main-color1: #000000 !important;
		 --main-color2: #333333 !important;
		 --main-color3: #444444 !important;
		 --background-wood: #211600 !important;
		 --accent-color: #ffcd00 !important;
		 --accent-color1: #cca400 !important;
		 --accent: #6b00ff !important;
		 --border: #444 !important;
		 --text: #eee !important;
	 }

	 a {
		 color: var(--accent-color) !important;
	 }

	 a:hover {
		 color: var(--accent-color1) !important;
		 transition: color 0.3s;
	 }

	 #main {
	 background-color: var(--main-color) !important;
	 }

	 button {
		 background-color: var(--main-color2);
		 background: linear-gradient( var(--main-color2), var(--main-color1)) !important;
		 border-color: var(--border);
	 }

	 button:hover {
		transition: background 0.3s;
		border-color: var(--accent-color);
		background: linear-gradient( var(--main-color1), var(--main-color2)) !important;
	}


	#button {
		background-color: var(--main-color2);
		background: linear-gradient( var(--main-color2), var(--main-color1)) !important;
		border-color: var(--border);
	}

	#button:hover {
		transition: background 0.3s;
		border-color: var(--accent-color);
		background: linear-gradient( var(--main-color1), var(--main-color2)) !important;
	}

	 .tooltip .tooltiptext {
		 background: linear-gradient( var(--main-color2), var(--main-color1)) !important;
		 background-color: var(--main-color1) !important;
		 border-color: var(--border) !important;
		 color: var(--text) !important;
	 }

	 .tooltip .tooltiptext::after {
		 border-color: transparent transparent #555 transparent;
	 }


	 kbd {
		 background: var(--main-color1) !important;
		 border-color: var(--border) !important;
	 }

	 #blogbackground, #mainbackground {
	 background-image: url("textures/brushedmetaldark.jpg") !important;
	 border-color: var(--border) !important;
	 }

	 body {
		 background-image: url("textures/darkwoodtexture.jpg") !important;
	 }

	 #main, #galleryphoto, #galleryphotoshort {
	 background-image: url("textures/smoothpaperdark.jpg") !important;
	 border-color: var(--main-color2) !important;
	 }

	 .tooltip .tooltiptext {
		 background: linear-gradient(var(--main-color1), var(--main-color2)) !important;
		 color: var(--text);
	 }

	 .tooltip .tooltiptext::after {
		 border-color: transparent transparent #555 transparent;
	 }
	 }

 :root {
	 --main-color:#eeeeee;
	 --main-color1: #ffffff;
	 --main-color2: #cccccc;
	 --main-color3: #aaaaaa;
	 --background-wood: #eb9834;
	 --accent-color: #f47d9b;
	 --accent-color1: #c3647c;
	 --accent: #6b00ff;
	 --border: #999999;
	 --text: #222;
 }

 @media screen and (max-width: 1600px) {
	 #gallerylist{
	 display: none !important;
	 }
 }

 h1, h2, h3, h4, h5, h6, p, kbd, ul, li {
	 color: var(--text);
 }

 body {
	 background-color: var(--background-wood);
	 background-image: url("textures/woodsmall.jpg");
 }

 #main {
 background-image: url("textures/smoothpapersmall.jpg");
 width: auto !important;
 background-color: #eeeeee;
 justify-content: center;
 border-radius: 2px;
 border-width: 2px;
 border-style: solid;
 border-color: #999999;
 padding:12px;
 box-shadow: 0px 0px 5px #000;
 margin-bottom: 12px;
 height: auto;
 display: inline-block;
 margin-right: auto;
 margin-left: auto;
 margin-top: -8px;
 }

 @font-face {
	 font-family: b612;
	 src: url("typefaces/B612-Regular.ttf");
 }
 
 @font-face {
	 font-family: iosevka;
	 src: url("typefaces/iosevka-regular.ttf");
 }

 #mainbackground {
 margin-top: 36px;
 background: var(--main-color3);
 background-image: url("textures/brushedmetalmegasmall.jpg");
 border-radius: 16px;
 border-width: 2px;
 border-style: solid;
 border-color: #999999;
 padding: 6px;
 box-shadow: 0px 0px 25px #000;
 width: auto;
 max-width: 1280px;
 margin-right: 8px;
 }

 table {
	 margin-top: 24px;
 }

 h1, h2, h3, h4, h5, h6, p, a, li, ul {
	 font-family: b612, sans-serif, arial;
	 margin-top: 6px;
	 margin-bottom: 6px;
	 font-display: optional;
 }

 ul, li {
	 margin: 4px;
}

 th, td {
	 align-items: flex-start:
	 flex-direction: row;
	 vertical-align: top;
 }

 .tooltip .tooltiptext {
	 visibility: hidden;
	 width: 120px;
	 background: linear-gradient(#ccc, #fff);
	 background-color: #fff;;
	 border-color: #999;
	 border-style: solid;
	 border-width: 2px;
	 color: var(--text);
	 text-align: center;
	 font-family: b612, arial, sans-serif;
	 border-radius: 4px;
	 padding: 5px 0;
	 position: absolute;
	 z-index: 1;
	 top: 110%;
	 left: 50%;
	 margin-left: -60px;
 }

 .tooltip {
	 position: relative;
	 display: inline-block;
 }

 .tooltip .tooltiptext::after {
	 content: "";
	 position: absolute;
	 bottom: 100%;
	 left: 50%;
	 margin-left: -10px;
	 border-width: 10px;
	 border-style: solid;
	 border-color: transparent transparent #555 transparent;
 }

 .tooltip:hover .tooltiptext {
	 visibility: visible;
 }

 #tabs {
 margin-top: -42px;
 }

 #blogbackground {
 background-image: url("textures/brushedmetalmegasmall.jpg");
 padding: 6px;
 border-radius: 16px;
 width: 320px !important;
 border-width: 2px;
 border-style: solid;
 border-color: #999999;
 box-shadow: 0px 0px 25px #000;
 margin-right: 8px;
 color: black !important;
 height: 2160px !important;
 float: right;
 height: auto;
 background-color: var(--main-color3);
 }

 kbd {
	 background: #eeeeee;
	 border-color: var(--border);
	 padding: 0px;
	 border-radius: 2px;
	 border-width: 2px;
	 border-style: solid;
	margin-top: 8px !important;
margin-bottom: 8px !important;
	 font-family: iosevka, iosevka regular, jetbrains mono, monospace;
	 font-display: optional;
 }
 
#eebytobutton {
	box-shadow: 0px 0px 2px #000;
	width: 88px;
	height: 31px;
	border-width: 1px;
	border-style: solid;
	border-width: 0px;
 }
 
#eebytobutton:hover {
	box-shadow: 0px 0px 6px #ffcd00;
 }

 #blogpost {
 padding: 6px;
 background-image: url("gradients/yellow.png");
 background: linear-gradient(#ffcd00, #e6b900) !important;
 background: #ffcd00;
 border-radius: 2px;
 border-style: solid;
 border-width: 2px;
 border-color: #e6b900;
 color: black;
 box-shadow: 0px 0px 4px #000;
 margin-bottom: 6px;
 margin-top: 6px;
 width: auto;
 float: left;
 display: block;
 height: auto;
 min-width; 320px !important;
 }

 #blogcontainer {
 overflow-y: scroll;
 height: 95%;
 border-radius: 8px;
 }

 #galleryphoto, #galleryphotoshort {
 background-image: url("textures/smoothpapersmall320.jpg");
 padding: 8px;
 border-radius: 0px;
 width: 300px !important;
 border-width: 2px;
 border-style: solid;
 border-color: #999999;
 box-shadow: 0px 0px 25px #000;
 color: black !important;
 background-color: var(--main-color3);
 height: 275px;
 margin-bottom: 16px;
 margin-left: 8px;
 }

 #gallerylist {
 margin-left: 8px !important;
 }

 @media screen and (max-width: 960px) {
	 #blogbackground {
	 display: none !important;
	 }
	 #blogrecent {
	 display: block !important;
	 }

	 #hnrtab {
		 display: none !important;
	}

	#mainbackground {
		width: 100% !important;
		margin-right: 0px !important;
		margin-left: 0px !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	#tabs {
		margin-right: 8px;
		margin-left: 8px;
	}

	body {
		width: 100%
	}
 }

 .blogrecentbutton {
 width: 42px;
 height: 42px;
 background-color: #ffcd00 !important;
 background: linear-gradient(#ffcc00, #cca400) !important;
 border-width: 2px !important;
 border-color: #a08103 !important;
 border-style: solid;
 text-align: center;
 color: black !important;
 border-radius: 2px;
 }

 #left {
 float: left;
 max-width: 50%;
 display: block;
 height: 100%;
 }

 #right {
 float: left;
 max-width: 50%;
 display: block;
 }

 img {
	 image-rendering: auto;
	 image-rendering: crisp-edges;
	 image-rendering: pixelated;
	 image-rendering: -webkit-optimize-contrast;
 }

 @media screen and (max-width: 1200px) {
	 #left {
	 max-width: 100% !important;
	 }
 }

 a {
	 color: #f47d9b;
	 border-width: 0px;
	 border-style: none;
 }

 a:hover {
	 color: #c3647c;
	 transition: color 0.3s;
 }


 button {
	 display: inline-block;
	 background-color: var(--main-color2);
	 background-image: url("gradients/button.png");
	 background: linear-gradient( #fff, #aaa);
	 border-style: solid;
	 border-width: 1px;
	 border-color: var(--border);
	 border-radius: 4px;
	 padding: 6px;
	 box-shadow: 0px 0px 2.5px #333;
	 margin: 4px;
 }

 #button {
	 display: inline-block;
	 background-color: var(--main-color2);
	 background-image: url("gradients/button.png");
	 background: linear-gradient( #fff, #aaa);
	 border-style: solid;
	 border-width: 1px;
	 border-color: var(--border);
	 border-radius: 4px;
	 padding: 6px;
	 box-shadow: 0px 0px 2.5px #333;
	 margin: 4px;
	 font-size: 0.8em !important;
 }

 #gold {
 display: flex;
 background: linear-gradient(#ffcd00, #cca400);
 background-color: #ffcd00;
 border-radius: 6px;
 padding: 2px;
 border-width: 2px;
 border-color: #cca400;
 border-style: solid;
 color: black !important;
 max-width: 620px;
 margin-bottom: 8px;
 padding-left: 8px;
 padding-right: 8px;
 margin-left: auto;
 margin-right: auto;
 justify-content: center;
 }

 #tooltiptab, #tabbutton {
	 float: left;
	 display: inline-block;
}

#hidden {
	display: none; !important
}

#tabicon:hover {
	box-shadow: 0px 0px 0px #ffcd00;
}