.background,
.foreground{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.background{
  transform: translateZ(-10px);

  align-items: center;

  text-align: center;


  font-family: 'Cinzel', serif;

  color: #FF7F27;

  font-size: 30rem; 
  font-weight: bold;

  
  /* animations */

  opacity: 0;
  animation: introduction 350ms ease-in 1s;
  animation-fill-mode: forwards;

}

.foreground{
  transform: translateZ(-5px);

  
  align-items: center;

  text-align: center;
  vertical-align: bottom;

  font-family: 'Vollkorn SC', serif;
  color: #FF7F27;

  font-size: 10rem; 

  margin-top: 60rem;

  /* animations */

  opacity: 0;
  animation: introduction 1s ease-in 3s;
  animation-fill-mode: forwards;
}