/* Styles go in this file. */
html,
body {
  height: 100%;
  margin: 0;
}

@media (min-width: 46.25em) {
  .legend {
    display: flex;
    align-items: flex-start;
  }
}
.legend__height {
  display: flex;
  align-items: center;
}
.legend__height-text {
  max-width: 200px;
}
.legend__height:first-child:last-child .legend__height-text {
  max-width: 440px;
}
.legend__color {
  display: flex;
  flex-direction: row;
}
@media (min-width: 46.25em) {
  .legend__height + .legend__color {
    margin-left: 70px;
  }
}
.legend__visual-gradient-container {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: 5px;
}
.legend__color-gradient {
  width: 60px;
  height: 20px;
  background: linear-gradient(275deg, #208fce, #7f062e);
  margin: 0 3px;
}
.legend__color-text {
  max-width: 150px;
}
.legend p {
  font-size: 16px;
  margin-bottom: 5px;
}
.legend span {
  font-size: 14px;
  margin-left: 2px;
}
.legend svg {
  width: 50px;
}

/*# sourceMappingURL=style.css.map */