/* Fonts */

@font-face {
	font-family: "Gaiatype";
	src: url("./assets/fonts/Gaiatype.woff2") format('woff2');
}

@font-face {
	font-family: "04b03";
	src: url("./assets/fonts/04B_03__.woff2") format('woff2');
}

@font-face {
	font-family: "MomsTypewriter";
	src: url("./assets/fonts/MomsTypewriter.woff2") format('woff2');
}

@font-face {
	font-family: "ChronoType";
	src: url("./assets/fonts/ChronoType.woff2") format('woff2');
}

@font-face {
	font-family: "ChronoType";
	src: url("./assets/fonts/ChronoType.woff2") format('woff2');
}
/* Actual Style */

html {
	color: #f8feff;
	font-family: "Roboto", monospace;
	background-image: linear-gradient(to bottom,
			rgba(11, 11, 11, 0.78),
			rgba(11, 11, 11, 0.78)),
		url(./assets/bgs/bgtile2.gif);
	background-attachment: fixed;
}

body {
	cursor: url(./assets/cursors/Reimu/default.png), default;
	margin-top: 0px;
	font-size: 1.1em;
}

h1 {
	font-family: "Gaiatype";
	text-align: center;
	position: relative;
	font-size: 1.8em;
	color: rgb(255, 175, 206);
	margin-top: 15px;
	margin-bottom: 15px;
}

h2 {
	font-family: "Gaiatype";
	font-size: 1.6em;
	color: rgb(70, 200, 180);
	margin-top: 15px;
	margin-bottom: 15px;
}

h3 {
	font-family: "";
	font-size: 1.4em;
	color: rgb(70, 170, 180);
	margin-bottom: 15px;
}

h4 {
	font-family: "Gaiatype";
	font-size: 1.2em;
	color: rgb(70, 170, 180);
	margin-top: 15px;
	margin-bottom: 15px;
}

p {
	/* font-family: "04b03"; */
	font-size: 0.9em;
	line-height: 1.55em;
	/* margin-top: 12px; */
	/* margin-bottom: 12px; */
}

a {
	font-size: 0.9em;
	line-height: 1.55em;
}

ul {
	list-style: none;
	/* Remove default bullets */
}

/* https://www.w3schools.com/howto/howto_css_bullet_color.asp */
ul li::before {
	content: "\2A00";
	/* Add content: \2022 is the CSS Code/unicode for a bullet */
	color: rgb(197, 136, 221);
	/* Change the color */
	font-weight: bold;
	/* If you want it to be bold */
	display: inline-block;
	/* Needed to add space between the bullet and the text */
	width: 1em;
	/* Also needed for space (tweak if needed) */
	margin-left: -1.5em;
	/* Also needed for space (tweak if needed) */
}

s {
	text-decoration: line-through;
	color: red;
}

:link {
	cursor: url(./assets/cursors/Reimu/pointer.png), pointer;
	color: #ffc0cb;
}

:visited {	
	cursor: url(./assets/cursors/Reimu/pointer.png), pointer;
	color: #ffc0cb;
}

li {
	margin-top: 1vh;
	margin-bottom: 1vh;
	font-size: 0.9em;
	line-height: 1.5em;
}

footer {
	text-align: center;
	padding: 1em;
}

code {
	color: #adff2f;
}


#donate>* {
	margin: 0 auto;
}

#uptime-up {
	text-shadow: 0 0 10px #ffffff45, 0 0 20px #ffffff40, 0 0 30px lime, 0 0 40px #04e669,
		0 0 50px #34ff1b, 0 0 60px #25fa2b, 0 0 70px #02ec55;
	color: greenyellow;
}

#uptime-down {
	text-shadow: 0 0 10px #ffffff45, 0 0 20px #ffffff40, 0 0 30px red, 0 0 40px #e61704,
		0 0 50px #ff391b, 0 0 60px #fa3725, 0 0 70px #ec0202;
	color: red;
}


@keyframes erm {
	0% {
		transform: rotate(2deg);
	}

	50% {
		transform: rotate(-2deg);
	}

	100% {
		transform: rotate(2deg);
	}
}

.tilttext {
	animation: erm 10s infinite;
}

.rainbowtext {
	background-image: linear-gradient(90deg,
			rgba(255, 0, 0, 1) 0%,
			rgba(255, 154, 0, 1) 10%,
			rgba(208, 222, 33, 1) 20%,
			rgba(79, 220, 74, 1) 30%,
			rgba(63, 218, 216, 1) 40%,
			rgba(47, 201, 226, 1) 50%,
			rgba(28, 127, 238, 1) 60%,
			rgba(95, 21, 242, 1) 70%,
			rgba(186, 12, 248, 1) 80%,
			rgba(251, 7, 217, 1) 90%,
			rgba(255, 0, 0, 1) 100%);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.lastupdate {
	text-align: center;
	font-size: 1.2ch;
	color: #80d7ff;

}

.content {
	padding: 20px 20px;
	margin: 0 auto;
	max-width: 780px;
	width: 70%;
	min-height: 60vh;
	word-wrap: break-word;
	line-height: 1.5em;
}

.text-center {
	text-align: center;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	height: auto;
}

.qa {
	margin-top: 1vh;
	margin-bottom: 1vh;
}

.THEYGLOW {
	text-shadow: 0 0 10px #ffffff45, 0 0 20px #ffffff40, 0 0 30px lime, 0 0 40px #04e669,
		0 0 50px #34ff1b, 0 0 60px #25fa2b, 0 0 70px #02ec55;
}

.langglow {
	text-shadow: 1px 2px 11px rgb(255, 255, 255);
}

.top {
	font-size: 0.7em;
	margin-top: 1ch;
	flex: 1;
	text-align: center;
}

.box {
	position: relative;
	text-align: center;
	width: 1%;
	margin-top: 9ch;
	border: 4px solid #60976b83;
	margin: auto;
}

.selfhosted {
	color: rgb(190, 255, 145);
}

.notif {
	color: #90ee90;
	font-weight: bold;
}

.notice {
	color: #ffb060;
	font-weight: bold;
}

.warn {
	color: #ff5d60;
	font-weight: bold;
}

#fade {
	opacity: 1;
	animation: fadeOut 7s linear;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes slide {
	0% {
		transform: translateX(100vw);
		/* opacity: 1; */
	}

	/* 50% {
    opacity: 1;
  } */
	100% {
		transform: translateX(-100%);
		/* opacity: 0; */
	}
}

/* https://systemspace.dimden.dev/res/css/scanlines.css

/* Scanlines */
body:before {
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1000;
	background-image: url(/assets/bgs/overlay.png);
	background-repeat: all;
	background-position: 0px 0px;
	animation-name: Static;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(4);
	opacity: 0.35;
	/* box-shadow: inset 0px 0px 10em rgba(0, 0, 0, 0); */
}

body:after {
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1000;
	background-image: url(/assets/bgs/overlay2.png);
	background-repeat: all;
	background-position: 0px 0px;
	animation-name: Static;
	animation-duration: 0.8s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(4);
	opacity: 0.35;
}

@keyframes Static {
	0% {
		background-position: 0px 0px;
	}

	100% {
		background-position: 0px 4px;
	}
}