div.loader {
    height: 100%;
    width: 100%;
    background-color: var(--color-accent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1;
    visibility: visible;
}

div.loader div.circle {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid white;
    animation:
        pulseAnimation 0.8s infinite linear alternate,
        rotateAnimation 1.6s infinite linear;
}

@keyframes pulseAnimation {
    0%    { clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); }
    12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); }
    25%   { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%); }
    50%   { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0 100%); }
    62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 0, 100% 100%, 50% 100%, 0 100%); }
    75%   { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%); }
    100%  { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%); }
}

@keyframes rotateAnimation {
    0%    { transform: scaleY(1) rotate(0deg); }
    49.99%{ transform: scaleY(1) rotate(135deg); }
    50%   { transform: scaleY(-1) rotate(0deg); }
    100%  { transform: scaleY(-1) rotate(-135deg); }
}