html, body {
background-image: url("https://images.unsplash.com/photo-1564918866927-0922fe68c11e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1182&q=80");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100%;
}

img {

    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 6%;
    height: 6%;
}

h1 {
text-decoration-color: white;
text-align: center;
color: whitesmoke;
text-transform: uppercase;
text-decoration: solid;
}

 .jumbotron.jumbotron-fluid {
background: none;
}

*{
  padding: 0;
  margin: 0;
  
}

.container {
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
width: 100%;
}

.container span{
color: white;
text-transform: uppercase;
display: block;
}

.text1 {
    color: whitesmoke;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
background: transparent;
position: relative;
animation: text 3s 1;
}

.text2 {
font-size: 80px;
color: whitesmoke;
}

@keyframes text {
    0%{
        color:grey;
        margin-bottom: -40%;
    }
    30%{
        letter-spacing: 25px;
        margin-bottom:-40px ;
    }
    85%{
        letter-spacing: 8px;
        margin-bottom: -40px;
    }
}