*
{
	padding: 0;
  margin: 0;
}

#splash
{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 50vh;
  background-image: url("https://images.unsplash.com/photo-1586331817969-fae4a77398ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
  background-position: center;
  background-size: cover;
  margin-bottom: 0;
  animation-delay: 3s;
}

h1
{
	color: white;
  font-weight: 100;
  font-size: 42px;
	font-family: arial;
  animation-delay: 3s;
}

button
{
  padding: 10px 50px; 
  border: 2px solid white;
  background-color: transparent;
  color: white;
  border-radius: 10px;
  animation-delay: 1s;
  font-size: 20px;
  animation-name: colorShift;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.ex-1
{
  background-size: contain;
  background-repeat: no-repeat;
}

.ex-2
{
  background-size: 50%;
  background-repeat: no-repeat;
}

@keyframes colorShift
{
  0% 
  {
    background-color: transparent;
  	color: white;
    padding: 10px 100px;
    border-radius: 50px;
  }
  
  22%
  {
   background-color: green;
    color: red;
    padding: 10px 80px;
    border-radius: 20%
  }
  
  50%
  {
  	background-color: red;
    color: green;
    padding: 10px 20px;
    border-radius: 50%;
  }
  
  100%
  {
    background-color: white;
  	color: black;
    padding: 10px 100px;
    border-radius: 50px;
  }
}