* {
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}
body {
  background-color:ivory;
  overflow:hidden;
  margin:0;
  padding:0;
  box-sizing: border-box;
}
#viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#scaler {
  position: absolute;
  top: 0;
  left: 0;
  width: 762px;
  height: 546px;
  transform-origin: top left;
}
#board, #list {
  position: absolute;
  top: 0;
  left: 0;
  width: 511px;
  height: 543px;
}
#list {
  display:none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size:24px;
  font-family: 'Montserrat', sans-serif;
}
#panel {
  position: absolute;
  top: 0;
  left: 530px;
  width: 225px;
  height: 549px;
}
.hex{
  position:absolute;
  width:63px;      /* same as image */
  height:54px;
}
.hex img{
  width:100%;
  height:100%;
  display:block;
  cursor:pointer;
  visibility: hidden;
}
.label{
  position:absolute;
  color:white;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:34px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bolder;
  text-shadow:
  -2px -2px 0 #000,
   2px -2px 0 #000,
  -2px  2px 0 #000,
   2px  2px 0 #000;
  pointer-events:none;
}
.labeln {
  position:absolute;
  color:brown;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:20px;
  font-family: 'Montserrat', sans-serif;
}
.btn {
  font-family: 'Montserrat', sans-serif;
  font-size:22px;
	background-color: #cfc;
	border: double 6px grey;
	padding: 5px 15px;
	border-radius: 35px;
	cursor:pointer;
}
#progress {
  position:absolute;
  width:511px;
  height:40px;
  xbackground: yellow;
  font-family: 'Montserrat', sans-serif;
  font-size:28px;
  text-align: center;
}
#title, #back_home_bottom #title_bottom {
  width:129px;
  height:23px;
}
#letters {
  padding-top: 4px;
}
#topic, #topic_bottom {
  font-family: serif;
  width:100%;
  font-size: 34px;
  text-align: center;
  color:brown;
  font-style: italic;
  line-height: .95;
}
#back_home {
  width:150px;
  display: flex;
  justify-content: space-between;
}
#back_home img, #back_home_bottom img{
  cursor:pointer;
  width:45px; height:42px;
}
#box_right, #box_bottom {
  display:flex;
  align-items: center;
  flex-direction: column;
  width:100%;
  height:100%;
}
#box_right {
  gap:30px;
  padding-top:60px;
}
#box_bottom {
  display:none;
  gap:20px;
  margin-top:-5px;
}
#back_home_bottom {
  display:flex;
  justify-content: space-around;
  align-items: center;
  width:100%;
}
#buttons {
  display:flex;
  justify-content: space-around;
  width:100%;
}
#topic_bottom {
  margin-top: -10px;
}

@media (orientation:portrait) {
  #box_right {display:none;}
  #box_bottom {display:flex;}
  #scaler {
    width: 700px;
    height: 900px;
  }
}
#board {
  margin-left: 6px;
}