@charset "UTF-8";
@import url("https://fonts.bunny.net/css2?family=IM+Fell+English:ital@0;1&display=swap");
@import url("https://fonts.bunny.net/css2?family=Tangerine&display=swap");

:root {
  --clr-text: darkslategrey;
  --clr-link: darkblue;
  --clr-accent: darkred;
  --clr-curly: black;
  --ff-serif: "IM Fell English", serif;
  --ff-script: "Tangerine", cursive;
}

body {
  font-family: var(--ff-serif);
  color: var(--clr-text);
  font-size: 1.2rem;
  line-height: 1.7;
  hyphens: auto;
      padding-top: 20px;
    padding-left: 50px;
    padding-right: 50px;
}

@media only screen and (min-width: 980px){
.wrapper {
  display: grid;
  grid-template-columns: 1fr 650px 50px 1fr;
  grid-auto-columns: 0px;
  grid-template-rows: auto;
  grid-template-areas:
    ". title topright ."
    ". main . .";
}
}

@media only screen and (max-width: 980px){
  .wrapper {
    display: grid;
    grid-template-columns: auto;
    grid-auto-columns: 0px;
    grid-template-rows: auto;
    grid-template-areas:
    "topright"
      "title"
      "main";
  }
}

p {
  margin: 0;
  overflow: hidden;
}

.main p+p {
  text-indent: 1.5rem;
}

hr {
  border: none;
  display: block;
  main: "";
  background: var(--divider);
  height: 1.2rem;
  margin-top: 2.5rem;
  margin-bottom: 2.2rem;
}

h1,
h2,
h3 {
  color: var(--clr-text);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: normal;
  text-align: center;
  margin-top: 0.3rem;
  margin-bottom: 0.7rem;
}

h1 {
  font-size: clamp(2rem,6vw,3.75rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.18rem;
}


a.title {
  color: black;
  text-decoration: none;
}

a:not(.alpaca) {
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px dotted;
  color: var(--clr-link);
}

a:not(.alpaca):visited,
a:not(.alpaca):hover,
a:not(.alpaca):active {
  color: var(--clr-accent);
}

.main {
  grid-area: main;
}

.curly {
  font-family: var(--ff-script);
  font-size: 1.8rem;
  color: var(--clr-curly);
  margin-left: 100px;
  margin-right: 40px;
}

.topright {
  grid-area: topleft;
}

.topright p {
  margin-top: -1em;
  margin-left: -0.2rem;
}

.title {
  grid-area: title;
}

.topright {
  grid-area: topright;
}

.topright {
  font-family: var(--ff-script);
  font-size: 1.8rem;
  color: var(--clr-accent);
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  text-indent: 0;
  margin-left: auto; 
  margin-right: 0;
}