*,
*::before,
*::after
{
  box-sizing: border-box;
} /* this now specifies the border width and height instead of the content box width and height making it easier to 
size and shape elements*/

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

body{
  background-color: #821200;
  padding: 0;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;

  font-family: 'Vollkorn SC', serif;
  font-weight: bold;
}

body .wrapper::-webkit-scrollbar{
  width: 1rem;
}



body .wrapper::-webkit-scrollbar-thumb{
  background: #FF7F27;
  border-radius: 20px;
}

header{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transform-style: preserve-3d;
  z-index: -1;
}

section{
  padding-block: 2rem;
}

h2{
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  text-decoration: underline;

  display: inline-block;
  border-radius: 20px;
  
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 5px;

  color:#821200; /* < this is the new header maybe? you can potentionaly use the classic
  shades. */
}

li,
p{
  color:#FFBEC1;
  font-size: 1.7rem;
}

ul{
  color: #821200;
}

a{
  text-decoration: none;
}

/*-- animation sources --*/

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

@keyframes fadeaway {
  100%{
    opacity: 0;
  }
}

/* animation: shake 0.5s; */

/* When the animation is finished, start again */
/* animation-iteration-count: infinite; */

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}