body, h1, h2, h3 {
  padding: 0;
  margin: 0;
}

body { cursor: default; }
a    { cursor: pointer }

body {
  font-family: 'Roboto Slab';
  overflow: hidden;
}

@media screen and (orientation:portrait) {
  body, input { font-size: 0.58vh; }
}

@media screen and (orientation:landscape) {
  body, input { font-size: 1vh; }
}

h3 { font-size: 10.0em; font-weight: 100; }
h1 { font-size: 70.0em; font-weight: 600; }
h2 { font-size: 20.0em; font-weight: 300; }

.main, .prev, .next, .buttons {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  overflow: hidden;
  color: gray;
}

.main, .buttons { left:    0;  }
.prev           { left: -100%; }
.next           { left:  100%; }

#go-prev, #go-next {
  position: absolute;
  height: 100%;
  width: 5%;
  top: 0;
  cursor: pointer;
}

#go-prev { left:  0; }
#go-next { right: 0; }

/* */

.player h1, .player h2, .player h3 {
  position: absolute;
  width: 100%;
  left: 0;
  line-height: 100%;
}

.player h3 { top: 0; }
.player h1 {
  top: 42.5%;
  margin-right: -50%;
  transform: translate(0, -50%);
}
.player h2 { bottom: 0; }

input {
  font-size: 4em;
  font-weight: 100;
  color: #eeeeec;
  background: transparent;
  border-width: 0;
  border-bottom: 0.05em solid #555753;
  text-align: center;
}

a {
  font-size: 3em;
  font-weight: 300;
  color: #eeeeec;
}

.hide { display: none !important; }
.hidetop { top: -100% !important; }