body {
  background-color: #fffacd;
}
#main {
  margin:0 auto;
  display:flex;
  flex-direction: column;
  width:98vw;
  max-width: 150vmin;
  border:3px solid black;
}
#middle {
  display:flex;
  justify-content:flex-start;
  align-items: center;
  flex-direction: column;
}
#canvases {
  display: grid;
}
#canvas2, #canvas3 {
  grid-row:1;
  grid-column:1;
}
#shapes {
  height:50vmin;
  display: flex;
  align-items: center;
}
#col1, #col2 {
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  height:100%;
  margin:0 1vmin;
}
#shapes img {
  height: 8vmin;
  visibility: hidden;
}
#repeat, #angles {
  height:48vmin;
}
.shape_highlight {
  outline:1vmin solid lime;
}
#middle,#shapes,#angles,#repeat,#buttons,#bottom_right {
  border:1px solid red;
}
#top, #bottom, #col1, #col2 {
  border:1px solid green;
}
#top, #bottom {
  width:100%;
  display:flex;
  align-items: flex-start;
  justify-content: space-around;
}
#canvas1, #canvas2, #canvas3 {
  border:1px solid;
  margin:2vmin;
}
.button {
  cursor: pointer;
  font-size: 3vmin;
  font-family: sans-serif;
  padding:3vmin 0;
  background-color: beige;
  border:.5vmin solid brown;
  border-radius: 50%;
  text-align: center;
  margin:2vmin;
  width:10vmin;
}
#next {
  visibility:hidden;
}
#angles {
  width:26vmin;
  display:grid;
  grid-template-rows: repeat(45,1fr);
  grid-template-columns: repeat(25,1fr);
  margin-top:-3vmin;
}
#angles img {
  height:100%;
  grid-row:1/span 45;
  grid-column:1/span 25;
}
#angle {
  grid-row:2/span 7;
  grid-column:16/span 10;
  font-size:5.5vmin;
  color:blue;
  padding-left:6vmin;
}
#repeat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:8vmin;
  margin-top:-3vmin;
  margin-left: -5vmin;
}
#repeat img {
  height:6vmin;
}
#shapes img,#a1,#a2,#a3,#a4,#a5,#a6,#a7,#a8,#repeat img {
  cursor:pointer;
}
#n {
  font-size:6.5vmin;
  color:blue;
}
#buttons {
  display:flex;
  justify-content: space-around;
}
#count {
  font-size:3vmin;
  font-style: italic;
  margin-top:-1vmin;
}
#bottom_right {
  height:40vmin;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width:55vmin;
}
#head2 {
	display:flex;
  justify-content: space-around;
	align-items: center;
  width:100%;
  padding:1vmin 0;
  border:3px solid #eca;
  background-color: #fec;
}
#head2 img {
	width:6vmin;
}
#head2 #title img {
	width:auto;
	max-height:4vmin;
}
#top_shapes {
  display:flex;
}
@media (orientation:portrait) {
  #top_shapes {
    flex-direction: column;
  }
  #shapes {
    height:14vmin;
  }
  #col1, #col2 {
    flex-direction:row;
    align-items: center;
    width:50%;
    margin:3vmin 0 5vmin 0;
  }
  #angle {
    margin-top:2vmin;
  }
  #repeat {
    margin-left:-1vmin;
  }
}