style.css

:root {
	--black: #000;
	--white: #fff;
	--section-background: #361303;
	--github-fill: var(--white);
	--github-color: var(--black);
	--github-focus: rgb(255, 140, 52);
	--loader-shadow: 0 0 10px #ffd900, 0 0 20px #ffd900, 0 0 40px #ffd900, 0 0 60px #ffd900, 0 0 80px #ffd900,
		0 0 100px #ffd900;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#space {
	height: 0;
	width: 0;
}

section {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: var(--section-background);
	animation: animateBg 10s linear infinite;
}

@keyframes animateBg {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}

section .loader {
	position: relative;
	width: 200px;
	height: 200px;
}

section .loader span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: rotate(calc(18deg * var(--i)));
}

section .loader span::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: var(--loader-shadow);
	animation: animate 2s linear infinite;
	animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
	0% {
		transform: scale(1.5);
	}
	80%,
	100% {
		transform: scale(0);
	}
}

.github-corner:focus svg path {
	fill: var(--github-focus);
}

.github-corner:focus .octo-arm,
.github-corner:focus .octo-body {
	fill: var(--github-color);
}

.github-corner:hover .octo-arm,
.github-corner:focus .octo-arm {
	animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
	0%,
	100% {
		transform: rotate(0);
	}
	20%,
	60% {
		transform: rotate(-25deg);
	}
	40%,
	80% {
		transform: rotate(10deg);
	}
}

@media (max-width: 500px) {
	.github-corner:hover .octo-arm {
		animation: none;
	}
	.github-corner .octo-arm {
		animation: octocat-wave 560ms ease-in-out;
	}
}