body {
    font-family: 'Lato', sans-serif;
    background-color: #000;
    color: #fff;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
    overflow-x: hidden;
    position: absolute;
}

p {
    font-size: 1.5em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 10px;
}

img {
    max-width: 30vw;
}

.loading {
    border: 1px solid grey;
    width: 30vw;
    height: 2vh;
    border-radius: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.bar {
    background-color: rgb(40, 204, 216);
    width: 20vw;
    height: 1vh;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    margin-left: 5px;
    box-shadow: 2px 2px 20px 2px rgb(45, 192, 211);
    animation-name: loading;
    animation-fill-mode: forwards;
    animation-duration: 10s;
}

@keyframes loading {
    0% {
        width: 0vw;
    }

    100% {
        width: 25vw;
    }
}

@media only screen and (max-width:700px) {

    p {
        font-size: 10px;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 10px;
    }

    img {
        max-width: 60vw;
    }

    .loading {
        border: 1px solid grey;
        width: 90vw;
        height: 2vh;
        border-radius: 15px;
        margin-top: 2vh;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .bar {
        background-color: rgb(163, 24, 163);
        width: 70vw;
        height: 1vh;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        margin-left: 5px;
        box-shadow: 2px 2px 20px 2px rgb(163, 24, 163);
        animation-name: loading;
        animation-fill-mode: forwards;
        animation-duration: 10s;
    }

    @keyframes loading {
        0% {
            width: 0vw;
        }

        100% {
            width: 75vw;
        }
    }
}