html
{
	font-family: "Times New Roman", serif;
	font-size: 20px;
	box-sizing: border-box;

	--box-width: 30rem;
	--box-height: 16rem;
	--screen-right: calc(100% - var(--box-width));
	--screen-bottom: calc(100% - var(--box-height));
	

}

*
{
	user-select: none;
}

body
{
	background: red;

	h1
	{
		text-align: center;
		color: navy;
		padding: 2rem;
		width: 60vw;
		border: solid 5px darkgreen;
		font-size: 4rem;
		text-align: center;
		background: orange;
		margin: clamp(20vh,100px,40vh) auto;
		position: relative;
		z-index: 10;
		display: block;
		opacity: 60%;
		animation: 1s infinite alternate throb;

		b
		{
			font-size: 6rem;
		}
	}

	section
	{
		width: var(--box-width);
		height: var(--box-height);
		border: solid 4px purple;
		padding: 1rem;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		font-size: 1.25rem;
		font-weight: bold;
		text-align: center;

		&.first 
		{
			background: limegreen;
			color: purple;
			animation: 5s infinite normal amiga-1;
			z-index: 1;
		}

		&.second
		{
			background: fuchsia;
			color: yellow;
			animation: 7s infinite alternate amiga-2;
			z-index: 5;
		}

		&.third
		{
			background: yellow;
			color: maroon;
			animation: 4s infinite alternate amiga-3;
			z-index: 3;
		}
	}
}  

@keyframes throb
{
	0%
	{
		display: block;
		opacity: 10%;
	}

	100% 
	{
		display: block;
		opacity: 100%;
	}
}

@keyframes amiga-1
{
	0%
	{
		top: 0;
		left: 0;
	}

	20% 
	{
		top: var(--screen-bottom);
		left: calc(var(--screen-right) / 3);
	}

	40% 
	{
		top: calc(var(--screen-bottom) / 3);
		left: var(--screen-right);
	}

	60% 
	{
		top: 0;
		left: calc(var(--screen-right) / 2);
	}

	80% 
	{
		top: var(--screen-bottom);
		left: calc(var(--screen-right) * 2 / 3);
	}

	100%
	{
		top: 0;
		left: 0;
	}
}

@keyframes amiga-2
{
	0%
	{
		top: var(--screen-bottom);
		left: var(--screen-right);
	}

	33.33% 
	{
		top: 0;
		left: calc(var(--screen-right) * 2 / 3);
	}

	66.66% 
	{
		top: var(--screen-bottom);
		left: calc(var(--screen-right) / 3);
	}

	100% 
	{
		top: 0;
		left: 0;
	}
}

@keyframes amiga-3
{
	0% 
	{
		top: calc(var(--screen-bottom) / 3);
		left: var(--screen-right);
	}

	20%
	{
		top: 0;
		left: 0;
	}

	40% 
	{
		top: var(--screen-bottom);
		left: calc(var(--screen-right) * 2 / 3);
	}

	60% 
	{
		top: 0;
		left: calc(var(--screen-right) / 2);
	}

	80%
	{
		top: 0;
		left: 0;
	}

	100% 
	{
		top: var(--screen-bottom);
		left: calc(var(--screen-right) / 3);
	}
}