html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Exo', sans-serif;
}

main {
    height: 100%;
    width: 100%;
    
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;

    gap: 1rem;
}

main > p {
    font-size: 14pt;
    margin: 0;
}

a, a:visited {
    color: #2b199b;
}

/* https://css-loaders.com/zig-zag/ */
/* HTML: <div class="loader"></div> */
.loader {
    display: inline-grid;
    animation: l10-0 2s infinite steps(1);
}

.loader:before,
.loader:after {
    content: "";
    height: 27px;
    aspect-ratio: 5;
    --c1: #1c1259 90deg, #0000 0;
    --c2: #6950ff  90deg, #0000 0;
    background:
        conic-gradient(from 135deg at top, var(--c1)),
        conic-gradient(from -45deg at bottom, var(--c2)) 12.5% 100%;
    background-size: 20% 50%;
    background-repeat: repeat-x;
    clip-path: inset(0 100% 0 0);
    animation: l10-1 1s infinite linear alternate;
}

.loader:after {
    scale: -1 1;
}

@keyframes l10-0 {
    50% {
        scale: -1 1
    }
}

@keyframes l10-1 {
    to {
        clip-path: inset(0)
    }
}