:root{
  --prime-bg-color: #361D2E99;
  --sec-bg-color: #E5BE9E;
  --border-color: #D90368;
  --prime-font-color: #E5BE9E;
}

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

h2{
  font-family: Arial;
  font-size: 32px;
  color: var(--prime-font-color);
  text-transform: full-width uppercase;
  text-shadow: 0.05em 0.05em 0.2em var(--border-color);
}

p{
  font-family: Arial;
  font-size: 26px;
  color: var(--prime-font-color);
  text-transform: capitalize;
  text-shadow: 0.07em 0.07em var(--border-color);
}

body{
  overflow: hidden;
  background-image: url('./background.png');
  background-size: cover;
  background-position-x: right;
  background-origin: border-box;
  background-repeat: norepeat;
  background-attachment: fixed;
}

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

.header{
  top: 20px;
  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: 49em;
  background-color: var(--prime-bg-color);
}

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

.foot{
  background-color: var(--sec-bg-color);
  display: flex;
  align-items: center;
  height: 1.5em;
  justify-content: center;
  color: var(--prime-bg-color);
}

.foot div{
  margin: 0 5em 0 5em;
}

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