* {
   touch-action: manipulation;
}

html, body {
  /*height: 100%;*/
  font-family: "Times New Roman", Times, serif;
  overflow:hidden;
  height: 100%;
  margin:0;
}

.container {
  height: 100%;
  position:relative;
  container-type: inline-size;
}

.content {
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (orientation:portrait) {
  .content {
    font-size: 24mm;
  }
  
  @container (min-width: 100mm) {
   .content {
      font-size: 40mm;
    } 
  }
}

@media screen and (orientation:landscape) {
  .content {
    font-size: 32mm;
  }
  
  @container (min-width: 250mm) {
   .content {
      font-size: 50mm;
    } 
  }
}

.content span {
   /*vertical-align: middle;*/
}

.buttons {
  position:absolute;
  top:3mm;
  left:3mm;
  width:25mm;
}

button {
  margin-bottom: 4mm;
  width:100%;
}