.loader {
    --loader-size: calc(var(--block-size) / 2);
    --loader-size-half: calc(var(--loader-size) / 2);
    --loader-size-half-neg: calc(var(--loader-size-half) * -1);
    --light-color: rgba(255, 255, 255, 0.3);
    --dot-size: 5px;
    --dot-size-half: calc(var(--dot-size) / 2);
    --dot-size-half-neg: calc(var(--dot-size-half) * -1);
    
    display: block;
    position: relative;
    margin: 0 auto;
    width: var(--loader-size);
    color: white;
}

.loader::before,
.loader::after {
	content: '';
	position: absolute;
}

/**
	loader--3
**/
.loader--3 {
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 1.2s;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--light-color);
	border-radius: 50%;
	animation: loader-3 calc(var(--anim-duration) * 3) linear infinite;
}

.loader--3::before,
.loader--3::after {
	width: var(--dot-size);
	aspect-ratio: 1 / 1;
	background: currentColor;
	border-radius: 50%;
	top: var(--dot-size-half-neg);
	left: calc(50% - var(--dot-size-half));
	animation: loader-3 var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
	transform-origin: center calc(var(--loader-size-half) + var(--dot-size-half) - 1px);
}

.loader--3::after {
	animation-delay: calc(var(--anim-duration) / 3 * -1);
}

@keyframes loader-3 {
	100% {
		transform: rotate(1turn);
	}
}

/**
	miscs
**/

.container {
    --block-size: 12vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
}

.item	{
	display: flex;
	place-items: center;
	border-radius: 4px;
    position: relative;
	transition: opacity 0.4s ease;
}

.container:hover .item {
	opacity: 1;
}

.container:hover .item:hover {
	opacity: 1;
}

*, *::before, *::after {
	box-sizing: border-box;
}

#loader-container {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#loader-container.show {
    visibility: visible;
    opacity: 1;
}

#main-container {
    padding-top: 2rem;
}