body {
	margin: 0;
}

.loader-container {
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
	min-height: 100vh;
	background: #343A40;
}

.loader {
	position: relative;
	margin: auto;
}

.middle {
	top: 0;
	left: 0;
	width: 40px;
	height: 2px;
	background: white;
	position: absolute;
	animation: middleAnimation 2s infinite linear;
	animation-delay: -100ms;
}

.bottom {
	top: 0;
	left: 0;
	position: absolute;
	height: 30px;
	width: 2px;
	background: white;
	border-radius: 2px;
	transform-origin: bottom;
	transform: rotate(45deg);
	animation: bottomAnimation 4s infinite;
}

.bottom:nth-child(1) {
	animation-delay: -1000ms;
}

.bottom:nth-child(2) {
	animation-delay: -2000ms;
}

.bottom:nth-child(3) {
	animation-delay: -3000ms;
}

.bottom-section {
	position: absolute;
	transform: translateY(-16px);
}

.top-section {
	position: absolute;
	transform: translateY(16px);
	transform: scaleY(-1);
}

@keyframes bottomAnimation {
	0% {
		transform: rotate(45deg) scaleY(1);
	}
	25% {
		transform: rotate(0) scaleY(0.7);
	}
	50% {
		transform: rotate(-45deg) scaleY(1);
	}
	75% {
		transform: rotate(0) scaleY(0.7);
	}
	100% {
		transform: rotate(45deg) scaleY(1);
	}
}

@keyframes middleAnimation {
	0% {
		transform: translate(-19px, -9px) scaleX(1);
	}
	25% {
		transform: translate(-19px, -9px) scaleX(0.6);
	}
	50% {
		transform: translate(-19px, -9px) scaleX(1);
	}
	75% {
		transform: translate(-19px, -9px) scaleX(0.7);
	}
	100% {
		transform: translate(-19px, -9px) scaleX(1);
	}
}