.loader {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--colour-1) ;
border-right-color: var(--colour-2);
animation: l2 1s infinite linear;
}
@keyframes l2 {to{transform: rotate(1turn)}}#preloader {
background      : var(--preloader-bg);
width           : 100%;
height          : 100vh;
overflow        : hidden;
position        : fixed;
top             : 0;
left            : 0;
z-index         : 200;
display         : flex;
justify-content : center;
align-items     : center;
opacity         : 1;
visibility      : visible;
}#preloader.fade-out {
opacity    : 0;
visibility : hidden;
transition : opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}.fade-in {
opacity        : 0;
visibility     : hidden;
pointer-events : auto;
transition     : all 1s ease-in-out;
}.fade-in.visible {
opacity        : 1;
visibility     : visible;
pointer-events : auto;
}.fade-out-only {
opacity    : 1;
visibility : visible;
transition : all 0.5s ease-in-out;
}.fade-out-only.fade-out {
opacity    : 0;
visibility : hidden;
}