@media only screen and (orientation: portrait) {

  html {
    font-size: 3vh;
  }

  div {
    color: #000000;
    font-family: 'Overpass';
    font-size: 1rem;
  }

  .vitrumg {
    height: 96vw;
    width: 96vw;
  }

  .posPerson { position: static; }
  .posAuthor { position: static; }
  .posIllustrator { position: static; }
  .posRpgdesigner { position: static; }
  .posProgrammer { position: static; }
  .posScientist { position: static; }
  .posBlog { position: static; }
  .posContact { position: static; }
  .posLinks { position: static; }

}


@media only screen and (orientation: landscape) {

  html {
    font-size: 26.25;
  }

  div {
    color: #000000;
    font-family: 'Overpass';
    font-size: 1rem;
  }

  .vitrumg {
    height: 840;
    width: 840;
  }

  .posPerson {
    position: relative;
    margin-top: -1.17rem;
    left: -3.5rem;
    top: -23.5rem;
  }

  .posAuthor {
    position: relative;
    margin-top: -1.17rem;
    left: -7.8rem;
    top: -26.3rem;
  }

  .posIllustrator {
    position: relative;
    margin-top: -1.17rem;
    left: -11.5rem;
    top: -19.7rem;
  }

  .posRpgdesigner {
    position: relative;
    margin-top: -1.17rem;
    margin-left: 2rem;
    left: -1.0rem;
    top: -27.6rem;
  }

  .posProgrammer {
    position: relative;
    margin-top: -1.17rem;
    margin-left: 30rem;
    left: -5.5rem;
    top: -10.7rem;
  }

  .posScientist {
    position: relative;
    margin-top: -1.17rem;
    margin-left: 5rem;
    left: -1.7rem;
    top: -0.9rem;
  }

  .posBlog {
    position: relative;
    margin-top: -1.17rem;
    left: -9.0rem;
    top: -13.8rem;
  }

  .posContact {
    position: relative;
    margin-top: -1.17rem;
    left: -4.9rem;
    top: -15.2rem;
  }

  .posLinks {
    position: relative;
    margin-top: -1.3rem;
    margin-left: 30rem;
    left: -1.9rem;
    top: -22.1rem;
  }

}