<div class="circle-spin-2"></div>
<div class="circle-spin-6"></div>
<div class="square-move-2"></div>
<div class="arrow-1-down"></div>
<div class="typing-1"></div>
<div class="circle-pulse-1"></div>
<div class="circle-packman-1"></div>
<div class="square-rotate-1-horizontal"></div>

.circle-spin-2 {
	--size: 24px;
	--stroke-width: calc(var(--size) / 6);
	--accent-opacity: 0.25;
	--color: currentColor;
	--animation-timing-function: linear;
	--animation-duration: 1s;
	position: relative;
	width: var(--size);
	height: var(--size);
}

.circle-spin-2::before,
.circle-spin-2::after {
	content: "";
	position: absolute;
	inset: 0;
	border-width: var(--stroke-width);
	border-style: solid;
	border-radius: 50%;
	transform: rotate(0deg);
	animation: var(--animation-timing-function) var(--animation-duration) infinite
		circle-spin-2-animation;
}

.circle-spin-2::before {
	border-color: var(--color) var(--color) var(--color) transparent;
	opacity: var(--accent-opacity);
}

.circle-spin-2::after {
	border-color: transparent transparent transparent var(--color);
}

@keyframes circle-spin-2-animation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.circle-spin-6 {
	--size: 24px;
	--stroke-width: calc(var(--size) / 6);
	--accent-opacity: 0.25;
	--color: currentColor;
	--animation-timing-function: linear;
	--animation-duration: 1s;
	position: relative;
	width: var(--size);
	height: var(--size);
	animation: var(--animation-timing-function) var(--animation-duration) infinite
		circle-spin-6-animation;
}

.circle-spin-6::before,
.circle-spin-6::after {
	content: "";
	position: absolute;
	background-color: var(--color);
	border-radius: 50%;
}

.circle-spin-6::before {
	inset: 0;
	opacity: var(--accent-opacity);
}

.circle-spin-6::after {
	top: var(--stroke-width);
	left: 50%;
	width: var(--stroke-width);
	height: var(--stroke-width);
	transform: translateX(-50%);
}

@keyframes circle-spin-6-animation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}
.square-move-2 {
	--size: 24px;
	--color: currentColor;
	--animation-timing-function: linear;
	--animation-duration: 2s;
	position: relative;
	width: var(--size);
	height: var(--size);
}

.square-move-2::before,
.square-move-2::after {
	content: "";
	position: absolute;
	width: 50%;
	height: 50%;
	background-color: var(--color);
}

.square-move-2::before {
	top: 0;
	left: 0;
	transform: translate(0%, 0%);
	animation: var(--animation-timing-function) var(--animation-duration) infinite
		square-move-2-animation-before;
}

.square-move-2::after {
	right: 0;
	bottom: 0;
	transform: translate(0%, 0%);
	animation: var(--animation-timing-function) var(--animation-duration) infinite
		square-move-2-animation-after;
}

@keyframes square-move-2-animation-before {
	0% {
		transform: translate(0%, 0%);
	}

	25% {
		transform: translate(100%, 0%);
	}

	50% {
		transform: translate(100%, 100%);
	}

	75% {
		transform: translate(0%, 100%);
	}

	100% {
		transform: translate(0%, 0%);
	}
}

@keyframes square-move-2-animation-after {
	0% {
		transform: translate(0%, 0%);
	}

	25% {
		transform: translate(-100%, 0%);
	}

	50% {
		transform: translate(-100%, -100%);
	}

	75% {
		transform: translate(0%, -100%);
	}

	100% {
		transform: translate(0%, 0%);
	}
}
.arrow-1-down {
	--size: 24px;
	--color: currentColor;
	--animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
	--animation-duration: 2s;
	position: relative;
	width: var(--size);
	height: var(--size);
	overflow-y: hidden;
}

.arrow-1-down::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color);
	clip-path: polygon(
		0% 50%,
		50% 100%,
		100% 50%,
		75% 50%,
		75% 0%,
		25% 0%,
		25% 50%,
		0% 50%
	);
	transform: translateY(-100%);
	animation: var(--animation-timing-function) var(--animation-duration) infinite
		arrow-1-down-animation;
}

@keyframes arrow-1-down-animation {
	0% {
		transform: translateY(-100%);
	}

	45% {
		transform: translateY(0%);
	}

	55% {
		transform: translateY(0%);
	}

	100% {
		transform: translateY(100%);
	}
}
.typing-1 {
	--size: 24px;
	--stroke-width: calc(var(--size) / 6);
	--color: currentColor;
	--animation-timing-function: linear;
	--animation-duration: 1s;
	position: relative;
	width: var(--size);
	height: var(--size);
	border-bottom: var(--stroke-width) solid var(--color);
}

.typing-1::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: calc(var(--stroke-width) / 2);
	left: 0;
	width: calc(var(--stroke-width) * 1.25);
	background-color: var(--color);
	clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
	transform: translateX(0) rotate(10deg);
	animation: var(--animation-timing-function) var(--animation-duration) infinite
		typing-1-animation;
}

@keyframes typing-1-animation {
	0% {
		transform: translateX(0) rotate(10deg);
	}

	85% {
		transform: translateX(var(--size)) rotate(10deg);
	}

	100% {
		transform: translateX(0) rotate(10deg);
	}
}
.circle-pulse-1 {
	--size: 24px;
	--color: currentColor;
	--animation-timing-function: linear;
	--animation-duration: 2s;
	position: relative;
	width: var(--size);
	height: var(--size);
}

.circle-pulse-1::before,
.circle-pulse-1::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color);
	border-radius: 50%;
	opacity: 1;
	transform: scale(0);
	animation: var(--animation-timing-function) var(--animation-duration) infinite
		circle-pulse-1-animation;
}

.circle-pulse-1::after {
	animation-delay: calc(var(--animation-duration) / 2);
}

@keyframes circle-pulse-1-animation {
	0% {
		opacity: 1;
		transform: scale(0);
	}

	100% {
		opacity: 0;
		transform: scale(1);
	}
}
.circle-packman-1 {
	--size: 24px;
	--stroke-width: calc(var(--size) / 2);
	--color: currentColor;
	--animation-timing-function: linear;
	--animation-duration: 1s;
	position: relative;
	width: var(--size);
	height: var(--size);
}

.circle-packman-1::before,
.circle-packman-1::after {
	content: "";
	position: absolute;
	inset: 0;
	border-width: var(--stroke-width);
	border-style: solid;
	border-radius: 50%;
}

.circle-packman-1::before {
	border-color: var(--color) transparent transparent var(--color);
	animation: var(--animation-timing-function) var(--animation-duration) infinite
		circle-packman-1-animation-before;
}

.circle-packman-1::after {
	border-color: transparent transparent var(--color) var(--color);
	animation: var(--animation-timing-function) var(--animation-duration) infinite
		circle-packman-1-animation-after;
}

@keyframes circle-packman-1-animation-before {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(45deg);
	}

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

@keyframes circle-packman-1-animation-after {
	0% {
		transform: rotate(0deg);
	}

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

	100% {
		transform: rotate(0deg);
	}
}
.square-rotate-1-horizontal {
	--size: 24px;
	--color: currentColor;
	--animation-timing-function: linear;
	--animation-duration: 1s;
	width: var(--size);
	height: var(--size);
	background-color: var(--color);
	transform: rotateY(0deg);
	animation: var(--animation-timing-function) var(--animation-duration) infinite
		square-rotate-1-horizontal-animation;
}

@keyframes square-rotate-1-horizontal-animation {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(180deg);
	}
}

div {
	margin: auto;
	margin-bottom: 3rem;
}