.loader {
    position: fixed;
    left: 50%;
    top: 50svh;
    translate: -50% -50%;
    z-index: -10;
    white-space: nowrap;
    width: 12em;
    text-align: left;
    width: auto;
    text-align: center;
}

.loader .logo-large {
    width: 20em;
    margin: 0 auto;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader .logo-large svg {
    width: 100%;
    height: 100%;
}

.loader .dots {
    letter-spacing: -0.3em;
    position: absolute;
    text-align: left;
    margin-left: .3em;
}

.loader .text.fixed {
    /* display: block; */
}

.loader .text.dynamic {
    display: block;
    color: var(--lightgrey);
}

.dot.hidden {
    display: none;
}