main.scss

$backgroundcolor: #2b2a2d;
$bordercolor: #ffc39c;
$elementcolor: $bordercolor;

@keyframes square1
{
	100% { transform: rotate(360deg); }
}

@keyframes square2
{
	0% { transform: rotate(0deg); }
	13% { transform: rotate(45deg); }
	25% { transform: rotate(90deg); }
	38% { transform: rotate(135deg); }
	50% { transform: rotate(180deg); }
	63% { transform: rotate(225deg); }
	75% { transform: rotate(270deg); }
	88% { transform: rotate(315deg); }
	100% { transform: rotate(360deg); }
}

@keyframes square3
{
	100% { transform: rotate(-360deg); }
}

@keyframes square4
{
	100% { transform: scale(3.2); }
}

@keyframes square5
{
	100% { transform: scale(3.2); }
}

@keyframes square6
{
	100% { transform: scale(3.2); }
}

@keyframes square7
{
	50% { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}

@keyframes square8
{
	50% { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}

@keyframes square9
{
	100% { transform: rotate(360deg); }
}

*
{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body
{
	height: 100%;
}

body
{
	background-color: $backgroundcolor;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: 'Montserrat', sans-serif;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.square
{
	$size: 300px;
	min-width: $size;
	height: $size;
	display: flex;
	flex-direction: column;
	position: relative;
	margin-left: calc((100vw - #{$size}) / 2);
	margin-right: calc((100vw - #{$size}) / 2);
	overflow: hidden;
	padding: 2rem;
	border: 1px solid $bordercolor;

	.row-even
	{
		.col-even
		{
			.triangle
			{
				clip-path: polygon(50% 100%, 0% 0%, 100% 0%) !important;
			}
		}

		.col:not(.col-even)
		{
			.triangle
			{
				clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
			}
		}
	}

	.row:not(.row-even)
	{
		.col-even
		{
			.triangle
			{
				clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
			}
		}

		.col:not(.col-even)
		{
			.triangle
			{
				clip-path: polygon(50% 100%, 0% 0%, 100% 0%) !important;
			}
		}
	}

	.row
	{
		display: flex;
		justify-content: center;

		.col
		{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.circle
			{
				background-color: $elementcolor;
				height: 20%;
				width: 20%;
				border-radius: 50%;
				animation-direction: alternate;
			}

			.triangle
			{
				background-color: $elementcolor;
				height: 70%;
				width: 70%;
				clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
			}

			.spinny
			{
				background-color: $elementcolor;
				width: 7%;
				height: 100%;
				border-radius: 50px;
			}
		}
	}
}

.disabled
{
	visibility: hidden;
}

#viewbox
{
	width: 100%;
	height: 80%;
	overflow-x: hidden;

	#slider
	{
		display: flex;
		align-items: center;
		width: auto;
		height: 100%;
		transition: margin-left .5s ease;
	}
}

#controls
{
	width: 100%;
	flex-grow: 1;
	display: flex;
	justify-content: space-between;

	#leftarrow, #rightarrow
	{
		color: $elementcolor;
		display: inline-block;
		font-size: 3.5rem;
		font-weight: normal;
		cursor: pointer;
	}

	#leftarrow
	{
		margin-left: 3rem;
	}

	#rightarrow
	{
		margin-right: 3rem;
	}
}

#square1
{
	.spinny
	{
		animation: square1 4s linear infinite;
	}
}

#square2
{
	.spinny
	{
		animation: square2 4s ease-in-out infinite;
	}

	.col-even
	{
		.spinny
		{
			width: 100% !important;
			height: 7% !important;
		}
	}
}

#square3
{
	.spinny
	{
		animation: square3 4s ease-in-out infinite;
	}
}

#square4
{
	.circle
	{
		animation: square4 2s ease infinite alternate;
	}
}

#square5
{
	.circle
	{
		animation: square5 2s linear infinite alternate;
	}
}

#square6
{
	.circle
	{
		animation: square6 1s linear infinite alternate;
	}
}

#square7
{
	.triangle
	{
		animation: square7 4s ease-in-out infinite;
	}
}

#square8
{
	.col-even
	{
		.triangle
		{
			animation: square8 3s ease-in-out infinite alternate;
		}
	}

	.col:not(.col-even)
	{
		.triangle
		{
			animation: square8 3s ease-in-out infinite alternate-reverse;
		}
	}
}

#square9
{
	.triangle
	{
		animation: square9 3s ease infinite alternate;
	}
}

@media (min-width: 576px)
{
	.square
	{
		$size: 220px;
		min-width: $size;
		height: $size;
		margin-left: calc((100vw - #{$size}) / 2);
		margin-right: calc((100vw - #{$size}) / 2);
	}

	#viewbox
	{
		height: 70%;
	}

	#controls
	{
		align-items: center;
	}
}

@media (min-width: 768px)
{
	.square
	{
		$size: 600px;
		min-width: $size;
		height: $size;
		margin-left: calc((100vw - #{$size}) / 2);
		margin-right: calc((100vw - #{$size}) / 2);
	}

	#controls
	{
		#leftarrow, #rightarrow
		{
			font-size: 7rem;
		}

		#leftarrow
		{
			margin-left: 10rem;
		}

		#rightarrow
		{
			margin-right: 10rem;
		}
	}
}

@media (min-width: 992px)
{
	.square
	{
		$size: 450px;
		min-width: $size;
		height: $size;
		margin-left: calc((100vw - #{$size}) / 2);
		margin-right: calc((100vw - #{$size}) / 2);
	}

	#controls
	{
		justify-content: center;
		#leftarrow
		{
			margin-right: 10rem;
		}

		#rightarrow
		{
			margin-left: 10rem;
		}
	}
}

@media (min-width: 1200px)
{
	.square
	{
		$size: 400px;
		min-width: $size;
		height: $size;
		margin-left: calc((100vw - #{$size}) / 2);
		margin-right: calc((100vw - #{$size}) / 2);
	}

	#controls
	{
		align-items: flex-start;

		#leftarrow, #rightarrow
		{
			font-size: 5rem;
		}

		#leftarrow
		{
			margin-right: 7rem;
		}

		#rightarrow
		{
			margin-left: 7rem;
		}
	}
}