@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");

body {
	display: grid;
	place-items: center;
	height: 100vh;
	overflow: hidden;
	position: relative;
	width: 100vw;
	background: #1e1f24;
	&:before,
	&:after {
		border-radius: 20px 20px 0 0;
		content: "";
		position: absolute;
		width: 100vw;
		background: radial-gradient(
					circle at center,
					#58c9ea 1px,
					transparent 1px,
					transparent 10px
				)
				50% 50% / 20px 20px,
			radial-gradient(
					circle at center,
					#58c9ea 1px,
					transparent 1px,
					transparent 10px
				)
				calc(50% + 10px) calc(50% + 10px) / 20px 20px;
		height: calc(50vh - 10px);
		box-shadow: inset 0 0 0 1px #f84c04;
		left: 0;
		top: calc(50% + 22.5px);
		animation: scroll 2s linear infinite -1.5s;
		@keyframes scroll {
			to {
				transform: translateX(-200vw);
			}
		}
	}
	&:after {
		width: 150vw;
		left: 150vw;
	}
	.wrap {
		width: 400px;
		height: 400px;
		text-align: center;
		position: absolute;
		transform-origin: 100% 0%;
		top: calc(50% - 200px);
		left: calc(50% - 400px);
		font-family: "JetBrains Mono";
		font-size: 50px;
		animation: wobble 2s linear infinite;
		&:nth-of-type(2) {
			animation-delay: -0.05s;
			z-index: -1;
			span {
				color: #1e1f24;
				animation: run2 2s ease-in-out infinite;
				
\-webkit-text-stroke: 2px #bb9c30;
			}
		}
		@keyframes wobble {
			0%,
			20%,
			40%,
			50%,
			80%,
			100% {
				transform: rotate(-5deg);
			}
			10%,
			30%,
			90% {
				transform: rotate(5deg);
			}
			70% {
				transform: rotate(0deg) scaleY(0.8) scaleX(1.1);
			}
		}
		span {
			color: #ebe9dc;
			position: absolute;
			offset-path: path("M 140 200 C 100 80 300 80 260 200 ");
			animation: run 2s ease-in-out infinite;
			@keyframes run2 {
				0%,
				20%,
				40%,
				80%,
				100% {
					offset-path: path("M 140 200 C 100 80 300 80 260 200 ");
				}
				10%,
				30%,
				90% {
					offset-path: path("M 50 200 C 100 80 300 80 350 200 ");
				}
				50%,
				60%,
				70% {
					offset-path: path("M 0 70 C 160 70 260 70 400 70 ");
				}
			}
			@keyframes run {
				0%,
				23.5%,
				43.5%,
				83.5%,
				100% {
					offset-path: path("M 140 200 C 100 80 300 80 260 200 ");
				}
				13.5%,
				33.5%,
				93.5% {
					offset-path: path("M 50 200 C 100 80 300 80 350 200 ");
				}
				50%,
				60%,
				70% {
					offset-path: path("M 0 70 C 160 70 260 70 400 70 ");
				}
			}
			@for $i from 1 through 7 {
				&:nth-of-type(#{$i}) {
					offset-distance: calc(#{($i - 1) * (100 / 6)} * 1%);
				}
			}
		}
	}
}