:root{
	--col-primary: #FFD01E;
	--col-primary-t: #FAE800DE;
	--col-secondary: #2C3237;
	--col-secondary-t: #2C3237DE;
	--col-tertiary: #71818E;
	--col-tertiary-t: #71818EDE;
	--col-title: #000000;
	--col-title-t: #000000DE;
	--col-text-primary: black;
	--col-text-secondary: white;
	--col-text-tertiary: #2C3237;
	--col-a-primary: #0066CC;
	--col-a-visited: #800080;
	
	--shadow-primary: .2px .2px 10px -3px black;
	--shadow-primary-inset: inset .2px .2px 10px -3px black;
	--shadow-primary-small: .05px .05px 2.5px -.75px black;
	--shadow-primary-small-inset: inset .05px .05px 2.5px -.75px black;
	--shadow-secondary: 0px .2px 2px .2px #394047;
	--shadow-secondary-inset: inset 0px .2px 2px .2px #394047;
}
html{
	scroll-behavior: smooth;
}
body{
	margin: 0;
	background-color: black;
	font-family: sans-serif;
	color: var(--col-text-primary);
	overflow-x: hidden;
}
a{
	color: inherit;
	text-decoration: inherit;
}
.markdown a{
	color: var(--col-a-primary);
}
.markdown a:visited{
	color: var(--col-a-visited);
}
.background{
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	z-index: -9999;
	overflow: hidden;
	background-image: url(/media/default_background.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
}
.box{
	background-color: var(--col-primary);
	box-shadow: var(--shadow-primary);
}
.button{
	background-color: var(--col-primary);
	cursor: pointer;
}
.button:hover{
	background-color: var(--col-primary);
	background-color: var(--col-primary-t);
}
.container{
	margin-left: auto;
	margin-right: auto;
	margin-top: 150px;
	width: 940px;
	max-width: 100%;
	scroll-margin-top: 150px;
}
.container > h1{
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--col-title);
	color: white;
	line-height: 48px;
	margin-top: 20px;
	margin-bottom: 20px;
	box-shadow: var(--shadow-primary);
}
.popup{
	width: 100%;
	z-index: 9999;
	top: 0px;
	background-color: rgba(.1,.1,.1,.5);
	height: 100vh;
	position: fixed;
}
.popup .container > font{
	color: white;
	text-decoration: underline;
	cursor: pointer;
}
.popup .box{
	padding: 8px;
	height: 300px;
}
.unselectable{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.navbar{
	width: 100%;
	z-index: 9998;
	top: 0px;
}
.navbar .nbtop{
	width: 100%;
	height: 40px;
	background-color: var(--col-secondary);
}
.navbar .nbbot{
	width: 100%;
	height: 300px;
	background-color: var(--col-primary);
	box-shadow: var(--shadow-primary);
}
.navbar .nbul{
	width: 100%;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	list-style-type: none;
	overflow: hidden;
	display: block;
}
.navbar .nbul li{
	float: none;
}
.navbar .nbul li:hover{
	background-color: var(--col-primary-t);
}
.navbar .nbul li > a{
	display: block;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
}
.nbtop .nbsocli{
	width: 50px;
	height: 40px;
}
.navbar .nbtop .nbsocli > a{
	padding: 0;
}
.nbtop .nbul img{
	height: 30px;
	margin-top: 5px;
	border-radius: 8px;
}
.navbar .nbtop .nblangli{
	width: 67px;
	height: 40px;
}
.navbar .nbtop .nblangli a{
	height: 40px;
	width: 100%;
	padding: 0;
}
.navbar .nbtop .nblangli a img{
	height: 25px;
	margin: auto;
	margin-top: 7px;
	border-radius: 4px;
}
.navbar .nbtop .nbul > li{
	float: right;
}
.navbar .nbtop .nblangdp > li{
	height: 40px;
	width: 67px;
}
.navbar .nbtop .nblangdp > li > a{
	padding-left: 15px;
}
.navbar .nbbot .nbul > li > a{
	height: 60px;
	font-size: 19px;
	line-height: 57px;
	font-weight: bold;
	width: 100%;
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
}
.navbar .nbdp{
	width: 100%;
	display: none;
	position: absolute;
	background-color: var(--col-primary);
	box-shadow: var(--shadow-primary);
	z-index: 1;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	overflow: hidden;
}
.navbar .nbdp > li{
	height: 40px;
	color: var(--col-text-primary);
}
.navbar .nbdp > li > a{
	text-align: left;
	font-size: 16px;
	line-height: 40px;
	font-weight: bold;
	padding-left: 10px;
	padding-right: 10px;
}
.navbar .nbul > li:hover .nbdp{
	display: block;
}
@media screen and (min-width: 800px){
	.navbar .nbbot{
		height: 60px;
	}
	.navbar .nbul{
		width: 70%;
		min-width: 800px;
	}
	.navbar .nbbot .nbul > li{
		float: left;
	}
	.navbar .nbbot .nbul > li > a{
		width: auto;
	}
	.navbar .nbdp{
		width: auto;
	}
}
.box div{
	width: calc(100% - 20px);
	width: -moz-calc(100% - 20px);
	width: -webkit-calc(100% - 20px);
	height: 500px;
	background-color: white;
	border: 10px solid white;
	border-color: var(--col-primary);
}
.footer{
	width: 100%;
	height: 265px;
	background-color: black;
	margin-top: 150px;
}
.footertop{
	width: 100%;
	height: 220px;
	position: relative;
	box-shadow: var(--shadow-primary);
	z-index: 1;
	text-indent: -.5em;
}
.footertop > div{
	width: 940px;
	max-width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
.footertop > div > ul{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.footertop > div > ul > li{
	width: fit-content;
	max-width: 25%;
	height: 220px;
	float: left;
}
.footertop > div > ul > li > ul{
	height: 200px;
	margin-top: 20px;
	color: white;
	font-weight: bold;
}
.footertop > div > ul > li > ul > li > ul{
	font-weight: normal;
}
.footertop > div > ul > li ul{
	list-style-type: none;
	margin-left: -20px;
}
.footer a{
	cursor: pointer;
}
.footer a:hover:not(:active){
	color: #B9B9B9;
}
.footerlogo{
	display: block;
	width: 220px;
	height: 220px;
}
.footersocial{
	display: block;
	width: 220px;
	height: 220px;
}
.footersocial ul{
	width: 168px;
	height: 168px;
	list-style-type: none;
	margin: auto;
	padding: 0;
	padding-top: 26px;
}
.footersocial li{
	float: left;
	width: 64px;
	height: 64px;
	margin: 10px;
	padding: 0;
}
.footersocial a{
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
.footersocial img{
	width: 100%;
	height: 100%;
	background-color: var(--col-secondary-t);
	border-radius: 8px;
	cursor: pointer;
}
.footerbot{
	width: 100%;
	height: 50px;
	background-color: var(--col-primary);
	z-index: -1;
	text-align: center;
	line-height: 48px;
	font-size: 16px;
}
@media screen and (max-width: 800px){
	.footer{
		height: 485px;
	}
	.footertop{
		height: 440px;
	}
	.footertop > div > ul > li{
		width: 50%;
		max-width: 50%;
	}
}