@import url(light.css);
/* @import url(dark.css) (prefers-color-scheme: dark); */

.flex {
  display: flex;
}

.g12 {
  gap: 12px;
}

.g16 {
  gap: 16px;
}

.g20 {
  gap: 20px;
}

.jcc {
  justify-content: center;
}

.aic {
  align-items: center;
}

.text-white a {
  color: white;
}

/** NAV STUFF **/

.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  /* background: #583760; */
  align-items: center;
  padding: 20px 60px;
}

.header .logo {
  /* color: white; */
  max-height: 36px;
}

.list {
  display: grid;
  grid-auto-flow: column;
  list-style-type: none;
  column-gap: 40px;
  padding: 0;
}

.listItem {
  width: min-content;
  white-space: nowrap;
}

.nav a {
  /* color: white; */
  /* font-weight: bold; */
  /* text-transform: uppercase; */
}

.nav a:hover {
  color: black;
}

.hamburger {
  display: none;
}

@media screen and (min-width: 801px) {
  .menu {
    display: block !important;
  }
}

@media screen and (max-width: 800px) {

  .header {
    flex-direction: column;
    padding: 20px;
  }

  .mobileHeader {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .hamburger {
    display: block;
  }

  .menu {
    display: none;
  }

  .list {
    grid-auto-flow: row;
    list-style-type: none;
    row-gap: 40px;
    column-gap: 0;
    justify-items: center;
  }
}

/** END NAV STUFF **/