body {
  margin: 0; padding: 0; height: 100%;
}
h2 { margin: 0; padding: 1rem; font-size: 2rem; text-align: center;}


header {
  height: 100vh; text-align: center;
  display: flex; flex-direction: column; gap: 0.5rem; 
  justify-content: center; align-items: center;
  /* border-bottom: 1px solid var(--black); */
  >* { margin-left: 1rem; margin-right: 1rem;}
  h1 { margin: 0; img { max-width: 20rem; margin: auto; }}
  >p {
    background-color: var(--white); padding: 0.5rem !important; border-radius: 0.5rem;
    background-image: url("/public/img/paper.png"); background-blend-mode: overlay;
  }
  #bg-overlay {
    height: 100vh; width: 100%; position: absolute; z-index: -1;
    box-shadow: inset 0 0 0 2rem var(--yellow);
    overflow: hidden;
    >div {
      margin: 5rem; width: calc(100% - 10rem); height: calc(100% - 10rem);
      border: 1px solid var(--light-gray);
      position: absolute; top: 0;
      &::before, &::after {
        content:""; display: block; width: 2rem; height: 1px;
        position: absolute; left: calc(50% - 1rem); top: 50%; background-color: var(--black);
      }
      &::after { width: 2px; height: 2rem; left: 50%; top: calc(50% - 1rem);}
    }
    &::before {
      content:""; display: block; width: calc(100% - 4rem); height: calc(100% - 4rem);
      outline: 2px solid var(--black);
      position: absolute; z-index: 1; top: 0; margin: 2rem;
      background: linear-gradient(var(--black), var(--black)) 50% 0 / 2px 1rem no-repeat,
                  linear-gradient(var(--black), var(--black)) 50% 100% / 2px 1rem no-repeat,
                  linear-gradient(var(--black), var(--black)) 0 50% / 1rem 2px no-repeat,
                  linear-gradient(var(--black), var(--black)) 100% 50% / 1rem 2px no-repeat;
    }
    &::after {
      content:""; display: block; width: 100%; height: 100%;
      box-shadow: inset 0 0 0 2rem color-mix(var(--yellow) 60%, transparent);
      outline: 1px solid var(--pink); outline-offset: -1.25rem;
      position: absolute;
    }
    img { position: absolute; top: 0;}
    img:first-of-type {
      height: 100%; width: auto; right: -5rem;
    }
  }
  #signup {
    background-color: var(--yellow); padding: 1rem;
    background-image: url("/public/img/paper-soft.png"); background-blend-mode: soft-light;
    border: 1px solid var(--black); border-radius: 0.25rem;
    label {
      display: block; text-align: left; margin-bottom: 0.5rem;
    }
    input { height: 1.5rem; border: 2px solid var(--black); border-radius: 0.25rem;}
    input[type="submit"] {
      height: 1.5rem;
      cursor: pointer; font-weight: bold; display: inline-block;
      background-color: var(--light-blue); color: var(--blue-safe);
    }
  }
  >nav {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center; gap: 0.5rem;
    a {
      padding: 0.5rem 1rem; font-weight: bold;
      border: 2px solid var(--pink); border-radius: 0.25rem;
      background-color: var(--light-pink); color: var(--pink-safe);
      &:hover { background-color: var(--pink-safe); border-color: var(--pink-safe); color: var(--light-pink);}
    }
    a:nth-child(2) {
      background-color: var(--light-green); border-color: var(--green); color: var(--green-safe);
      &:hover { background-color: var(--green-safe); border-color: var(--green-safe); color: var(--light-green);}
    }
    a:last-child {
      background-color: var(--light-blue); border-color: var(--blue); color: var(--blue-safe);
      &:hover { background-color: var(--blue-safe); border-color: var(--blue-safe); color: var(--light-blue);}
    }
  }
  >a { position: absolute; bottom: 4rem; width: 3rem;}
}

main {
  background-color: var(--yellow);
  background-color: var(--yellow); background-image: url("/public/img/paper-soft.png"); background-blend-mode: soft-light;
  width: 100%; overflow: hidden;
  section { padding: 1rem; }
  #carousel {
    align-items: center; display: flex; padding: 1rem 0;
    height: 11rem; margin: -0.5rem 0; gap: 1rem;
    position: relative;
    a:hover { transform: scale(1.02);}
    img { height: 10rem; width: auto;}
  }
  #premise {
    padding-top: 0; position: relative;
    >ul {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: 1rem;
      li { width: 100%; }
      figure { margin: 0; text-align: center; }
      img {
        background-color: var(--white); max-width: 15rem; border: 2px solid var(--black);
        background-image: url("/public/img/paper.png"); background-blend-mode: overlay;
      }
    }
  }
  #tiers {
    background-color: var(--white); text-align:center;
    background-image: url("/public/img/paper.png"); background-blend-mode: overlay;
    ul {
      margin: 0; padding: 1rem 0 0; list-style: none;
      display: flex; flex-direction: column; gap: 0.5rem;
      li {
        padding: 0.5rem; background-color: var(--light-blue);
        border: 1px solid var(--blue); color: var(--blue-safe);
        border-radius: 0.5rem; width: 86%;
        &:nth-child(2) { img { display: none } margin-left: 3%; background-color: var(--light-pink); border-color: var(--pink); color: var(--pink-safe)}
        &:nth-child(3) { img { display: none } margin-left: 6%; background-color: var(--light-green); border-color: var(--green); color: var(--green-safe)}
        &:last-child { margin-left: 9%; background-color: var(--yellow); border-color: var(--pink); color: var(--pink-safe)}
      }
      figure { margin: 0; padding: 0; text-align: center;}
      img { border-radius: 0.5rem; max-height: 12rem; max-width: 100%; height: 100%; width: auto; margin: auto;}
    }
  }
  #faq {
    display: flex; flex-direction: column; gap: 1rem;
    h2 {display: block; width: 100%;}
    aside {
      background-color: var(--light-pink); border-radius: 0.5rem;
      padding: 0; border: 1px solid var(--pink-safe);
      h3 {
        margin: 0; padding: 0.5rem;
        border-radius: 0.5rem 0.5rem 0 0;
        background-color: var(--pink-safe); color: var(--light-pink);
      }
      p { padding: 0.5rem; }
    }
    aside:nth-child(3n) {
      background-color: var(--light-green); border-color: var(--green-safe);
      h3 { background-color: var(--green-safe); color: var(--light-green);}
    }
    aside:nth-child(3n+1) {
      background-color: var(--light-blue); border-color: var(--blue-safe);
      h3 { background-color: var(--blue-safe); color: var(--light-blue);}
    }
  }
}

/* Big mobile */
@media screen and (min-width: 25rem) {
  header {
    #bg-overlay {
      box-shadow: inset 0 0 0 3rem var(--yellow);
      >div { margin: 6rem; width: calc(100% - 12rem); height: calc(100% - 12rem); }
      &::before { width: calc(100% - 6rem); height: calc(100% - 6rem); margin: 3rem; }
      &::after { outline-offset:-2rem; box-shadow: inset 0 0 0 3rem color-mix(var(--yellow) 60%, transparent); }
    }
  }
  main {
    #carousel { height: 12rem; img { height: 11rem; }}
    #premise>ul {
      flex-direction: row; margin: auto;
      max-width: 50rem; margin: auto;
    }
    #tiers {
      ul { padding: 1rem 0; margin: auto; max-width: 40rem;}
    }
    #faq { margin: 0 1rem 1rem;}
  }
}
/* Tablet */
@media screen and (min-width: 40rem) {
  h2 { font-size: 3rem;}
  p, figcaption, a, label, button, input[type=submit] { font-size: 1.1rem;}
  header {
    h1>img { max-width: 25rem; margin: auto; }
    #bg-overlay {
      box-shadow: inset 0 0 0 4rem var(--yellow);
      >div { margin: 8rem; width: calc(100% - 16rem); height: calc(100% - 16rem); }
      &::before { width: calc(100% - 8rem); height: calc(100% - 8rem); margin: 4rem; }
      &::after { outline-offset:-2.5rem; box-shadow: inset 0 0 0 4rem color-mix(var(--yellow) 60%, transparent); }
      >img:first-of-type { height: 125%; top: -15%; right: -5%; }
    }
  }
  main {
    #carousel { height: 14rem; img { height: 13rem; }}
    #premise>ul { max-width: 55rem; }
    #tiers>ul {
      max-width: 100%; width: 80%;
      li {
        width: 70%;
        &:nth-child(2) { margin-left: 10%; background-color: var(--light-pink); border-color: var(--pink); color: var(--pink-safe)}
        &:nth-child(3) { margin-left: 20%; background-color: var(--light-green); border-color: var(--green); color: var(--green-safe)}
        &:last-child { margin-left: calc(30% - 1rem - 1px); background-color: var(--yellow); border-color: var(--pink); color: var(--pink-safe)}
      }
    }
    #faq {
      flex-direction: row; flex-wrap: wrap; margin: 0 1rem 1rem;
      aside { width: 40%; flex-grow: 1;}
    }
  }
}
/* Desktop */
@media screen and (min-width: 67rem) {
  header {
    h1>img { max-width: 30rem; margin: auto; }
    #bg-overlay {
      box-shadow: inset 0 0 0 6rem var(--yellow);
      >div { margin: 10rem; width: calc(100% - 20rem); height: calc(100% - 20rem); }
      &::before { width: calc(100% - 12rem); height: calc(100% - 12rem); margin: 6rem; }
      &::after { outline-offset:-3.5rem; box-shadow: inset 0 0 0 6rem color-mix(var(--yellow) 60%, transparent); }
      >img:first-of-type { height: 175%; top: -30%; }
    }
  }
  main {
    #carousel { height: 15rem; img { height: 14rem; }}
    #premise>ul { max-width: 60rem; }
    /* #tiers>ul { width: 60%; } */
    #faq {
      margin: 0 5% 2rem;
      aside { width: 30%; flex-grow: 1;}
    }
  }
}