body {
    background-image    : url('../assets/background.png');
    background-size     : cover;
    background-repeat   : no-repeat;
    background-position : center center;
    height  : 100vh;
    margin  : 0;
}

.zoom-center {
    position    : absolute;
    top         : 40%;
    left        : 50%;
    transform   : translate(-50%, -50%) scale(0.5);
    animation   : zoomIn 1.2s ease-in-out forwards;
    max-width   : 220px;
    width       : 100%;
    height      : auto;
}

@keyframes zoomIn {
    from {
        transform   : translate(-50%, -50%) scale(0.5);
        opacity     : 0;
    }
    to {
        transform   : translate(-50%, -50%) scale(1);
        opacity     : 1;
    }
}

.loading-line {
    position            : absolute;
    top                 : 60%;
    left                : 50%;
    transform           : translateX(-50%);
    width               : 160px;
    height              : 4px;
    background-color    : white;
    border-radius       : 2px;
    overflow            : hidden;
    opacity             : 0;
    animation           : showLine 0.2s ease-in 1.2s forwards;
}

.loading-bar {
    width               : 50%;
    height              : 100%;
    background-color    : #43A047;
    border-radius       : 2px;
    animation           : loadingMove 1s linear infinite;
}

@keyframes showLine {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes loadingMove {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}