html, body {
  background-color: #000000;
  color: white;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

@font-face {
  font-family: myFirstFont;
  src: url(data/MAYQUEEN.TTF);
}

@font-face {
  font-family: mySecondFont;
  src: url(data/FibelNord.ttf);
}

div {
  font-family: myFirstFont;
}

#canvas {
  display: block;
  margin: auto;
  width: 80%;
  height: 80%;
  border: 0;

  @media screen and (display-mode: fullscreen) {
      width: 100%;
      height: 90%;
  }

  @media (min-aspect-ratio: 16/9) and (display-mode: fullscreen) {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
  }

  @media (max-height: 500px) {
      width: 100%;
      height: 100%;
  }
}

#toppy {
  width: 80%;
  height: 10%;
  margin: auto;
  background-color: #000000;

  @media (max-height: 500px) {
      display: none;
  }

  @media screen and (display-mode: fullscreen) {
      display: none;
  }
}

#logo {
  margin: 25px;
  float: left;
  width: 50px;
  height: 50px;
  background: url(data/fields.png);
  background-size: cover;

  @media (max-height: 700px) {
      display: none;
  }

  @media screen and (display-mode: fullscreen) {
      display: none;
  }
}

#text {
  margin-left: 75px;
  font-size: 64px;
  width: 80%;
  height: auto;
  padding-top: 1%;
  text-decoration-color: ghostwhite;
  font-family: myFirstFont;

  @media (max-height: 700px) {
      font-size: 32px;
      margin-left: 10px;
      width: 100%;
  }

  @media screen and (display-mode: fullscreen) {
      display: none;
  }
}

#disclaimer {
  text-align: center;
  padding-top: 1%;
  font-size: 26px;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  border: solid black;
  font-family: mySecondFont;
  color: white;
  @media (max-height: 500px) {
      font-size: 16px;
  }

  @media (display-mode: fullscreen) {
      display: none;
  }
}

.main {
  width: 80%;
  margin: auto;

  @media all and (display-mode: fullscreen) {
      width: 100%;
      height: 95%;
  }
}