body{
    margin:0;
}

div {
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;
}

div img {
    text-transform: none;
    margin: 0 20px;
    opacity: 0.0;
    animation: fadeIn ease 8s;
    -webkit-animation: fadeIn ease 8s;
}

div p {
    position: absolute;
    top: 50%;
    margin-top: 70px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes typingWait {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes typing {
    0% {
        content: "";
        color: #000;
        font-size: 24px;
    }
    4% {
        content: "M";
        font-size: 24px;
    }
    8% {
        content: "Me";
        font-size: 24px;
    }
    12% {
        content: "Mer";
        font-size: 24px;
    }
    16% {
        content: "Merc";
        font-size: 24px;
    }
    20% {
        content: "Merca";
        font-size: 24px;
    }
    24% {
        content: "Mercad";
        font-size: 24px;
    }
    28% {
        content: "Mercado";
        font-size: 24px;
    }
    32% {
        content: "Mercado ";
        font-size: 24px;
    }
    36% {
        content: "Mercado L";
        font-size: 24px;
    }
    40% {
        content: "Mercado Li";
        font-size: 24px;
    }
    44% {
        content: "Mercado Liv";
        font-size: 24px;
    }
    48% {
        content: "Mercado Livr";
        font-size: 24px;
    }
    52% {
        content: "Mercado Livre";
        font-size: 24px;
    }
    56% {
        content: "Mercado Livre ";
        font-size: 24px;
    }
    60% {
        content: "Mercado Livre d";
        font-size: 24px;
    }
    64% {
        content: "Mercado Livre de";
        font-size: 24px;
    }
    68% {
        content: "Mercado Livre de ";
        font-size: 24px;
    }
    72% {
        content: "Mercado Livre de E";
        font-size: 24px;
    }
    76% {
        content: "Mercado Livre de En";
        font-size: 24px;
    }
    80% {
        content: "Mercado Livre de Ene";
        font-size: 24px;
    }
    84% {
        content: "Mercado Livre de Ener";
        font-size: 24px;
    }
    88% {
        content: "Mercado Livre de Energ";
        font-size: 24px;
    }
    92% {
        content: "Mercado Livre de Energi";
        font-size: 24px;
    }
    96% {
        content: "Mercado Livre de Energia";
        font-size: 24px;
    }
    99% {
        content: "Mercado Livre de Energia";
        font-size: 24px;
    }
    100% {
        content: "";
    }
}

.output-text:after {
    font-size: 24px;
    content: "";
    color: #000;
    animation: typing 5s linear 1s alternate forwards;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    51% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.caret-cursor {
    display: inline-block;
    height: 18px;
    width: 2px;
    margin: 2px 7px;
    font-size: 40px;
    background: #000;
    vertical-align: text-bottom;
    animation: blink 0.4s linear infinite alternate;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}