@font-face {
    font-family: "QaotaScript";
    src: url("/Fonts/QaotaScriptFontV2-Regular.ttf") format("truetype");
  }
  .vocab {
    background-color: darkcyan;
    color: white;
    border: none;
    border-radius: 10px;
    padding-left: 75px;
    padding-right: 75px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.25s, box-shadow 0.25s;
    vertical-align: top;
  }
  .grammar {
    background-color: rgb(36, 158, 52);
    color: white;
    border: none;
    border-radius: 10px;
    padding-left: 75px;
    padding-right: 75px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.25s, box-shadow 0.25s;
    vertical-align: top;
  }
  .history {
    background-color: rgb(23, 57, 170);
    color: white;
    border: none;
    border-radius: 10px;
    padding-left: 75px;
    padding-right: 75px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.25s, box-shadow 0.25s, margin-top 0.25s,
      margin-left 0.25s;
    vertical-align: top;
  }
  .vocab:hover {
    background-color: rgba(180, 37, 37, 0.8);
    opacity: 0.8;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  }
  .vocab:active {
    background-color: rgba(180, 37, 37, 0.6);
    opacity: 0.6;
  }
  .grammar:hover {
    background-color: rgba(180, 37, 37, 0.8);
    opacity: 0.8;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  }
  .grammar:active {
    background-color: rgba(180, 37, 37, 0.8);
    opacity: 0.6;
  }
  .history:hover {
    background-color: rgba(180, 37, 37, 0.5);
    opacity: 0.8;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  }
  .history:active {
    background-color: rgba(180, 37, 37, 0.8);
    opacity: 0.6;
  }
  html {
    font-family: Arial, Helvetica, sans-serif;
  }
  h1 {
    text-align: center;
  }
  h2 {
    font-family: "QaotaScript", sans-serif;
    text-align: center;
  }
  html {
    background-color: rgb(34, 34, 34);
  }
  .tableofcontents {
    width: 500px;
    align-self: center;
  }