html,
body {
      font-size: 16px;
      /* base font reset */
      margin: 0;
      padding: 0;
      background: url(background.png);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-color: #120c10;
      }


.grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: max-content auto max-content;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  grid-template-areas:
    "header"
    "main"
    "section"
    "footer";
      background-color: #120c10;
}


footer { grid-area: footer;
      font-size: 78%;
      text-align: center;
      color: #987074;
      font-family: 'Courier Prime', monospace;
      padding: 5rem 2rem 2rem 2rem;}

header { grid-area: header; text-align: center; }

.resize {
  max-width: 100%;
  height: auto;
  margin: 0; padding: 0;
}


.sep {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
  width: auto;
  text-align: center;
}

main { grid-area: main;
      text-align: justify;
      color: #c8b6b7;
      padding: 1rem 0rem 0rem 0rem;
      font: 88% "Noto Sans", sans-serif;
      line-height: 200%;}

blockquote {
      margin-top: 2rem;
      padding: 1rem 2.5rem 1rem 2.5rem;
      font: 110% "Courier Prime", sans-serif;
      border-left: 10px solid #3e2f3c;
      border-right: 10px solid #3e2f3c;
      line-height: 200%;
      }

section {grid-area: section;
      text-align: center;
      font-size: 90%;
      line-height: 200%;
      color: #c8b6b7;
      font: 88% "Noto Sans", sans-serif;
      }

.clique {
      margin: 0.5rem 1rem 0.5rem 1rem;
      display: inline-block;
      line-height: 200%;
      font: 88% "Noto Sans", sans-serif;
      }



.dream {
      font-size: 70%;
      font-family: "Noto Sans", monospace;
      letter-spacing: 4px;
      text-align: center;
      color: #d0bdc7;
      margin-bottom: 5rem;
      margin-top: 2rem;
      }

.webring {font-size: 150%;
      line-height: 200%;}

.info {
  font-family: monospace;
  position: absolute;
  line-height: 20px;
  font-size: 14px;
  left: 20px;
  top: 20px;
}


a:link,
a:visited,
a:active {
      color: #876699;
      text-decoration: none;
      border-bottom: 0px;
      }

a:hover {
      color: #fa9a72;
      text-decoration: none;
      }

strong {
      color: #ad85a9;
      }

em {
      color: #fba77b;
      letter-spacing: 2px;
      }

hr {
      border: 0;
      height: 1px;
      width: 50%;
      margin: 3.5rem auto 3.5rem auto;
      background-image: linear-gradient(to right, rgba(82, 61, 125,0), rgba(82, 61, 125,1), rgba(82, 61, 125,0));
      }

h2 {
      font-family: 'Special Elite', serif;
      font-size: 175%;
      text-align: left;
      font-weight: normal;
      letter-spacing: 5px;
      color: #fcc594;
      }

h5 {
      font-family: 'Special Elite', serif;
      font-size: 125%;
      text-align: left;
      font-weight: normal;
      color: #ae87a9;
      }

h2::after {
      content: " \21E2";
      color: #e8bbb3;
      }

h4 {
      font-family: 'Special Elite', serif;
      font-size: 135%;
      text-align: center;
      font-weight: normal;
      letter-spacing: 8px;
      color: #fcc594;
      }

ul {padding-bottom: 3rem;}

li {
    list-style-type: none;
    }

li::before {
      content: " \25C6";
      color: #e6b9b3;
      padding-right: 1rem;
      }

li.none::before {
      content: " ";
      }

h3 {
      font: 80% 'Courier Prime', monospace;
      letter-spacing: 2px;
      text-align: right;
      color: #d0bdc7;
      padding-bottom:2rem;
      text-shadow: 1px 1px 5px #fddda9;
      }

/* TABLET SIZING */

@media only screen and (max-width: 799px) {

      .grid-container {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: max-content auto max-content;
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        grid-template-areas:
          "header"
          "main"
          "section"
          "footer";
            background-color: #120c10;
      }
}

/* MOBILE SIZING */

@media only screen and (max-width: 414px) {

      .grid-container {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: max-content auto max-content;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        grid-template-areas:
          "header"
          "main"
          "section"
          "footer";
            background-color: #120c10;
      }
}