@layer base {
  :root {
    --black: #0e1317;
    --tan: #F29057;
    --pink: #e1a7a4;
    --blue: #1a486b;
    --teal: #025E73;
    --white: #fcfcfd;
    --red: #590202;
    --font-size: 1.3rem;
    --headline: "Josefin Sans", sans-serif;
    --main: "Lato", sans-serif;
    --mono: "Fira Mono", monospace;
    --base-size: 1rem;
    --scale: 1.2;
    --h1: calc(var(--h2) * var(--scale));
    --h2: calc(var(--h3) * var(--scale));
    --h3: calc(var(--h4) * var(--scale));
    --h4: calc(var(--h5) * var(--scale));
    --h5: calc(var(--h6) * var(--scale));
    --h6: var(--base-size);

  }

  /* border box model: https://css-tricks.com/box-sizing/ */

  html {
    box-sizing: border-box;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  /* generic styles for the page */

  body {
    padding: 0;
    margin: 0;
    font-family: var(--main);
    background-color: var(--black);
    color: var(--white);
    font-size: var(--font-size);
    line-height: 1.5;
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    font-family: var(--headline);
    text-transform: uppercase;
  }

  h1 {
    font-size: var(--h1);
  }

  h2 {
    font-size: var(--h2);
  }

  h3 {
    font-size: var(--h3);
  }

  h4 {
    font-size: var(--h4);
  }

  h5 {
    font-size: var(--h5);
  }

  h6 {
    font-size: var(--h6);
  }

  a {
    color: var(--red);
  }

  a:hover {
    text-decoration: none;
  }

  img {
    max-width: 100%;
  }

  li svg {
    width: 50px;
    height: 40px;
  }

  a svg {
    fill: #ffffff;
  }

  a svg:hover {
    fill: var(--tan);
  }

  .home-link:hover {
    color: var(--green);
  }

  .container {
    max-width: 1200px;
    padding: 0 1rem;
    margin: 0 auto;
  }

  .button {
    background-color: var(--tan);
    color: var(--black);
    padding: 0.8rem;
    padding-bottom: 0.6rem;
    margin-top: -0.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-family: var(--headline);
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
  }

  a.button:hover {
    color: var(--white);
  }

  .codepen {
    font-weight: bold;
    color: var(--white);
    background-color: var(--red);
    font-family: var(--headline);
    text-transform: uppercase;
    font-size: var(--h5);
    padding: 0.8rem 0.6rem 0.6rem 0.6rem;
    border-radius: 5px;
    text-decoration: none;
  }

  .codepen:hover {
    color: var(--black);
    background-color: var(--tan);
  }

  .img-border {
    border: 2px solid #ccc;
    border-radius: 5px;
  }
}

@layer comet {
  .comet {
    padding: 4rem 0;
    background-image: url(https://assets.codepen.io/296057/fem-featured-top.png),
      url("https://assets.codepen.io/296057/fem-stars-sky.jpg");
    background-repeat: repeat-x, no-repeat;
    background-position: bottom center, center center;
  }

  .comet a,
  .header a,
  .header-home a {
    color: var(--white);
    text-decoration: none;
  }

  .comet a.button,
  .header a.button,
  .header-home a.button {
    color: var(--black);
    text-decoration: none;
  }

  .comet a.button:hover,
  .header a.button:hover,
  .header-home a.button:hover {
    color: var(--white);
  }

  header {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: baseline;
    padding: 2rem 1rem;
  }

  .header,
  .header-home {
    background: url(https://assets.codepen.io/296057/fem-stars-sky.jpg) center center;
  }

  /* .header-home {
    background-image: none;
    background-color: var(--black);
  } */

  h1 {
    font-family: var(--headline);
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--lightgreen);
    display: block;
    font-weight: 300;
  }

  h1 svg {
    width: 40px;
  }

  header button svg {
    color: var(--white);
    width: 30px;
  }

  .intro {
    padding: 4rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }

  .intro a {
    display: inline;
    text-decoration: underline;
  }

  .intro a:hover {
    text-decoration: none;
    color: var(--white);
  }

  .name {
    text-transform: uppercase;
    font-family: var(--headline);
  }

  #info {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }


  @media(max-width: 700px) {
    #info {
      grid-template-columns: 1fr;
    }

    .intro {
      grid-template-columns: 1fr;
    }

    .comet {
      padding: 0;
    }
  }

  @media (max-width: 667px) {

    .intro {
      padding-bottom: 3rem;
    }


  }

  @media (max-width: 450px) {
    .intro h2 {
      font-size: 2rem;
    }

    h1 {
      font-size: 1.5rem;
    }

    h1 svg {
      width: 30px;
    }

    .intro {
      padding-bottom: 1rem;
    }
  }
}

@layer nav {
  nav {
    font-family: var(--headline);
    font-weight: 600;
  }

  nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }

  nav .button {
    margin-top: -0.9rem;
    display: block;
  }

  nav .button:hover {
    color: var(--black);
  }

  nav a {
    text-decoration: none;
  }

  @media (max-width: 950px) {
    header h1 {
      flex-basis: 100%;
      text-align: center;
    }

    header nav {
      margin: 2rem auto 0 auto;
    }
  }

  @media (max-width: 640px) {
    header h1 {
      flex-basis: auto;
    }

    /* hamburger button is the button HTML element */
    header button {
      display: block;
      font-size: 3rem;
      line-height: 1;
      border: 0;
      background: transparent;
      color: var(--white);
    }

    header button:hover {
      color: var(--green);
    }

    header button::after {
      content: "\2630";
    }

    /* menu that appears when hamburger is clicked */
    nav {
      position: fixed;
      top: 0;
      right: 200%;
      width: 100vw;
      height: 100vh;
      opacity: 0;
      background: #fff;
      color: var(--black);
      padding-top: 20%;
      transition: right 0s 0.5s, opacity 0.5s;
    }

    /* trigger for animation - pulls down nav box */
    button:focus+nav,
    button:focus-within+nav {
      right: 0;
      opacity: 1;
      transition: right 0s, opacity 0.5s;
    }

    nav ul {
      display: block;
      text-align: center;
      position: relative;
      top: -50vh;
      transition: top 0.5s;
    }

    /* trigger for animation - makes the links in motion */
    button:focus+nav ul,
    button:focus-within+nav ul {
      top: 0;
    }

    /* styling for links and SVGs in the mobile menu */
    nav a:any-link:not(.button) {
      display: block;
      padding: 1.5rem;
      color: var(--green);
    }

    nav a svg {
      fill: var(--green);
    }

    nav a:hover,
    nav a svg:hover {
      color: var(--tan);
      fill: var(--tan);
    }

    /* sets up the close icon - clicking anywhere not on a link will close the menu */
    nav ul::after {
      content: "\2716";
      color: var(--green);
      display: block;
      position: absolute;
      top: 0.125rem;
      right: 0.5rem;
      font-size: 3rem;
      line-height: 1;
    }

  }
}

@layer featured {
  .section-featured {
    background-color: var(--white);
    color: var(--black);
    padding: 6rem 0;
  }

  .section-featured h2 {
    font-size: 2.5rem;
  }

  .section-featured h3 {
    margin-top: 3rem;
  }



  #listing {
    order: 1;
  }

  #listing ul {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
  }

}

@layer chapter-nav {
  .chapter-nav {
    background-color: var(--blue);
  }

  .chapter-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .chapter-nav a {
    display: block;
    padding: 1rem;
    color: var(--white);
    text-decoration: none;
  }

  .chapter-nav a:hover {
    color: var(--tan);
  }
}

@layer text {
  main {
    background-color: var(--white);
    color: var(--black);
    padding: 4rem 1rem;
  }

  main h3 {
    margin: 4rem 0 2rem 0;
    color: var(--teal);
    border-bottom: 1px solid var(--teal);
  }

  .img-tablet {
    max-width: 700px;
  }

  .img-mobileport {
    max-width: 500px;
  }

  .img-mobile {
    max-width: 300px;
  }

  .thumbnail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .thumbnail-grid div:first-child {
    grid-column: 1/3;
  }

  .ch7-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
  }

  .ch7-grid h3 {
    text-align: left;
  }

  .ch7-grid div:nth-child(3),
  .ch7-grid div:last-child {
    grid-column: 1/3;
  }
}

@layer footer {
  footer.home-footer {
    text-align: center;
    padding: 6rem 0;
    background-image: url(https://assets.codepen.io/296057/fem-featured-bottom.png),
      url("https://assets.codepen.io/296057/fem-aurora.jpg");
    background-repeat: repeat-x, no-repeat;
    background-position: top center, center center;
  }

  footer {
    text-align: center;
    padding: 6rem 0;
    background-image: url("https://assets.codepen.io/296057/fem-aurora.jpg");
    background-repeat: no-repeat;
    background-position: center center;
  }

  footer ul {
    list-style-type: none;
    padding: 0;
    margin: 2rem 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 3rem;
    font-size: 3rem;
  }
}