@font-face {
  font-display: swap;
  font-family: charter;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/charter_regular.woff2") format("woff2");
  unicode-range: U+000-5FF;
}

@font-face {
  font-display: swap;
  font-family: charter;
  font-stretch: normal;
  font-style: italic;
  font-weight: normal;
  src: url("/fonts/charter_italic.woff2") format("woff2");
  unicode-range: U+000-5FF;
}

body {
  font-family: charter;
  font-size: 5vw;
  line-height: 1.5em;
  margin: 0 auto;
  padding: 0 1em;
}

h1 {
  font-size: 5vw;
  line-height: 1em;
}

@media only screen and (max-width: 749px) {
  h1 {
    font-size: 10vw;
    line-height: 1.3em;
  }
}

#result {
  font-style: italic;
  visibility: hidden;
}

@media only screen and (max-width: 749px) {
  #result {
    font-size: 10vw;
    line-height: 1.3em;
  }
}

.green-button {
  background-color: #4caf50;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 4vw;
  padding: 15px 25px;
  text-align: center;
}

.red-button {
  background-color: #af4c50;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 4vw;
  padding: 15px 25px;
  text-align: center;
}

.blue-button {
  background-color: #5f99db;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 4vw;
  padding: 15px 25px;
  text-align: center;
}

@media only screen and (max-width: 749px) {
  .green-button,
  .red-button,
  .blue-button {
    font-size: 8vw;
    margin: 20px 0;
    padding: 20px 0;
    width: 100%;
  }
}

.green-button:hover {
  background-color: green;
}

.red-button:hover {
  background-color: red;
}

.blue-button:hover {
  background-color: blue;
}