body {
  display: grid;
  grid-template-columns: repeat(2, 20rem);
  grid-auto-rows: 30rem;
  gap: 1rem;
}

body * {
  background-color: #2252;
  gap: 1pt;
  padding: .2rem;
  text-align: center;
  display: grid;
}

#title-bar {
  grid-template: min-content 1fr / 1fr;
  >div:last-child {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
  }
}

#title-bar-and-footer {
  grid-template: min-content 1fr min-content / 1fr;
  >div:nth-child(2) {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
  }
}
#title-bar-and-footer-scroll {
  grid-template: min-content minmax(0,1fr) min-content / 1fr;
  >div:nth-child(2) {
    overflow: auto;
    grid-template-columns: 1fr;
    grid-auto-rows: 4rem;
  }
}

#evenly-spaced-rows>div {
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  >div:nth-child(3) {
    font-size: 2rem;
  }
}

#square-at-top {
  grid-template: min-content 1fr / 1fr;
  >#square {
    aspect-ratio: 1 / 1;
  }
}

#center-text {
  align-items: center;
  justify-content: center;
}

#masonry {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  >div:nth-child(3n+1) {
    height: 8rem;
  }
  >div:nth-child(3n+2) {
    height: 4rem;
  }
  >div:nth-child(3n+3) {
    height: 6rem;
  }
}

#overlap-menu {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr min-content 4fr;
  >div:nth-child(1) {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
  }
  >label:nth-of-type(1) {
    grid-row-start: 2;
    grid-column-start: 1;
    border-radius: 1rem 1rem 0rem 0rem;
  }
  >label:nth-of-type(2) {
    grid-row-start: 2;
    grid-column-start: 2;
    border-radius: 1rem 1rem 0rem 0rem;
  }
  >label:nth-of-type(3) {
    grid-row-start: 2;
    grid-column-start: 3;
    border-radius: 1rem 1rem 0rem 0rem;
  }
  >article {
    grid-row: 3 / last;
    grid-column: 1 / span 3;
    transition: opacity 0.5s;
  }
  >input {
    display: none;
  }
  >input:checked~article {
    opacity: 1;
    z-index: 10;
  }
  >input:not(:checked)+article {
    opacity: 0;
    z-index: 0;
  }
}

#overlap {
  grid-template: 1fr/1fr;
  >div {
    grid-row-start: 1;
    grid-column-start: 1;
  }
}

#badge {
  grid-template: 1fr/1fr;
  >div {
    grid-row-start: 1;
    grid-column-start: 1;
    &:nth-child(2) {
      align-self: start;
      justify-self: end;
      margin: 0.8rem;
    }
  }
}

#floating-reset>form{
  width: 90%;
  align-self: center;
  justify-self: center;
  >input {
    grid-row: 2 / 2;
    grid-column: 1 / 1;
    &[type="text"]{
      text-align: start;
    }
    &[type="reset"]{
      background-color: #225;
      color: #aaa;
      justify-self: end;
      margin: 1rem;
    }
  }
}