@font-face {
  font-family: "steelfish";
  src: url("./fonts/steelfish_bd.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "steelfish";
  src: url("./fonts/steelfish_eb.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "steelfish";
  src: url("./fonts/steelfish_rg.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
:root {
  --font-family-sans: steelfish, -apple-system, BlinkMacSystemFont, sans-serif !important;

  --orange: #d57d42;
  --teal: #619c8c;
  --accent-color-2: var(--orange);
  --separator-color: var(--teal) !important;
}

html {
  font-size: 1.2em !important;
}

@media (min-width: 600px) {
  html {
    font-size: 1.4em !important;
  }
}

footer {
  --nav-background-color: var(--accent-color) !important;
}

footer nav {
  --accent-color: var(--background-color) !important;
}

div[class^="course__"] h3 {
  font-size: 1.5em !important;
}

.dotted-content:before {
  display: none;
  opacity: 0.2;
}

input[type="search"] {
  border: 2px solid var(--accent-color);
  border-radius: 4px;
}

input[type="search"]:focus {
  outline: 1px solid var(--accent-color);
  outline-offset: -3px;
}