#percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #868686;
    font-weight: bold;
    font-size: 4vh;
    text-shadow: 0 0 0.5em #868686;
    z-index: 1011;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15vh;
    height: 15vh;
    border-radius: 50%;
    border: 1.5vh solid #868686;
    border-top-color: #2D2D2D;
    box-shadow: 0 0 2vh #5A5A5A;
    animation: 2s infinite loading;
    z-index: 1010;
}

@keyframes loading {
    from {transform: translate(-50%, -50%) rotate(0deg);}
    to {transform: translate(-50%, -50%) rotate(360deg);}
}

.hidden {
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
    z-index: -1000;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        display: none;
    }
}

#app {
    opacity: 0;
    visibility: hidden;
}

.visible {
    animation: fadeIn 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    100% {
        opacity: 1;
        visibility: visible;
    }
}