body {
  min-height: 100svh;
  background-color: var(--color-bg);
}

header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-text);

  @media (max-width: 800px) {
    flex-direction: column;
    padding-block: 20px;
  }

  /* height: 0px; */

  padding: 0;
  overflow: hidden;

  >div {

    &.mobile-nav {
      display: none;
    }

    &.desktop-nav {
      display: contents;
    }

    @media(max-width: 800px) {
      &.mobile-nav {
        display: contents;
      }

      &.desktop-nav {
        display: none;
      }
    }
  }
}

details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-inline: 0.2rem;
  font-size: 0.8rem;
  width: 100%;
  background-color: oklch(from var(--gray-background) calc(l + 0.02) c h);
  border: none;

  padding-top: 0.5rem;
  border: 2px solid oklch(from var(--gray-primary) calc(l - 0.2) c h / 0.05);

  summary {
    list-style-type: none;
    font-size: 2rem;
    display: flex;
    align-items: center;
    padding-inline: 0.5rem;
    gap: 0.5rem;
    cursor: pointer;

    &:hover {
      color: oklch(from var(--gray-primary) calc(l + 0.2) c h);
    }


    margin-left: auto;
    transition: transform var(--transition-short) ease-in-out;
    border: none;
  }

  &::details-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-inline: 0.5rem;
    height: 0;
    overflow: hidden;
    transition:
      all var(--transition-med) ease-out allow-discrete;
  }

  &[open] {
    summary img:last-of-type {
      transform: rotate(-45deg);
    }

    &::details-content {
      padding-block: 10px;
      height: auto;
    }

    padding-bottom: 0.8rem;
  }
}


nav {
  font-size: 2rem;
  font-family: "Raleway", sans-serif;
  font-weight: 300;

  ul {

    align-items: center;
    list-style: none;
    display: flex;
    flex-wrap: wrap;

    li {
      padding: 1rem;
    }

    .spacer {
      padding: 0;
      height: 2.5rem;
      border-left: 1px solid var(--color-text);
    }

    @media (max-width: 800px) {
      flex-direction: column;
      align-items: center;

      li:not(:first-child) {
        border-left: none;
      }

      .spacer {
        border-left: none;
        border-bottom: 1px solid var(--color-text);
        width: 90%;
        height: 0;
      }
    }
  }
}

.logo {
  font-family: "Raleway", sans-serif;
  font-style: italic;
  font-weight: 300;
  text-align: center;
  padding-inline: 1rem;
}

main {
  /* place-items: center; */
  text-align: center;
  /* min-height: 100%; */ 
}