:root{
  font-family: "Lucida Grande",Helvetica,Arial,sans-serif;
  background-color: black;
  color: red;
  border: none;
  height: 100%;
}

body{
  width: 100%;
  height: 100%;
  overflow:hidden; 
  margin: 0px;
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;

  font-size-adjust: none;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  font-size: max(1.5vh, 43px);
}

.header {
  display:flex;
  width:100%;
  justify-content: center;
  align-items: center;
}
.header > img { 
  max-height: 100px;
}

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

#myCanvas {
  width: 100vw; /* make the canvas fill the holder */
  height: 50vh; /* make the canvas fill the holder */
  display: block; /* remove any extra space below the canvas */
}


#fortune { 
  display:flex;
  width:100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}


@media (orientation: portrait) {
  #myCanvas {
    width: 100vw; /* make the canvas fill the holder */
    height: 20vh; /* make the canvas fill the holder */
    display: block; /* remove any extra space below the canvas */
  }
  
}