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

main {
  position: fixed;
  top: 3rem;
  left: 3rem;
  font: 0.75rem helvetica, sans-serif;
  display: grid;
  gap: 2.25rem;

  & h1 {
    text-transform: uppercase;
    font-size: 1.35rem;
  }

  & nav {
    display: flex;
    gap: 0.5rem;

    & .btn {
      border: none;
      background-color: transparent;
      padding: 0.25rem 0.75rem;
      font-size: 0.7rem;
      cursor: pointer;
      border-radius: 0.25rem;
    }
  }

  & .list {
    list-style-type: none;
    display: grid;
    gap: 1rem;

    & .meetup {
      padding-bottom: 1rem;
      border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);

      & h2 {
        font-size: 0.9rem;
        color: rgba(0, 0, 0, 0.8);
      }

      & p {
        font-weight: 100;
        font-size: 0.7rem;
        color: rgba(0, 0, 0, 0.7);

        &:first-of-type {
          margin: 0.35rem 0;
        }

        &:last-of-type {
          font-style: italic;
          color: rgba(0, 0, 0, 0.5);
        }

        & span {
          font-size: 0.6rem;
        }
      }
    }
  }
}

.btn.highlight {
  border: 1px solid #000;
}

.hide {
  display: none;
}