body {
  background: #e5e5e5;
  margin: 0;
  padding: 0;
  font-size: 10px;
  text-align: center;
  overflow:scroll; 
  -webkit-overflow-scrolling: touch;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

h1,
.page-title {
  font-size: 2em;
}

h3 {
  font-size: 3em;
}

nav {
  background: rgba(138,133,135, .9);
  color: white;
  display: none;
}

.small {
  font-size: .8em;
}

.outer {
  position: absolute;
  margin: 0;
}

.cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
  background: rgba(0,0,0,.0);
}

.inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.die {
  border: none;
  flex-grow: 1;
}

@media screen and (orientation: portrait) {
  
  .outer {
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vw;
  }
  
  .header {
    width: 100%;
    height: calc(100vh - 100vw);
    float: none;
  }
  
  .header .header-inner {
    position: relative;
    top: 30%;
    -webkit-transform: translateY(-30%);
    -ms-transform: translateY(-30%);
    transform: translateY(-30%);
  }
  
  .inner {
    padding: 5vw;
  }
  
  .die {
    width: 28vw;
    height: 28vw;
    border-radius: 28vw;
    margin: 1vw;
  }

}

@media screen and (orientation: landscape) {
  
  .header {
    width: calc(100% - 100vh);
    height: 100vh;
    float: left;
  }
  
  .header .header-inner {
    position: relative;
    top: 40%;
    -webkit-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
    transform: translateY(-40%);
  }
  
  .inner {
    padding: 5vh;
  }
  
  .outer {
    top: 0;
    right: 0;
    width: 100vh;
    height: 100vh;
  }
  
  .die {
    width: 28vh;
    height: 28vh;
    border-radius: 28vh;
    margin: 1vh;
  }
  
}