/* /styles.css */
*:focus {outline: none;} /* prevents outline on clicked items */
* { /* reset */
	padding:0;
	margin:0;
	box-sizing:border-box;
}
body { /* prevents text selection */
user-select: none; /* Standard syntax */
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
}
body {
	background: #12f;
	background-image: radial-gradient(#8ff, #00e);
	background-repeat: no-repeat;
	font-size:2.8vmin; font-family:sans-serif;
}
#main { /* 40x30 */
	margin:2vmin auto 0 auto;
	width:96vw; max-width:1200px;
  height:72vw; max-height:900px;
	display:grid;
	grid-template-columns: repeat(40,1fr);
	grid-template-rows: repeat(30,1fr);
}
#md {
  /* row/col */
  grid-area:10/16/span 8/span 12;
}
#md img {
  width:100%;
}
.button {
  width:100%;
	background:#fb0;
	background-image: radial-gradient(#ff0, #d60);
	border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  padding:2vmin;
  box-shadow: .5vmin .5vmin .2vmin #333;
}
a {
  text-decoration:none; color:black;
}
a:hover {
	color:ivory;
}
.button:hover {
	background:magenta;
	background-image: radial-gradient(#faf, #c0c);
}

#i0 {grid-area:3/18/span 3/span 7;}
#i1 {grid-area:5/26/span 3/span 7;}
#i2 {grid-area:9/30/span 3/span 7;}
#i3 {grid-area:13/32/span 3/span 7;}
#i4 {grid-area:17/30/span 3/span 7;}
#i5 {grid-area:21/26/span 3/span 7;}
#i6 {grid-area:23/18/span 3/span 7;}
#i7 {grid-area:21/10/span 3/span 7;}
#i8 {grid-area:17/6/span 3/span 7;}
#i9 {grid-area:13/3/span 3/span 7;}
#i10 {grid-area:9/6/span 3/span 7;}
#i11 {grid-area:5/10/span 3/span 7;}

@media (orientation:portrait) {
  body {
    font-size: 3.3vmin;
  }
  #main { /* 40x30 */
  	width:96vw; max-width:900px;
    height:128vw; max-height:1200px;
  	grid-template-columns: repeat(30,1fr);
  	grid-template-rows: repeat(40,1fr);
  }
  #md {
    /* row/col */
    grid-area:17/12/span 7/span 10;
  }
  #i0 {grid-area:2/13/span 3/span 7;}
  #i1 {grid-area:7/19/span 3/span 7;}
  #i2 {grid-area:12/21/span 3/span 7;}
  #i3 {grid-area:18/23/span 3/span 7;}
  #i4 {grid-area:24/21/span 3/span 7;}
  #i5 {grid-area:29/19/span 3/span 7;}
  #i6 {grid-area:34/13/span 3/span 7;}
  #i7 {grid-area:29/7/span 3/span 7;}
  #i8 {grid-area:24/4/span 3/span 7;}
  #i9 {grid-area:18/2/span 3/span 7;}
  #i10 {grid-area:12/4/span 3/span 7;}
  #i11 {grid-area:7/7/span 3/span 7;}
}