@font-face {
  font-family: Raleway;
  src: url(/Raleway-VariableFont_wght.ttf);
}

@font-face {
  font-family: Open Sans;
  src: url(/OpenSans-VariableFont_wdth\,wght.ttf);
}

@font-face {
  font-family: Cera Pro;
  src: url(/Cera-Pro-Medium.ttf);
}

html {
  --light-green: #f0fff0;
  --green: #4A784A;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  font-family: Raleway, Arial, Helvetica, sans-serif;
  width: 100%;

  background-color: var(--light-green);
  color: var(--green);
}

body {
  margin: 3rem auto;
  max-width: 800px;

  h1 {
    font-size: 2rem;
    margin-top: 0;
  }

  a {
    color: var(--green);
    text-decoration: none;
  }

  a:hover {
      text-decoration: underline;
  }

  a:active {
    color: var(--green);
  }

  #menu-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    padding-left: 0;
  }
}