body{
    height: 100vh;
    display: grid;
    place-items: center;
}

.reveal-text-container .reveal-text{
    font-family:"Caveat", sans-serif;
    text-transform: uppercase;
    font-size: 60px;
    font-weight: 800;
    position: relative;
    color: transparent;

    animation: showText forwards;
    animation-delay:1200ms;
}

.reveal-text-container .reveal-bg{
    position: absolute;
    height: 100%;
    width: 50;
    background: #1a1a1a;
    left: 0;

    animation: revealText 1200ms ease-out;

}

@keyframes revealText{
    80%{
        width: 100%;
        left:0;
    
    }

    100%{
        width: 0%;
        left:100%;

    }
}

@keyframes showText{
    to{
        color: #000000;
    }
}

input{
    width: 270px;
    height:80px;
    border:0;
    outline: none;
    background: #2f2f2f;
    color: #fff;
    font-size: 22px;
    border-radius: 40px;
    text-align: center;
    box-shadow: 0 6px 20px -5px rgba(0,0,0,0.4);
    margin-bottom: 20px;
}