*{
  margin:0;
  padding:0;
}


:root{
  --page-1-color:steelblue;
  --page-2-color: coral;
  --page-3-color:teal;
  --page-4-color:slateblue;
}


body{
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}
a{
  text-decoration: none;
}
h1{
  font-size: 4rem;
  color:#fff;
  margin-bottom:2rem; 
}

/* first-page animation */
#first-page h1{
  transform: translatey(-360px);
  animation: animate1 2s forwards ease-in-out;
}
@keyframes animate1{
  to{
    transform: translateY(0);
  }
}

p{
  color:#fff;
  font-size: 1.5rem;
  padding:1rem 3rem;
  text-align:center;  
}
#first-page p{
  transform: translatex(-1200px);
  animation: animate1 2s forwards ease-in-out 1s;
}
@keyframes animate1{
  to{
    transform: translatex(0);
  }
}


.btn{
  background: #f4f4f4;
  color:#333;
  padding: 1.5rem 2rem;
  transition: all .3s ease-in-out;
  display: inline-block;
}
.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  height:100vh;  
}
.btn:hover{
  background-color: #333;
  color:white; 
  border-radius: 20px; 
}


#first-page{ background-color: var(--page-1-color); }
#second-page{ background-color: var(--page-2-color); }
#third-page{ background-color: var(--page-3-color); }
#fourth-page{ background-color: var(--page-4-color); }

.page div:last-child{
  display: flex;  
}
.page div .btn{
  margin-right: 1rem;
}