:root {
	--site-bg: #fff;
	--text-color: #555;
	--title-color: #333;
	--animation-color: #777;
	--logo-color: #0006;
	--logo-color-hover: #000c;
}

@media (prefers-color-scheme: dark) {
	:root {
		--site-bg: #30395c;
		--text-color: #fff9;
		--title-color: #fff;
		--animation-color: #fff9;
		--logo-color: #fff6;
		--logo-color-hover: #fffc;
	}
}

.img {user-select: none; max-width: 90px; margin: auto; margin-bottom: 10px; position: relative; display: grid; grid-template-areas: "a"; align-items: center;}
.img > * {width: 100%; grid-area: a; stroke: var(--animation-color);}
.img > *:nth-child(odd) {animation: rotate 1s infinite;}
.img > *:nth-child(even) {width: 50px; height: 30px; margin: auto;}
.img .path {animation: animate 5s infinite linear; stroke-dasharray: 6px;}

@keyframes rotate {
	0% {transform: rotate(0deg)}
	100% {transform: rotate(30deg)}
}
@keyframes animate {
	0% {stroke-dashoffset: 0px;}
	100% {stroke-dashoffset: -120px;}
}