@import url("https://fonts.googleapis.com/css2?family=Sriracha&display=swap");
@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
* {
  cursor: default
}
body {
	animation: fadeInAnimation ease 5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.textiboi {
	text-align: center;
	color: #ffffff;
	font-family: monospace;
}
@keyframes color-change {
	0% {
		background-color: #000000aa;
		border: 1px solid #000000aa;
	}
	10% {
		background-color: #00262baa;
		border: 2px solid #00262baa;
	}
	20% {
		background-color: #004b55aa;
		border: 3px solid #004b55aa;
	}
	30% {
		background-color: #007e8faa;
		border: 2px solid #007e8faa;
	}
	40% {
		background-color: #00a4b9aa;
		border: 1px solid #00a4b9aa;
	}
	50% {
		background-color: #00e1ffaa;
		border: 0px solid #00e1ffaa;
	}
	60% {
		background-color: #00a4b9aa;
		border: 1px solid #00a4b9aa;
	}
	70% {
		background-color: #007e8faa;
		border: 2px solid #007e8faa;
	}
	80% {
		background-color: #004b55aa;
		border: 3px solid #004b55aa;
	}
	90% {
		background-color: #00262baa;
		border: 2px solid #00262baa;
	}
	100% {
		background-color: #000000aa;
		border: 1px solid #000000aa;
	}
}
#buttonshit {
	/*ボトムボタン*/
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	animation: color-change 30s infinite;
	-webkit-box-shadow: 9px 13px 41px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 9px 13px 41px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 9px 13px 41px 0px rgba(0, 0, 0, 0.5);
	margin-top: 5px;
	background-color: rgba(0, 59, 54, 0.486);
	border-radius: 12px;
	border: 1px solid rgba(0, 59, 54, 0.473);
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-size: 15px;
	padding: 3px 15px;
	text-decoration: none;
	transition: box-shadow 0.5s;
	-webkit-animation: color-change 30s infinite;
}
button {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	animation: color-change 30s infinite;
	-webkit-box-shadow: 9px 13px 41px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 9px 13px 41px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 9px 13px 41px 0px rgba(0, 0, 0, 0.5);
	margin-top: 5px;
	background-color: rgba(0, 59, 54, 0.486);
	border-radius: 12px;
	border: 1px solid rgba(0, 59, 54, 0.473);
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-size: 15px;
	padding: 3px 15px;
	text-decoration: none;
	transition: box-shadow 0.5s;
	-webkit-animation: color-change 30s infinite;
}
.icon {
	/*画像ボタン*/
	cursor: pointer;
	opacity: 100%;
	transition: all 250ms;
	-webkit-filter: drop-shadow(0px 4px 5px #919191);
	filter: drop-shadow(0px 4px 5px #919191);
}
.icon:hover {
	opacity: 100%;
	-webkit-filter: drop-shadow(0px 4px 5px #fff);
	filter: drop-shadow(0px 4px 5px #fff);
}
body {
	margin: 0;
	text-align: center;
	background-color: black;
	cursor: crosshair;
}
canvas {
	display: block;
	width: 100%;
	height: 100%;
}
.header {
	/*top:45%;*/
	top: 45%;
	color: #dddddd;
}
.footer {
	bottom: 3%;
}
.description {
	color: gray;
	padding-top: 50px;
}
.btn {
	border-radius: 30px;
	padding: 10px 30px;
}
a,
a:hover,
a:visited {
	color: inherit;
	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: "Sriracha", cursive;
}
h1::after {
	content: "Repo";
	font-size: 12px;
	position: absolute;
	top: 3px;
	padding-left: 5px;
	font-weight: 400;
}
h2::after {
	content: "";
	font-size: 12px;
	position: absolute;
	top: 14px;
	padding-left: 5px;
}

h2 {
	font-family: "Sriracha", cursive;
	font-weight: 400;
	font-size: 16px;
}