@font-face {
    font-family: 'DINOT'; /*a name to be used later*/
    src: url("/static/DINOT.otf"); /*URL to font*/
}
@font-face {
    font-family: 'DINOT-Bold'; /*a name to be used later*/
    src: url("/static/DINOT-Bold.otf"); /*URL to font*/
}

:root{
	color-scheme: light dark;
	--main-background: light-dark(#ffffff, #000000);
	--text: light-dark(#000000, #ffffff);
	--text-inv: light-dark(#ffffff, #000000);
	--text-gray: light-dark(#666, #aaa);
	--header: light-dark(#eeeeee, #111111);
	--header-button: light-dark(#eeeeee, #111111);
	--header-button-hover: light-dark(#e6e6e6, #171717);
	--header-button-hover-text: light-dark(#00a5df, #d3d800);
    --dot: light-dark(#eeeeee, #222222);
    --dot-hover: light-dark(#cccccc, #454545);
	--logo: light-dark(#333333, #ffffff);
	--logo-accent: light-dark(#00a3db, #d3d800);
	--header-button-active: linear-gradient(to bottom, rgba(17,17,17,0), rgba(100,100,100,0.25));
}

.header{
	background: var(--header);
	position: sticky;
	top: 0;
	z-index: 900;
	overflow-x: auto;
	overflow-y: hidden;
	height: 50px;
}
.hpc{
	min-height: 100vh;
}
div.flex-this{
	display:flex;
	gap: 10px;
	justify-content: flex-start;
}
.headericon{
	width: 220px;
	height: 40px;
	position: absolute;
	padding-top: 12px;
	padding-left: 13px;
	overflow: hidden;
}
#headericon:hover .iconbtn{
 	background: /*var(--header-button-hover)*/linear-gradient(to bottom, rgba(230,0,0,1)0% 17%, rgba(255,141,0,1)17% 34%, rgba(255,238,0,1)34% 50%, rgba(0,130,27,1)50% 67%, rgba(0,75,255,1)67% 83%, rgba(119,0,136,1)83% 100%);
}
#headericon:hover .headericon{/*PRIDE*/
	--logo: #000;
	--logo-accent: #000;
}
.headericon > #svg5 > #layer3 > #use5309{
	transition: 0s;
}
.iconbtn{
	height: 51px;
	width: 220px;
	background-size: contain;
	border: none;
	cursor: pointer;
	background-color: var(--header-button);
	border-right: 2px;
	border-color: #ffffff;
	transition: all 100ms ease;
}
.headerlink{
	border: none;
	background-color: var(--header-button);
	color: var(--text);
	cursor: pointer;
	padding: 0px;
	padding-bottom: -1px;
	transition: all 100ms ease;
}
.headeractive{
	border: none;
	color: var(--text);
	cursor: pointer;
	padding: 12px;
	font-size: 20px;
	transition: all 100ms ease;
	font-family: DINOT-Bold;
}
.headerlink:hover{
	background-color: var(--header-button-hover);
	color: var(--header-button-hover-text);
}
.wiki-title{
	font-family: DINOT-Bold;
}