html {
  /* reset margins to ensure that we're correctly centered */
  margin: 0;
  padding: 0;
  --theme: #239; /* iris purple 5B4FC4 */
  /* we need a darker color for the pastel background */
  --theme-hero: var(--theme);
}
body {
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}
/* Make main content more readable */
@media (min-width: 1024px) {
  article {max-width: 60%;margin:auto;}
}
h1, h2, a {
  color: var(--theme);
  text-decoration: none;
}
h2 {
  margin-top: 0.4em;
  margin-bottom: 0;
}
a .card p {
  color: black; /* We want clickable card descriptions to be normal color. */
}
/* Header logo */
#logo {
  margin: 0;
  font-size: 1.3em;
  font-weight: bold;
}
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 1em 0;
}
nav img {
  height: 4em;
  margin-bottom: -0.6em;
  margin-top: -0.4em;
}
/*@media (min-width: 768px) {
  body {max-width: 720px;margin:auto;}
}
@media (min-width: 1080px) {
  body {max-width: 60%;margin:auto;}
}*/
nav div {
  display:flex;
  align-items: center;
}
nav a {
  font-size: 1em;
  margin-left: 0.8em;
}
.button {
  float: left;
  height: 2.5em;
  padding: 0 1em;
  border-radius: 0.4em;
  background-color: var(--theme);
  color: white;
  display: flex;
  align-items: center;
}
.button-lite {
  background-color: non
}
.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}


/* HERO BANNER
Currently only used in the home page.
*/
.hero {
  /*flex-direction: column;*/
  /*text-align: center;*/
  width: 100%;
  height: 80vh; /* if you don't want it to take up the full screen, reduce this number */
  overflow: hidden;
  background-size: cover !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%), url(hero.jpg) no-repeat center center scroll;
  margin-bottom: 2em;
}
/* Entire hero image is a link */
.hero .unit-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80vh;
  z-index: 3;
}
/* But make sure that other links are not shadowed */
.hero a {
  position: relative;
  z-index: 4;
}
.hero #logo {
  margin-left: 0.4em;
  margin-top: 0.4em;
}
.hero div {
  color: var(--theme-hero);
  text-align: center;
}
.hero div h1 {
  margin-bottom: -1vh;
}


/* PRODUCT GRID */
section {
  --grid-layout-gap: 1em;
  --grid-max-cols: 3;
  --grid-item--min-width: 200px;
  --gap-count: calc(var(--grid-max-cols) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-max-cols));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
  margin-top: var(--grid-layout-gap);
}
section .card img {
  width: 100%;
}

.card p {
  margin-top: 0;
}
.mb { /* We don't have a footer, so some margin makes things easier to read. */
  margin-bottom: 20%;
}
/* */
.img-sm {
  height: 2em;
}
.theme-color {
  color: var(--theme);
}