.wrapper{
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
}

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

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

  align-items: center;

  text-align: center;

  font-family: 'Cinzel', serif;
  color: #FF7F27;

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

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

.foreground{
  align-items: center;

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

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

  margin-top: 40rem;

  opacity: 0;
  animation: introduction .5s ease-in 400ms;
  animation-fill-mode: forwards; 
}

.spacer{
  aspect-ratio: 960/50;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.disturb1{ 
  background-image: url('peaks1.svg');
}

.disturb2{ 
  background-image: url('peaks2.svg');
}

main{
  background-color: #FF7F27;
  color: #821200;

  height: 80rem; 
}

.ul-p{
  display: flex;

  flex-direction: column;

  background-color: #FF7F27;
}

.p-list{
  padding: 10px;
  font-size: 1.5rem;
  
  text-decoration: underline;
  text-decoration-color: #00861A;

  display: inline-block;

  border-radius: 20px;
}

/* animation */

@keyframes introduction {
  100%{
    opacity: 1;
  }
}