@import url("http://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&family=IBM+Plex+Mono&family=IBM+Plex+Serif:wght@300&display=swap");

#header > h1 {
  font-family: "DM Serif Display", serif;
  font-size: 72px;
}

.table {
  text-align: center;
  border: 1px solid;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
  width: fit-content;
  font-family: "IBM Plex Serif", serif;
  background-color: #fff;
}

td {
  padding-left: 14px;
}
table {
  padding: 6px;
}

#footer {
  text-align: center;
  /*margin-top: 100px;*/
  position: fixed;
  bottom: 0px;
  width: 100%;
  font-family: "IBM Plex Mono", sans-serif;
}

a {
  color: black;
}

a:visited {
  color: gray;
}

body {
  text-align: center;
  background-size: cover;
  transition: 0.5s;
  margin: 0px;
}

#tree {
  position: absolute;
  right: 0;
  bottom: 0%;
  height: 256px;
}

h1 {
  font-size: 72px;
  margin-bottom: 48px;
}

.fredifnaf {
  position: absolute;
  bottom: 0%;
  left: 0%;
  transform: rotate(20deg);
  /* compatibility with older browsers */
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  border: 0px;
}

.koko {
  position: absolute;
  bottom: 0%;
  left: 32px;
  transform: rotate(20deg);
  /* compatibility with older browsers */
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  border: 0px;
}

@media (max-width: 800px) {
  #tree {
    display: block;
    height: 240px;
  }
  td,
  th {
    font-size: 4vw;
  }
}

@media (min-width: 800px) {
  #tree {
    display: block;
    height: 492px;
  }
}

@media (max-width: 320px) {
  #tree {
    height: 32px;
  }

  h1 {
    font-size: 24px !important;
    margin-bottom: 4px;
  }
}