body {
  font-family: sans-serif;
  margin: 0px;
  font-weight: bold;
  text-align: center; 
  width: 100%;
  height: 100%;
}

body > div.fullscreen {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

#main {
  display: grid;
}

#summary {
  display: flex;
  align-items: center;
}

#summary div {
  flex: auto;
}

#keypad {
  padding: 1vmax;
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(3, 1fr);
  grid-gap: 1vmax;

  justify-items: stretch;
  align-items: stretch;
}

.key {
  display: flex;
  justify-content: center;
  align-items: center;

  border: 0.5vh solid #BADA55;
  background-color: #E0E0E0;
  font-size: 8vmin;
  border-radius: 4vmin;

  user-select: none;
}

#keypad .unused {
  visibility: hidden;
}

#curtain {
  background-color: rgba(248, 247, 216, 0.7);
}

#next {
  position: absolute;
  border-radius: 50%;
  text-align: center;
}

#final {
  background-color: rgba(248, 247, 216, 1.0);
}

#prizebox {
  position: absolute;
  top: 15vh;
  bottom: 15vh;
  left: 0px;
  right: 0px;

  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
}

#time {
  position: absolute;
  bottom: 0px;
  width: 100%;
  font-size: 10vh;
  text-align: center;
}

#ratio {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 12vmax;
  text-align: center;
}

.bulletbox {
  font-size: 8vmax;
}

#ratio div {
  display: inline-block;
  width: 8vmin;
}

/* Landscape */
@media screen and (orientation: landscape) {

  #main {
    grid-template: 1fr 8vmax / 2fr 1fr;
  }
    
  #summary {
    grid-area: 2 / 1 / span 1 / span 2;
  }

  #next {
    top: 20vh;
    bottom: 20vh;
    right: 5vh;
    height: 60vh;
    width: 60vh;
  }

  #next img {
    width: 60vh;
    height: 60vh;
  }
}

/* Portrait */
@media screen and (orientation: portrait) {
  #main {
    grid-template: 1fr 2fr 8vmax / 1fr;
  }

  #summary {
    grid-area: 3 / 1 / span 1 / span 1;
  }
    
  #next {
    bottom: 10vh;
    left: 10vw;
    height: 80vw;
    width: 80vw;
    border-radius: 50%;
  }

  #next img {
    width: 80vw;
    height: 80vw;
  }
}