<h1 class="challenge-title">Wait, it's loading</h1>
<h2 class="challenge-subtitle">#28ComponentsOfFebruaryDay12</h2>
<p class="challenge-part-of">Part of <a href="https://codepen.io/collection/DQRePJ" target="_blank">28 Components of February</a> collection.</p>

<div class="container">
	<div class="square-container">
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
	<div class="square-container">
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
	<div class="deadpools-easter-egg"></div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

$primary: #1dd3b0;
$secondary: #affc41;
$default: #d1d5da;
$defaultBg: #2f363d;
$dark: #c9d1d9;
$darkBg: #0d1117;

@keyframes squareMove {
	0%,
	10.5% {
		left: 0;
		top: 0;
	}
	12.5%,
	23% {
		left: 2rem;
		top: 0;
	}
	25%,
	35.5% {
		left: 4rem;
		top: 0;
	}
	37.5%,
	48% {
		left: 4rem;
		top: 2rem;
	}
	50%,
	60.5% {
		left: 4rem;
		top: 4rem;
	}
	62.5%,
	73% {
		left: 2rem;
		top: 4rem;
	}
	75%,
	85.5% {
		left: 0;
		top: 4rem;
	}
	87.5%,
	98% {
		left: 0;
		top: 2rem;
	}
	100% {
		left: 0;
		top: 0;
	}
}

@keyframes hueRotation {
	from {
		filter: hue-rotate(0deg);
	}
	to {
		filter: hue-rotate(360deg);
	}
}

* {
	box-sizing: border-box;
}

.sr-only {
	visibility: hidden;
}

.hidden {
	width: 0;
	height: 0;
	visibility: hidden;
	display: none;
	overflow: hidden;
}

html {
	font-size: 16px;
}

body {
	display: flex;
	padding: 0;
	margin: 0;
	align-items: center;
	flex-direction: column;
	min-height: 100vh;
	font-family: 'Comic Neue', cursive;
	position: relative;
	background-color: $darkBg;
}

.challenge-title {
	text-align: center;
	padding: 0;
	margin: 1rem 0 0.5rem;
	color: $primary;
	animation: hueRotation 10s linear infinite both;
	font-size: 2rem;
	font-weight: bold;
}

.challenge-subtitle {
	text-align: center;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 400;
	color: $dark;
}

.challenge-part-of {
	text-align: center;
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: $dark;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	a,
	a:visited {
		color: $dark;
		text-decoration-style: wavy;
		&:hover,
		&:active {
			color: lighten($dark, 10%);
		}
	}
}

.container {
	display: flex;
	margin: 5rem;
	transform: scale(.8);
}

.square-container {
	position: relative;
	width: 6rem;
	height: 6rem;
	transform: rotate(45deg);
	animation: hueRotation 10s linear infinite both;
	&:nth-of-type(2) {
		background-color: $darkBg;
		transform: rotate(45deg) translate(-5px, 5px);
	}
	.square {
		position: absolute;
		top: 0;
		left: 0;
		background-color: black;
		width: 1.5rem;
		height: 1.5rem;
		animation: squareMove 10s ease-in-out infinite both;
		background-image: linear-gradient(45deg, $secondary 40%, $primary 60%);
		background-size: cover;
  	background-position: center;
  	background-attachment: fixed;
		@for $i from 0 through 7 {
			&:nth-of-type(#{$i}) {
				animation-delay: -(10s / 7) * $i;
			}
		}
	}
}


.deadpools-easter-egg {
	display: flex;
	width: 300px;
	height: 300px;
	background-image: url('https://64.media.tumblr.com/2b5d0af2072483951c27cb0adfaafbf4/tumblr_obg0wj21lG1sa8ezpo6_250.gifv');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 100%);
	visibility: hidden;
	&.visible {
		visibility: visible;
	}
}

const dpsegg = document.querySelector('.deadpools-easter-egg');

setTimeout(() => {
	dpsegg.classList.add('visible');
}, 60000)