/*For grid and flex, random stuff inserted becomes*/
/*a grid or flex item*/
/*inline-block, block, etc. always fail inside items!*/
/*So that is why it failed for my attempts.*/

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

:root {
  --font-weight-light: 200;
  --font-weight-medium: 400;
  --font-weight-heavy: 800;
  --body-background-color-light: #eaa427;
  /*--main-background-color-light: hsl(120deg 59 100 / 1);*/
  --main-background-color-light: #b0ffb0;
  --title-background-color-light: #eaa427;
  --font-size-largest: 4rem;
  --font-size-large: 3em;
  --font-size-title: 2em;
  --font-size-article-title: 1.5em;
  --font-size-copyright: .75em;
}

html {
  /*background-color: #FFF; */
  /*background: #f3f5c2;*/
  /*background: #520004;*/
  /*background: #8d3a00;*/
  /*background: #ffc74c;*/
  /*background: #;*/
  /*background: #;*/

  /*background: #007500;*/
  /*background: linear-gradient(to bottom, #3f1306, #ed4e1e);*/
  scroll-behavior: smooth;
  scroll-padding: 2rem;
 /* scroll-padding: 10rem;<] [>This is a magic number you decide on*/
  font-family: verdana, arial, helvetica, sans-serif;

}

body {
  background: var(--body-background-color-light);
  padding: 5px;
  font-weight: 800;
  /*grid-template-rows: 1em 10em auto auto auto 5em;*/
  /*grid-template-columns: 1fr 3fr 1fr;*/
}

/*Makes images more easy to work with, sometimes*/
img,
picture {
  max-width: 100%;
  display: block;
}

/*Takes images of differing sizes and restores aspect-ratio*/
/*and then crops them.*/
/*aspect-ratio: 1 / 1; is a square*/
img,
picture {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

:not(.nav__skip-to-links__link):focus {
  padding: 2px;
  outline: 1px solid pink;
}

/*blockquote {*/
  /*font-size: clamp(.7rem, 1.0vw, 1rem);*/
  /*margin: 5px;  */
  /*padding: 5px;*/
  /*text-wrap: balance;*/
  /*[>max-inline-size: 70ch;<]*/
  /*max-width: 70ch;*/
  /*[>text-wrap: balance;<]*/
  /*[>margin: 0 auto;<]*/
/*}*/

/*.centered {*/
  /*text-align: center;*/
/*}*/

.page-top__header {
  grid-area: page-top__header;
  padding-block: min(10vh, 1.5rem);
}

.page-top__img--background {

}

.page-top__img--logo {

}

.page-top--title {
  font-weight: var(--font-weight-heavy);
  /*font-size: var(--font-size-largest);*/
  font-size: clamp(1.5rem, 3.5vw, 4rem);
  text-align: center;
  /*color: #b5000a;*/
  color: #000;
  text-shadow: 3px 4px 5px blue;

  /*padding-top: 2rem;*/
  /*padding-bottom: 2rem;*/
}

/*.main-wrapper {*/
  /*grid-area: main-wrapper;*/
/*}*/
.page-wrapper {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr;
  grid-template-rows: auto;
  justify-content: stretch;
  align-content: stretch;
  /*place-items: center;*/
  grid-template-areas:
    "page-top__header page-top__header page-top__header page-top__header"
    "nav__site-links main-content__main main-content__main nav__rec-links"
    "page__footer page__footer page__footer page__footer";

    @media (width < 1200px) {
      grid-template-columns: 1fr;
      grid-template-areas:
      "page-top__header"
      "main-content__main"
      "nav__site-links"
      "nav__rec-links"
      "page__footer";
    }

}


.main-content__main {
  grid-area: main-content__main;
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  /*isolation: isolate;*/
  /*flex-wrap: no-wrap;*/
  background-color: var(--main-background-color-light);
  margin: 5px;
  /*width: ;*/
  /*max-inline-size: 100ch;*/
  /*margin-right: auto;*/
  /*margin-left: 0;*/
  /*width: auto;*/
  /*padding: 1rem;*/
  border-radius: 6px;
  box-shadow: 5px 5px 5px;
}

.main-content__header {

}

.main-content__header--title {
  font-weight: var(--font-weight-heavy);
  /*font-size: var(--font-size-title);*/
  font-size: clamp(1rem, 2vw, 2rem);
  text-align: center;
  /*width: 100%;*/
  margin: 0;
  padding-top: 15px;
  padding-bottom: 14px;
  background-color: #600000;
  color: yellow;
  /*background-color: var(--title-background-color-light);*/
  border-radius: 6px 6px 0 0;
}

hr {
  width: 100%;
  /*margin: 2px;*/
  /*padding: 1px;*/
}

p.article {
  max-width: 65ch;
  text-wrap: balance;
  margin: 0 auto;
}

.article--centered {
  text-align: centered;
  /*text-wrap: balance;*/
}

.main__article {
  padding-left: 5px;
  padding-right: 5px;
  margin: 0 auto;
  /*width: 100%;*/
  /*max-width: 60ch; */
}

.main__article--title {
  text-align: center;
  text-wrap: balance;
  /*font-size: var(--font-size-article-title);*/
  font-size: clamp(1rem, 1.4vw, 1.75rem);
  margin: 5px;
  padding: 5px;
}

blockquote {
  font-size: clamp(.7rem, 1.0vw, 1rem);
  margin: 5px;
  padding: 5px;
  text-wrap: balance;
  max-inline-size: 65ch;
  /*text-wrap: balance;*/
  margin: 0 auto;
}

.main__article--header {
  text-align: center;
  text-wrap: balance;
  /*font-size: var(--font-size-article-title);*/
  font-size: clamp(.8rem, 1.2vw, 1.5rem);
  margin: 5px;
  padding: 10px;
}

.article__heading {
  text-align: center;
}

.article__subheading {
  text-align: center;
  text-wrap: balance;
  /*font-size: var(--font-size-article-title);*/
  font-size: clamp(.8rem, 1.2vw, 1.5rem);
  margin: 5px;
  padding: 10px;
}

.article__list--wrapper {
  display: flex;
  /*text-wrap: balance;*/
  /*font-size: var(--font-size-article-title);*/
  /*margin: 5px;*/
  /*padding-left: 5px;*/
  /*padding-right: 5px;*/
  /*margin: 0 auto;*/
}

.article__list {
  display: flex;
  flex-direction: column;
  /*flex-grow: 1;*/
  /*flex-shrink: 0;*/
  /*flex-basis: 100%;*/
  list-style: none;
  /*gap: 1rem;*/
  /*text-align: center;*/

}

.article__list__item {
  text-align: left;
  text-wrap: balance;
  /*font-size: var(--font-size-article-title);*/
  font-size: clamp(.6rem, 1.0vw, 1rem);
  font-weight: 400;
  margin: 5px;
  padding-left: 95px;

}

.article {
  font-size: clamp(.7rem, 1.0vw, 1rem);
  font-weight: var(--font-weight-medium);
  margin: 5px;
  padding: 5px;
}

.article_link {
  color: #600000;

  &:focus {
    outline: 2px solid #ff0000;
  }

  &:hover,
  &:focus-visible {
    color: #ff0000;
  }
}

.main-content__footer {
  margin: 5px;
  padding: 5px;
}

.main-content--copyright {
  /*font-size: var(--font-size-copyright);*/
  font-size: clamp(.5rem, .7vw, .7rem);
  text-align: center;
  font-weight: var(--font-weight-medium);
  padding: 5px;
}

.page__footer {
  grid-area: page__footer;
}

.page--copyright {
  /*font-size: var(--font-size-copyright);*/
  font-size: clamp(.7rem, 1.0vw, 1rem);
  text-align: center;
  font-weight: var(--font-weight-medium);
  padding-top: 4px;
  padding-bottom: 4px;
}

/*.page-wrapper {*/
  /*display: grid;*/
  /*grid-template-areas:*/
    /*"page-top__header page-top__header page-top__header page-top__header"*/
    /*"nav__site-links main-content__main main-content__main nav__rec-links"*/
    /*"page__footer page__footer page__footer page__footer";*/

    /*@media (width < 1200px) {*/
      /*grid-template-areas:*/
      /*"page-top__header"*/
      /*"main-content__main"*/
      /*"nav__site-links"*/
      /*"nav__rec-links"*/
      /*"page__footer";*/
    /*}*/

/*}*/