:root {
  --cicle-gap: 0.5em;
  --cirle-size: 1.5em;
  --circle-full-width: calc(var(--cirle-size) + var(--cicle-gap));
  --scenario-3-animation-length: 15s;
  --pastel-red: #E32227;
  --pastel-blue: #1A7CFA;
}

.canvas {
	display: flex; 
	justify-content: center; 
	align-items: center;
}

.square, .circle, .empty-element {
	display: block;
	height: var(--cirle-size);
	width: var(--cirle-size);
	line-height: var(--cirle-size);
}

.square:not(:last-child), .circle:not(:last-child), .empty-element:not(:last-child) {
	margin-right: var(--cicle-gap);
}

.square, .circle {
	text-align: center;
	color: white;
	font-weight: bold;
	font-family: monospace;
}

.circle {
	border-radius: var(--cirle-size);
}

.square {
	border-radius: 0.3em;
}

.red {
	background-color: var(--pastel-red);
}

.blue {
	background-color: var(--pastel-blue);
}

.canvas-row {
	display: flex;
	height: 2em;
}

.canvas-gap {
	height: 1em;
}

.animation-scenario-1 > div {
	animation-duration: 4s; 
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.elements div {
	position: absolute;
}

.scenario-2 .elements > div {
	animation-duration: 8s; 
	animation-iteration-count: infinite;
}

.marriage div {
	width: 2em;
	text-align: center;
	font-size: 1.5em;
}

.scenario-3 {
	width: calc(10 * var(--circle-full-width));
	margin: 0 auto;
}

.scenario-3 .member {
	display: inline-block;
	position: relative;
	animation-duration: var(--scenario-3-animation-length); 
	animation-iteration-count: infinite;
}

.scenario-3 .odd {
	margin-bottom: var(--cicle-gap);
}

.scenario-3 .moving-canvas > div:not(:last-child) {
	margin-bottom: var(--cicle-gap);
}

.scenario-3 .moving-canvas {
	position: relative;
	animation-name: scenario-3-moving-canvas;
	animation-duration: var(--scenario-3-animation-length); 
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.scenario-3 .visible-canvas {
	overflow: hidden;
}

.fractions {
	display: flex;
}

.dynamic .fractions div {
	margin: 0.5em -0.125em;
}

.static .fractions div {
	margin: 0.5em;
}

.fractions div {
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	font-size: 1.25em;
	text-align: center;
	color: white;
	border-radius: 0.3em;
	font-weight: bold;
}

.fraction {
	z-index: 2;
	background-color: #E32227;
}

.dynamic .natural {
	left: -1.25em;
}

.natural {
	position: relative;
	z-index: 3;
	background-color: #1A7CFA;
	position: relative;
	animation-duration: 15s; 
	animation-iteration-count: infinite;
}

.scenario-5 {
	overflow: hidden;
	padding: 20px 0;
}

@keyframes scenario-5-x0-y0 {
	from {
		top: -100px;
	}

	to {
		top: 0px;
		z-index: 2;
	}
}


@keyframes scenario-3-odd-0 {
    0% {top: -100px}
	0% {top: -100px}
	6.4% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-1 {
    0% {top: -100px}
	3.2% {top: -100px}
	9.6% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-2 {
    0% {top: -100px}
	6.4% {top: -100px}
	12.8% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-3 {
    0% {top: -100px}
	9.6% {top: -100px}
	16% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-4 {
    0% {top: -100px}
	12.8% {top: -100px}
	19.2% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-5 {
    0% {top: -100px}
	16% {top: -100px}
	22.4% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-6 {
    0% {top: -100px}
	19.2% {top: -100px}
	25.6% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-7 {
    0% {top: -100px}
	22.4% {top: -100px}
	28.8% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-8 {
    0% {top: -100px}
	25.6% {top: -100px}
	32% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-9 {
    0% {top: -100px}
	28.8% {top: -100px}
	35.2% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-10 {
    0% {top: -100px}
	32% {top: -100px}
	38.4% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-11 {
    0% {top: -100px}
	35.2% {top: -100px}
	41.6% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-12 {
    0% {top: -100px}
	38.4% {top: -100px}
	44.8% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-13 {
    0% {top: -100px}
	41.6% {top: -100px}
	48% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-14 {
    0% {top: -100px}
	44.8% {top: -100px}
	51.2% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-15 {
    0% {top: -100px}
	48% {top: -100px}
	54.4% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-16 {
    0% {top: -100px}
	51.2% {top: -100px}
	57.6% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-17 {
    0% {top: -100px}
	54.4% {top: -100px}
	60.8% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-18 {
    0% {top: -100px}
	57.6% {top: -100px}
	64% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-19 {
    0% {top: -100px}
	60.8% {top: -100px}
	67.2% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-20 {
    0% {top: -100px}
	64% {top: -100px}
	70.4% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-21 {
    0% {top: -100px}
	67.2% {top: -100px}
	73.6% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-22 {
    0% {top: -100px}
	70.4% {top: -100px}
	76.8% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-23 {
    0% {top: -100px}
	73.6% {top: -100px}
	80% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}


@keyframes scenario-3-odd-24 {
    0% {top: -100px}
	76.8% {top: -100px}
	83.2% {top: 0px}
	95% {top: 0px}
	100% {top: -100px}
}



@keyframes scenario-3-even-0 {
    0% {top: 100px}
	0% {top: 100px}
	6.4% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-1 {
    0% {top: 100px}
	3.2% {top: 100px}
	9.6% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-2 {
    0% {top: 100px}
	6.4% {top: 100px}
	12.8% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-3 {
    0% {top: 100px}
	9.6% {top: 100px}
	16% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-4 {
    0% {top: 100px}
	12.8% {top: 100px}
	19.2% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-5 {
    0% {top: 100px}
	16% {top: 100px}
	22.4% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-6 {
    0% {top: 100px}
	19.2% {top: 100px}
	25.6% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-7 {
    0% {top: 100px}
	22.4% {top: 100px}
	28.8% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-8 {
    0% {top: 100px}
	25.6% {top: 100px}
	32% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-9 {
    0% {top: 100px}
	28.8% {top: 100px}
	35.2% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-10 {
    0% {top: 100px}
	32% {top: 100px}
	38.4% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-11 {
    0% {top: 100px}
	35.2% {top: 100px}
	41.6% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-12 {
    0% {top: 100px}
	38.4% {top: 100px}
	44.8% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-13 {
    0% {top: 100px}
	41.6% {top: 100px}
	48% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-14 {
    0% {top: 100px}
	44.8% {top: 100px}
	51.2% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-15 {
    0% {top: 100px}
	48% {top: 100px}
	54.4% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-16 {
    0% {top: 100px}
	51.2% {top: 100px}
	57.6% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-17 {
    0% {top: 100px}
	54.4% {top: 100px}
	60.8% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-18 {
    0% {top: 100px}
	57.6% {top: 100px}
	64% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-19 {
    0% {top: 100px}
	60.8% {top: 100px}
	67.2% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-20 {
    0% {top: 100px}
	64% {top: 100px}
	70.4% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-21 {
    0% {top: 100px}
	67.2% {top: 100px}
	73.6% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-22 {
    0% {top: 100px}
	70.4% {top: 100px}
	76.8% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-23 {
    0% {top: 100px}
	73.6% {top: 100px}
	80% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}


@keyframes scenario-3-even-24 {
    0% {top: 100px}
	76.8% {top: 100px}
	83.2% {top: 0px}
	95% {top: 0px}
	100% {top: 100px}
}



@keyframes scenario-3-moving-canvas {
    0% {left: 0}
	25.6% {left: 0}
	80% {left: -30em}
	95% {left: -30em}
	100% {left: 0}
}


.scenario-3 .moving-canvas {width: calc(var(--circle-full-width) * 25);}


@keyframes scenario-5-x0-y0 {
    0% {top: calc(-5em - 2.5em * 0); z-index: 3}
	4% {top: calc(-5em - 2.5em * 0); z-index: 3}
	10% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x0-y1 {
    0% {top: calc(-5em - 2.5em * 1); z-index: 3}
	12% {top: calc(-5em - 2.5em * 1); z-index: 3}
	18% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x0-y2 {
    0% {top: calc(-5em - 2.5em * 2); z-index: 3}
	24% {top: calc(-5em - 2.5em * 2); z-index: 3}
	30% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x0-y3 {
    0% {top: calc(-5em - 2.5em * 3); z-index: 3}
	40% {top: calc(-5em - 2.5em * 3); z-index: 3}
	46% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x0-y4 {
    0% {top: calc(-5em - 2.5em * 4); z-index: 3}
	60% {top: calc(-5em - 2.5em * 4); z-index: 3}
	66% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x0-y5 {
    0% {top: calc(-5em - 2.5em * 5); z-index: 3}
	84% {top: calc(-5em - 2.5em * 5); z-index: 3}
	90% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x1-y0 {
    0% {top: calc(-5em - 2.5em * 0); z-index: 3}
	8% {top: calc(-5em - 2.5em * 0); z-index: 3}
	14% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x1-y1 {
    0% {top: calc(-5em - 2.5em * 1); z-index: 3}
	20% {top: calc(-5em - 2.5em * 1); z-index: 3}
	26% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x1-y2 {
    0% {top: calc(-5em - 2.5em * 2); z-index: 3}
	36% {top: calc(-5em - 2.5em * 2); z-index: 3}
	42% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x1-y3 {
    0% {top: calc(-5em - 2.5em * 3); z-index: 3}
	56% {top: calc(-5em - 2.5em * 3); z-index: 3}
	62% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x1-y4 {
    0% {top: calc(-5em - 2.5em * 4); z-index: 3}
	80% {top: calc(-5em - 2.5em * 4); z-index: 3}
	86% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x2-y0 {
    0% {top: calc(-5em - 2.5em * 0); z-index: 3}
	16% {top: calc(-5em - 2.5em * 0); z-index: 3}
	22% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x2-y1 {
    0% {top: calc(-5em - 2.5em * 1); z-index: 3}
	32% {top: calc(-5em - 2.5em * 1); z-index: 3}
	38% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x2-y2 {
    0% {top: calc(-5em - 2.5em * 2); z-index: 3}
	52% {top: calc(-5em - 2.5em * 2); z-index: 3}
	58% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x2-y3 {
    0% {top: calc(-5em - 2.5em * 3); z-index: 3}
	76% {top: calc(-5em - 2.5em * 3); z-index: 3}
	82% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x3-y0 {
    0% {top: calc(-5em - 2.5em * 0); z-index: 3}
	28% {top: calc(-5em - 2.5em * 0); z-index: 3}
	34% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x3-y1 {
    0% {top: calc(-5em - 2.5em * 1); z-index: 3}
	48% {top: calc(-5em - 2.5em * 1); z-index: 3}
	54% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x3-y2 {
    0% {top: calc(-5em - 2.5em * 2); z-index: 3}
	72% {top: calc(-5em - 2.5em * 2); z-index: 3}
	78% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x4-y0 {
    0% {top: calc(-5em - 2.5em * 0); z-index: 3}
	44% {top: calc(-5em - 2.5em * 0); z-index: 3}
	50% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x4-y1 {
    0% {top: calc(-5em - 2.5em * 1); z-index: 3}
	68% {top: calc(-5em - 2.5em * 1); z-index: 3}
	74% {top: 0}
	100% {top: 0}
}


@keyframes scenario-5-x5-y0 {
    0% {top: calc(-5em - 2.5em * 0); z-index: 3}
	64% {top: calc(-5em - 2.5em * 0); z-index: 3}
	70% {top: 0}
	100% {top: 0}
}