@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;
	 }

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

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

	 .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;
	 }

	 #paperback, #paperback1 {
	 background-image: url("textures/brushedmetaldark.jpg") !important;
	 }

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

	 #main, #galleryphoto {
	 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;
	 }
 }

 button {
	 background: linear-gradient(var(--main-color), var(--main-color1));
	 color: var(--text);
 }

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

 :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;
 }

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

 }

 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;
 }

 kbd {
	 font-family: iosevka, iosevka regular, jetbrains mono, monospace;
	 font-display: optional;
 }

 #main {
 background-image: url("textures/smoothpapersmall.jpg");
 width: 100% !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;
 display: inline;
 }

 #blogbox {
 width: 800px;
 overflow-y: auto;
 white-space: nowrap;
 height: 300px;
 }

 #blogpost {
 background-color: #ffcd00;
 padding: 6px;
 background: linear-gradient(#ffcd00, #e6b900);
 border-radius: 2.5px;
 color: black;
 box-shadow: 0px 0px 15px #000;
 margin: 6px;
 width: auto;
 float: left;
 display: block;
 height: auto
 }
 #paperback1 {
 position: center;
 display: grid;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: center;
 align-items: flex-start;
 margin-top: 36px;
 background: var(--main-color3);
 background-image: url("textures/brushedmetalmegasmall.jpg");
 border-radius: 16px;
 border-width: 2px;
 border-style: solid;
 border-color: var(--border);
 padding: 12px;
 box-shadow: 0px 0px 25px #000;
 width: 1280px;
 }

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

 a:hover {
	 color: var(--accent-color1);
 }

 button:hover {
	 background: var(--main-color3);
	 box-shadow: 0px 0px 15px #ffcd00;
 }

 kbd {
	 background: #eeeeee;
	 border-color: var(--border);
	 padding: 2px;
	 border-radius: 2px;
	 border-width: 2px;
	 border-style: solid;
 }

 #left {
 float: left;
 width: 50%;
 display: grid;
 }

 #right {
 float: left;
 width: 50%;
 display: grid;
 }

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

 @media screen and (max-width: 575px) {
	 #tabbutton {
	 width: 42px !important;
	 height: 42px !important;
	 }

	 #blogrecentbutton {
	 width: 38px !important;
	 height: 38px !important;
	 }
 }

 @media screen and (max-width: 520px) {
	 #tabbutton {
	 width: 40px !important;
	 height: 40px !important;
	 }

	 #blogrecentbutton {
	 width: 36px !important;
	 height: 36px !important;
	 }
 }

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

 #blogrecentbutton {
 width: 42px;
 height: 42px;
 background-color: #ffcd00 !important;
 background: linear-gradient(#ffcc00, #cca400) !important;
 border-width: 2px !important;
 border-color: #a08103 !important;
 }

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

 .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: 150%;
	 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;
 }

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

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

 #paperback2 {
 border-radius: 0px;
 width: 380px !important;
 margin-left: 8px;
 color: black !important;
 margin-top: 36px;
 }

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

 #blogpost {
 text-color: black !important;
 }

 #blogcontainer {
 overflow-y: auto;
 height: 93%;
 }

 #eebyto {
 margin-top: 12px;
 }

 button {
	 display: inline-block;
	 background-color: var(--main-color2);
	 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;
 }



 ::-webkit-scrollbar {
	 width: 16px;
 }

 ::-webkit-scrollbar-track {
	 background: rgba(0,0,0, 0.5);
 }

 ::-webkit-scrollbar-thumb {
	 background: linear-gradient( var(--main-color2), var(--main-color3));
	 border-width: 2px;
	 border-color: #666;
	 border-style: solid;
	 border-radius: 16px;
 }

 ::-webkit-scrollbar-thumb:hover {
	 background: #fff;
	 border-width: 3px;
	 background: linear-gradient( var(--main-color1), var(--main-color2));
 }

 button:hover  {
	 background: linear-gradient( var(--main-color2), var(--main-color1));
 }

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

 #gold {
 display: block;
 background: linear-gradient(#ffcd00, #cca400);
 border-radius: 6px;
 padding: 2px;
 border-width: 2px;
 border-color: #cca400;
 border-style: solid;
 color: black;
 width: auto;
 margin-bottom: 8px;
 padding-left: 8px;
 padding-right: 8px;
 margin-left: 8px;
 margin-right: 8px;
 }

 #silver {
 display: block;
 background: linear-gradient(#ccc, #aaa);
 border-radius: 6px;
 padding: 2px;
 border-width: 2px;
 border-color: #aaa;
 border-style: solid;
 color: black;
 width: auto;
 margin-bottom: 8px;
 padding-left: 8px;
 padding-right: 8px;
 margin-left: 8px;
 margin-right: 8px;
 }

 #bronze {
 display: block;
 background: linear-gradient(#c87533, #6b3e1b);
 border-radius: 6px;
 padding: 2px;
 border-width: 2px;
 border-color: #6b3e1b;
 border-style: solid;
 color: black;
 width: auto;
 margin-bottom: 8px;
 padding-left: 8px;
 padding-right: 8px;
 margin-left: 8px;
 margin-right: 8px;
 }

 table, tr, td, th {

}

th {
	background-image: url("textures/smoothpaper.jpg");
	padding: 8px;
	border-radius: 0px;
	border-width: 2px;
	border-style: solid;
	border-color: var(--border);
	box-shadow: 0px 0px 25px #000;
	color: black !important;
	background-color: var(--main-color3);
	height: 340px;
	margin: 16px;
	vertical-align: top;
	text-align: center;
}


.button {
vertical-align: middle;
align-items: center;

}