body {
  background-color:wheat;
  font-family: sans-serif;
}
button {
  font-size: 6vmin;
  padding: 0 2vmin 1vmin 2vmin;
  background-color:cyan;
  color:black;
}
#main {
  margin:0 auto;
  display:flex;
  justify-content: center;
  align-items: center;
}
.row {
  display:flex;
}
.cell, .key, #close {
  cursor:pointer;
}
.cell {
  display:flex;
  justify-content: center;
  align-items: center;
  width:10vmin;
  height:10vmin;
  margin:.5vmin;
  border:1px solid black;
  font-size:7vmin;
  padding-top:1vmin;
  background-color:oldlace;
}
.outline {
  outline:.8vmin solid lime;
}
#final, #keyboard, #info {
  background-color:burlywood;
  border:outset green .5vmin;
  margin-left:3vmin;
}
#final, #info {
  width:56vmin;
  height:68vmin;
  display:flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  display:none;
}
#keyboard {
  padding:.5vmin;
}
.key {
  display:flex;
  justify-content: center;
  align-items: center;
  width:9vmin;
  height:9vmin;
  margin:.5vmin;
  border:1px solid black;
  font-size:6vmin;
  padding-top:.6vmin;
  background-color:ivory;
  border:outset green .5vmin;
}
#delete, #try {
  font-size:5vmin;
  width:20vmin;
}
#delete {
  background-color:#faa;
}
#try {
  background-color: #dfd;
  visibility:hidden;
}
#smiley {
  height:20vmin;
  visibility:hidden;
}
#head {display:flex; justify-content:space-around; align-items:center;}
#head img {height:7vmin;}
#title {font-family:Georgia,serif; font-style:italic; color:blue;
	font-size:5vmin}
#info {
  font-size:3vmin;
}
#info img {
  height:10vmin;
}
#info button {
  font-size: 4vmin;
}
#info p {
  margin:1.5vmin 2vmin 0 3vmin;
}
#progress {
  font-size: 3vmin;
  display:flex;
  align-items: center;
}

@media (orientation:portrait) {
  #main {
    flex-direction: column;
    align-items: center;
  }
  #keyboard, #final, #info {
    margin-top:2vmin;
    margin-left:0;
  }
  #final, #info {
    height:63vmin;
  }
  .cell {
    height:9vmin;
  }
  .key {
    height:8vmin;
  }
}