@media (prefers-color-scheme: dark) {

  body {
    background-color: #000000;
  }
  
  .title {
    font-family: "Black Ops One";
    text-align: center;
  }
  
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .glow {
    text-shadow: 0px 0px 5px rgba(255, 165, 0, 0.65), 0px 0px 10px rgba(255, 165, 0, 0.65), 0px 0px 20px rgba(255, 165, 0, 0.65);
    color: rgb(255, 231, 199);
    transition: color 2s, border-color 1s, box-shadow 3s, text-shadow 4s, background-color 1s;
  }
  
  button.glow, iframe.glow { 
    box-shadow: 0px 0px 2px rgb(255, 255, 255, 0.25);
    border-color: rgb(255, 231, 199);
  }
  
  .glow:hover {
    color: white;
    text-shadow: 0px 0px 5px rgb(255, 165, 0), 0px 0px 10px rgb(255, 165, 0), 0px 0px 20px rgb(255, 165, 0);
  }
  
  button.glow:hover, iframe.glow:hover {
    box-shadow: 0px 0px 5px rgb(255, 255, 255, 0.75);
    border-color: white;
  }

  .normal {
    font-family:'Times New Roman', Times, serif;
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.35);
    transition: text-shadow 4s;
  }

  .prerequisite {
    font-family: monospace;
    color: rgba(0, 255, 255, 0.01);
    transition: color 5s;
  }
  
  .prerequisite:hover {
    color: rgba(255,255,255,0.17)
  }

  .small {
    font-size: small;
  }

  .smaller {
    font-size: x-small;
  }

  .smallest {
    font-size: xx-small;
  }

  .normal:hover {
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.65);
  }

  button {
    font-family: 'Times New Roman', Times, serif;
    background-color: rgba(255, 128, 0, 0.25);
    border: ridge;
    padding: 10px 20px;
  }

  iframe {
    border: ridge;
    background-color: rgba(255, 128, 0, 0.75);
    padding: 5px 5px;
  }
  
  button:hover {
    background-color: rgba(255, 128, 0, 0.35);
  }

  iframe:hover {
    background-color: rgba(255, 128, 0, 1);
  }
  
  .grid4 {
    width: 340px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: auto auto auto auto;
    display: grid;
    gap: 10px;
  }
  
  .grid4 > button {
    padding: 0px;
    width: 75px;
    height: 35px;
  }
  
  .soon {
    cursor: not-allowed;
  }
  
  .soon:hover {
    color: rgb(129, 129, 129);
    text-shadow: none;
  }
  
  button:active {
    background-color: rgba(255, 128, 0, 0.65);
    transition: background-color 0s;
  }
  
  button.soon:hover {
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 5px rgb(255, 255, 255, 0.75);
    border-color: rgb(64, 64, 64);
  }

}

@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
  }
  
  .title {
    font-family: "Black Ops One";
    text-align: center;
  }
  
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .glow {
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35), 0px 0px 10px rgba(0, 0, 0, 0.35), 0px 0px 20px rgba(0, 0, 0, 0.35);
    color: rgb(0, 0, 0);
    transition: color 2s, border-color 1s, box-shadow 3s, text-shadow 4s, background-color 1s;
  }
  
  button.glow, iframe.glow { 
    box-shadow: 0px 0px 2px rgb(0, 0, 0, 0.25);
    border-color: rgb(0, 0, 0);
  }
  
  .glow:hover {
    color: black;
    text-shadow: 0px 0px 5px rgb(255, 165, 0), 0px 0px 10px rgb(255, 165, 0), 0px 0px 20px rgb(255, 165, 0);
  }
  
  button.glow:hover, iframe.glow:hover {
    box-shadow: 0px 0px 7px rgb(255, 165, 0);
    border-color: black;
  }

  .normal {
    font-family:'Times New Roman', Times, serif;
    color: rgb(0, 0, 0);
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.35);
    transition: text-shadow 4s;
  }

  .prerequisite {
    font-family: monospace;
    color: rgba(0, 255, 255, 0.01);
    transition: color 5s;
  }
  
  .prerequisite:hover {
    color: rgba(0,0,0,0.17)
  }

  .small {
    font-size: small;
  }

  .smaller {
    font-size: x-small;
  }

  .smallest {
    font-size: xx-small;
  }

  .normal:hover {
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.65);
  }

  button {
    font-family: 'Times New Roman', Times, serif;
    background-color: rgba(255, 128, 0, 0.25);
    border: ridge;
    padding: 10px 20px;
  }

  iframe {
    border: ridge;
    background-color: rgba(255, 128, 0, 0.75);
    padding: 5px 5px;
  }
  
  button:hover {
    background-color: rgba(255, 128, 0, 0.5);
  }

  iframe:hover {
    background-color: rgba(255, 128, 0, 1);
  }
  
  .grid4 {
    width: 340px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: auto auto auto auto;
    display: grid;
    gap: 10px;
  }
  
  .grid4 > button {
    padding: 0px;
    width: 75px;
    height: 35px;
  }

  .grid3 {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: auto auto auto;
    display: grid;
    gap: 15px;
  }
  
  .grid4 > button {
    padding: 0px;
    width: 90px;
    height: 45px;
  }

  .soon {
    cursor: not-allowed;
  }
  
  .soon:hover {
    color: rgb(129, 129, 129);
    text-shadow: none;
  }
  
  button:active {
    background-color: rgba(255, 128, 0, 0.65);
    transition: background-color 0s;
  }
  
  button.soon:hover {
    background-color: rgba(1, 1, 1, 0.25);
    box-shadow: 0px 0px 5px rgb(255, 255, 255, 0.75);
    border-color: rgb(191, 191, 191);
  }

}