/* HTML: <div class="loader"></div> */
.loader {
    width: fit-content;
    font-size: min(30vh, 30vw);
    line-height: 1.5;
    font-family: "concert-font";
    font-weight: bold;
    color: #0000;
    -webkit-text-stroke: 1px #fff;
    background: radial-gradient(1.13em at 50% 1.6em, #f43f5e 99%, #0000 101%)
            calc(50% - 1.6em) 0/3.2em 100% text,
        radial-gradient(1.13em at 50% -0.8em, #0000 99%, #f43f5e 101%) 50% 0.8em/3.2em
            100% repeat-x text;
    animation: l9 2s linear infinite;
}
.loader:before {
    content: "Kawnek";
}
@keyframes l9 {
    to {
        background-position: calc(50% + 1.6em) 0, calc(50% + 3.2em) 0.8em;
    }
}

#loading-wrapper.fade {
    opacity: 0;
    animation-name: fadeOutOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1.5s;
}
@keyframes fadeOutOpacity {
    0% {
        opacity: 1;
        left: 0;
    }
    100% {
        opacity: 0;
        /* left: calc(-100vw + 5px); */
        /* top: calc(- 100vh + 5px);
        scale: 0.001; */
    }
}