@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
@keyframes fadeInAnimation {
	0% {
		opacity: 0;
		background: #000000;
	}
	50% {
		opacity: 0;
		background: #ffffff;
	}
	100% {
		opacity: 1;
		background: #ffffff;
	}
}
* {
	cursor: default;
}
body {
	animation: fadeInAnimation ease 10s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation: fadeInAnimation ease 10s;
}
body {
	color: white;
	margin: 0;
	text-align: center;
	background-color: black;
	cursor: crosshair;
}
canvas {
	display: block;
	width: 100%;
	height: 100%;
}
p {
	color: rgba(255, 255, 255, 0.5);
}
.header {
	top: 42%;
}
.header-content {
	padding: 50px;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 10px;
}
.footer {
	bottom: 3%;
}
.description {
	color: gray;
	padding-top: 50px;
}
a,
a:hover,
a:visited {
	color: white;
	text-decoration: none;
}
.disable-selection {
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
h1 {
	font-family: "Fredoka One", cursive;
	padding-right: 12px;
}
h1::after {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	content: ".cc";
	font-size: 12px;
	position: absolute;
	top: 27.5px;
	padding-left: 2px;
	font-weight: 400;
}