@keyframes square_extense {
	25% {
		transform: scaleY(2);
	}
	50% {
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(1);
	}
}
#loading-container {
	position: absolute;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #3f5262;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#loading-conatiner #sqare-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 500px;
	height: 500px;
	margin: 10px;
	display: flex;
}
#loading-container #loading-container__text {
	color: white;
	font-size: 50px;
	height: 150px;
}
#loading-container-done {
	display: none;
	visibility: hidden;
}
#square-container .square {
	display: inline-block;
	width: 50px;
	height: 200px;
	background-color: white;
	margin: 10px;
}
#square-container .square_1st {
	animation-name: square_extense;
	animation-duration: 1.5s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}
#square-container .square_2nd {
	animation-name: square_extense;
	animation-duration: 1.5s;
	animation-delay: 0.15s;
	animation-iteration-count: infinite;
}
#square-container .square_3rd {
	animation-name: square_extense;
	animation-duration: 1.5s;
	animation-delay: 0.3s;
	animation-iteration-count: infinite;
}
#square-container .square_4th {
	animation-name: square_extense;
	animation-duration: 1.5s;
	animation-delay: 0.45s;
	animation-iteration-count: infinite;
}
#square-container .square_5th {
	animation-name: square_extense;
	animation-duration: 1.5s;
	animation-delay: 0.6s;
	animation-iteration-count: infinite;
}