* {
	padding: 0;
	margin: 0;
}

#space {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-image: url("data:image/jpeg;base64,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");   
  background-position: center;
  background-size: cover;
  margin-bottom: 5px;
}

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: 30px;
  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 {
  from { 
  	background-color: Transparent;
  	color: white;
    padding: 10px 50px;
    border-radius: 10px;
  }
  
  to {
    background-color: white;
    color: black;
    padding: 10px 100px;
    border-radius: 50px;
  }
}

@keyframes colorShift-2 {
  0% {
    background-color: Transparent;
    color: white;
    padding: 10px 50px;
    border-radius: 10px;
  }
  
  12% {
    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;
  }
}