:root{
  --prime-bg-color: #EFD2CB90;
  --sec-bg-color: #EE9480;
  --border-color: #D65780;
  --prime-font-color: #363636;
}

h1{
  font-family: Arial;
  font-size: 32px;
  color: var(--prime-bg-color);
}

h2{
  font-family: Arial;
  font-size: 28px;
  font-color: var(--border-color);
}

p{
  font-family: Arial;
  font-size: 24px;
  color: var(--prime-font-color);
}

body{
  background-color: var(--sec-bg-color);
  background-size: cover;
  background-position-x: right;
  background-origin: border-box;
  background-repeat: norepeat;
  background-attachment: fixed;
}

.wrapper{
  align-items: start;
  margin: 0 auto 5vh auto;
  justify-content: center;
  width: 80vw;
  height: 100vh;
  gap: 0.5em;
}

.header{
  position: sticky;
  top: 10px;
  height: 8em;
  flex: 1;
  background-color: var(--sec-bg-color);
}

.banner{
  display: flex;
  justify-content: center;
}

.links{
  display: flex;
  justify-content: center;
}

.links .botton{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  background-color: var(--sec-bg-color);
  border-radius: 6px;
  height: 2em;
  margin: 0 1vw 0 1vw;
  background-color: var(--prime-bg-color);
}

.main{
  overflow: hidden;
  padding: 0 1em 0 1em;
  height: 75%;
  background-color: var(--prime-bg-color);
}

.text{
  height: 100%;
  overflow: auto;
  padding: 0 2em 0 2em;
  overscroll-behavior: contain;
}

.header,
.main{
  border: 3px solid var(--border-color);
  border-radius: 12px;
  margin: 1em;
  top: 1em;
}