@font-face {
  font-family: 'griffith-header'; /* Font name to use in CSS */
  src: url('GriffithSerifDisplay-Regular.otf') format('opentype'); /* Path to your TTF file */
}

@font-face {
  font-family: 'griffith-body'; /* Font name to use in CSS */
  src: url('GriffithSansText-Regular.otf') format('opentype'); /* Path to the second font file (OTF) */
}

:root {
  --main-bg-color: #FEFEFE;;
  --main-emphasis-color: #0b626e;
  --header-font: "griffith-header";
  --body-font: "griffith-body";
}

h1 {
  font-family: var(--header-font);
  font-size: 2em;
  font-weight: bold;
  color: var(--main-bg-color);
  background-color: var(--main-emphasis-color);
  padding: 20px;
  margin: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  letter-spacing: 1px;
}

#controls-container {
  border: 2px solid var(--main-emphasis-color);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 10px;
}