main {
	display: grid;
	place-content: center;
}

.block {
	position: relative;

	padding: 5rem;

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	place-content: center;
	aspect-ratio: 1;
}
.block::before  {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;

	background-image:
		linear-gradient(90deg, #FFF 50%, transparent 50%),
		linear-gradient(90deg, #FFF 50%, transparent 50%),
		linear-gradient(0, #FFF 50%, transparent 50%),
		linear-gradient(0, #FFF 50%, transparent 50%);
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px;
	animation: marching-ants .15s infinite linear;
	pointer-events: none;
}

@keyframes marching-ants {
	0% {
		background-position: 0 0, 10px 100%, 0 10px, 100% 0;
	}
	100% {
		background-position: 10px 0, 0 100%, 0 0, 100% 10px;
	}
}


.one, .two {
	padding: 1rem;

	display: grid;
	place-content: center;
	aspect-ratio: 1;

	border-radius: 50%;

	user-select: none;
}

.one {
	background-color: #5000F1;
	box-shadow: 0 0 20px 1px #5000F1;

	color: #F4CA16;
	text-shadow: 0 0 10px #FFF;
}
.two {
	background-color: #F4CA16;
	box-shadow: 0 0 20px 1px #F4CA16;

	color: #5000F1;
	text-shadow: 0 0 10px #000;
}