* {margin:0;padding:0;box-sizing:border-box;}
.section {display:flex; justify-content:center;align-items:center;}
.loader {position:relative;width:120px;height:120px; /*animation:animateHue 10s linear infinite;*/}
@keyframes animateHue{
	0%{filter:hue-rotate(0deg);}
	100%{filter:hue-rotate(360deg)};
}
.loader span{position:absolute;top:0;left:0;width:100%;height:100%; transform: rotate(calc(18deg*var(--i)));}
.loader span:before { content:'';position:absolute;top:0;left:0;width:15px;height:15px; border-radius: 50%; background:#fff;box-shadow:0 0 10px #000000,0 0 20px #000000,0 0 40px #000000,0 0 60px #000000,0 0 80px #000000,0 0 100px #000000; animation: animate 2s linear infinite; animation-delay: calc(0.1s * var(--i));transform:scale(0);}
@keyframes animate{
	0%{transform:scale(1);}
	80%,100%{transform:scale(0);}
}
.loading{
	background:#fff;
	height:75%;
    position: absolute;
    z-index: 2;
    width: 100%;
}
.content{top:0}
.loading.hidden {
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}