:root {
    --foreground: rgba(0, 0, 0, 1);
    --background: rgba(255, 255, 255, 1);
  }

h1 {
    hyphens: auto;
}

.fab {
  background: var(--color);
  color: var(--dirtywhite);
}

.fab:hover {
  background: var(--dirtywhite);
  color: var(--foreground);
}

.date {
    font-size: 18px;
    font-family: monospace;
    color: var(--foreground);
    letter-spacing: 0.05rem;
}

.info-bar {
    max-width: 1044px;
    height: 64px;
    border: solid 1px var(--foreground);
    border-radius: 32px;
    display: flex;
    justify-content: space-between;
}

.info-card {
    padding: 1rem 0;
}

.card {
    padding: 1rem 0;
}

.img-high {
  width: 100%;
  border-radius: 1rem;
  display: flex;
  margin: auto;
}

/* start responsive design */
/* screen larger than 600px 2 column */
@media (min-width: 600px) {
    .img-high {
        width: 50%;
      }
  }
   
  /* screen larger than 900px 3 columns */
  @media (min-width: 900px) {

  }
  /* end responsive design */