/* md/Jigsaws/Mandel/styles.css */
* {
  margin:0; padding:0; box-sizing: border-box;
}
body {
  background-color: black;
  overflow: hidden;
}
button {
  font-size:2.5vmin;
  padding:0 1vmin;
  margin-left:.5vmin;
}
#head {
display:flex;
padding-top:1vmin;
align-items: center;
text-align: center;
justify-content:space-around;
max-width:120vh;
margin:0 auto;
}
#head img {
height:4vmin;
}
#title {
  display:flex;
  align-items: center;
}
#title img {
  margin-right:1vmin;
}
#choices {
  display:flex;
  flex-wrap: nowrap;
}
#jigsaw {
  display:flex;
  justify-content: center;
  align-items: center;
}
#grid {
  width:91vmin;
  height:91vmin;
  margin:1vmin;
  background-color: lightgreen;
  display:grid;
  grid-template-rows: repeat(6,1fr);
  grid-template-columns: repeat(6,1fr);
}
#grid img {
  width:100%;
  height:auto;
  outline:1px solid white;
}
#piece img {
  width:100%;
}
#piece {
  margin:2vmin;
}
#lot0 {
  width:100vw;
  height:100vh;
  display:none;
}
#lot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g3 {width:calc(91vmin/3);}
.g4 {width:calc(91vmin/4);}
.g5 {width:calc(91vmin/5);}
.g6 {width:calc(91vmin/6);}
#head img, #piece_img, button {
  cursor:pointer;
}
@media (orientation:portrait) {
  #jigsaw {
    flex-direction: column;
  }
  #grid {
    width:91vmin;
    height:91vmin;
    margin:1vmin;
  }
}