:root {
    --pdf-color: #e74c3c;
    --img-color: #2ecc71;
    --doc-color: #3498db;
}

.loader-container {
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    color: #555;
    width: 100%;
    background-color: white;
    overflow: hidden;
    height: 100%;
    overscroll-behavior: contain;
}

    .loader-container.hidden {
        display: none !important;
    }

.stack {
    position: absolute;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    background-color: white;
    z-index: 9999;
}

.files {
    position: absolute;
    top: 40vh;
    left: 45vw;
}

.file {
    position: absolute;
    width: 150px;
    height: 180px;
    background: white;
    border-radius: 4px;
    border: 2px solid #ddd;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
    left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    transform: translateY(calc(var(--i) * -8px));
    animation: fileLoop 3s infinite ease-in;
    animation-delay: calc(var(--i) * 0.5s);
    opacity: 0;
    will-change: transform, opacity;
}

.pdf {
    --i: 0;
    border-color: var(--pdf-color);
}

    .pdf .label {
        background: var(--pdf-color);
    }

.img {
    --i: 1;
    border-color: var(--img-color);
}

    .img .label {
        background: var(--img-color);
    }

.doc {
    --i: 2;
    border-color: var(--doc-color);
}

    .doc .label {
        background: var(--doc-color);
    }

.label {
    color: white;
    font-size: 30px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 2px;
    position: absolute;
    top: 10px;
}

.lines {
    width: 85%;
    height: 5px;
    background: #eee;
    margin-top: 90px;
    box-shadow: 0 8px 0 #eee, 0 16px 0 #eee;
}


@keyframes fileLoop {
    0% {
        transform: translateY(calc(var(--i) * -8px - 25px)) scale(0.95);
        opacity: 0;
    }

    15% {
        transform: translateY(calc(var(--i) * -8px)) scale(1);
        opacity: 1;
    }

    60% {
        transform: translateY(calc(var(--i) * -8px + 10px)) translateX(calc(var(--i) * 6px)) scale(1);
        opacity: 1;
    }

    85% {
        transform: translateY(calc(var(--i) * -8px + 40px)) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateY(calc(var(--i) * -8px + 45px)) scale(0.88);
        opacity: 0;
    }
}