html {
  height: -webkit-fill-available;
}

@font-face {
  font-family: 'Moody_Boys';
  font-weight: 400;
  src: url('https://verygois.github.io/fontbook/family/dafont/Moody_Boys.ttf') format('truetype');
}

@font-face {
  font-family: 'KouzanSousho';
  font-weight: 400;
  src: url('https://verygois.github.io/fontbook/family/musashi/kouzansousho.otf') format('opentype');
}

header,
h1,
h2 {
  box-sizing: border-box;
  font-family: 'Moody_Boys', 'KouzanSousho', sans-serif;
  font-weight: 400;
  padding: 0;
  margin: 0.25rem;
}

header {
  font-size: 1.5rem;
  color: #000;
}

h2 {
  font-size: 100%;
}

footer *:hover {
  cursor: help;
  color: yellow;
}

footer .table {
  display: grid;
  align-items: center;
  justify-content: center;
  place-items: center;
}

body {
  background: 50% 50% / contain;
  background-attachment: fixed;
}

#main {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  max-height: -webkit-fill-available;
  z-index: 10;
}

#video {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 90%;
  max-height: 90%;
  transform: translate(-50%, -50%);
}

footer {
  background: #fff9;
  position: absolute;
  bottom: 0;
  right: 0;
  border: solid 2px;
  width: 100px;
  height: 150px;
  margin: 1rem 2rem;
  z-index: 100;
}

footer hr {
  border: none;
  clear: both;
  width: 100%;
}

footer .private {
  background: #000;
  width: 25%;
  height: 20%;
  float: left;
}

footer .sofa {
  border: solid 2px;
  width: 25%;
  height: 15.5%;
  float: left;
  margin: 2%;
}

footer .ball {
  border: solid 2px;
  border-radius: 50%;
  width: 12.3%;
  height: 8.4%;
  float: right;
  margin: 5%;
}

footer .shelf {
  border: solid 2px;
  width: 10%;
  height: 20%;
  float: left;
  margin: 0 0 0 -1px;
}

footer .statement {
  background: #000;
  border-radius: 50%;
  width: 7%;
  height: 5%;
  float: right;
  margin: 20% 2.5% 0 0;
}

footer .table {
  font-size: 200%;
  width: 25%;
  height: 17%;
  float: right;
  margin: 40% 17.5% 0 0;
}

@media (orientation: portrait) {
  #video {
    max-width: 75vh;
    max-height: 75vw;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}