html, body{max-width:100%; height:100%; overflow:hidden;}
body{margin:0; min-height:100%;background:black;
-webkit-touch-callout: none; -webkit-user-select: none; /* iOS/Safari */
-khtml-user-select: none; -moz-user-select: none; /* Konqueror/FF  */
-ms-user-select: none; user-select: none; /* IE/Official: Chrome, Edge, Opera, Firefox */
}
button { font-size:2.8vw; background-color:hsl( 30,50%,50%); color:lightgrey; border:0; padding:1vw;}
button.preset  { background-color:hsl(180,50%,50%); color:white; border:0;}
button.preset:hover , button.setting:hover { background-color:black; }
.hex_grid { display:flex; justify-content:center; height:100%;
background:linear-gradient(225deg, hsl(180,90%,40%) 10%, #000 100%);
}
.hex_list {
  position:relative;
  padding:1vw;
  width:100vw;
  margin:0;
  list-style-type:none;
  display:grid;
  grid-template-columns:repeat(var(--amount),1fr 2fr) 1fr;
  grid-gap:1vw 2vw;
}
.hex_item {position:relative;
  grid-column:1/span 3;
  grid-row:calc(var(--counter) + var(--counter))/span 999;
  -webkit-filter:drop-shadow(0 0 10px rgba(68,68,68,.08));
  filter:drop-shadow(0 0 10px rgba(68,68,68,.08));
  height:0;
  padding-bottom:90%}
.hex_content:hover {color:red;background-color:pink;}
.hex_content {
  font-size:2.5vw;
  position:absolute;
  height:100%;
  width:100%;
  font-size:2.5vw;
  color:#111;
  background-color:#fff;
  -webkit-clip-path:polygon(75% 0,100% 50%,75% 100%,25% 100%,0 50%,25% 0);
  clip-path:polygon(75% 0,100% 50%,75% 100%,25% 100%,0 50%,25% 0);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  text-align:center;
  transition:transform .24s ease-out;
  border: none;
}
#menutoggle {
  font-size:4vw;
  color:#EEE;
  background-color:#111;
}
#menutoggle:hover {
  color:#111;
  background-color:pink;
}
@media screen and (min-width:1000px){
  button { font-size:1.7vw; }
  .hex_content { font-size:2.0vw; }
  #menutoggle { font-size:3vw; }
}
@media screen and (min-width:2000px){
  button { font-size:0.6vw; }
}
.oddoctave { background-color:#CCC; color:#222; }
.m0  { background-color:hsl(180,50%,50%); color:white; }
.m5  { background-color:hsl(210,50%,50%); color:lightgrey; }
.m9  { background-color:hsl(240,50%,50%); color:lightgrey; }
.m14 { background-color:hsl(270,50%,50%); color:lightgrey; }
.m17 { background-color:hsl(300,50%,50%); color:lightgrey; }
.m22 { background-color:hsl(330,50%,50%); color:lightgrey; }
.m26 { background-color:hsl(  0,50%,50%); color:lightgrey; }
.m31 { background-color:hsl( 30,50%,50%); color:lightgrey; }
.m36 { background-color:hsl( 60,50%,50%); color:whitesmoke; }
.m39 { background-color:hsl( 90,50%,50%); color:lightgrey; }
.m44 { background-color:hsl(120,50%,50%); color:lightgrey; }
.m48 { background-color:hsl(150,50%,50%); color:lightgrey; }
.hex_list {--amount:16; --counter:1}
.hex_item:nth-of-type(16n+ 1){grid-column: 1/span 3}
.hex_item:nth-of-type(16n+ 2){grid-column: 3/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+ 3){grid-column: 5/span 3}
.hex_item:nth-of-type(16n+ 4){grid-column: 7/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+ 5){grid-column: 9/span 3}
.hex_item:nth-of-type(16n+ 6){grid-column:11/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+ 7){grid-column:13/span 3}
.hex_item:nth-of-type(16n+ 8){grid-column:15/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+ 9){grid-column:17/span 3}
.hex_item:nth-of-type(16n+10){grid-column:19/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+11){grid-column:21/span 3}
.hex_item:nth-of-type(16n+12){grid-column:23/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+13){grid-column:25/span 3}
.hex_item:nth-of-type(16n+14){grid-column:27/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+15){grid-column:29/span 3}
.hex_item:nth-of-type(16n+16){grid-column:31/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
/* stagger up, down
.hex_item:nth-of-type(16n+ 1){grid-column: 1/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+ 2){grid-column: 3/span 3}
.hex_item:nth-of-type(16n+ 3){grid-column: 5/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+ 4){grid-column: 7/span 3}
.hex_item:nth-of-type(16n+ 5){grid-column: 9/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+ 6){grid-column:11/span 3}
.hex_item:nth-of-type(16n+ 7){grid-column:13/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+ 8){grid-column:15/span 3}
.hex_item:nth-of-type(16n+ 9){grid-column:17/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+10){grid-column:19/span 3}
.hex_item:nth-of-type(16n+11){grid-column:21/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+12){grid-column:23/span 3}
.hex_item:nth-of-type(16n+13){grid-column:25/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+14){grid-column:27/span 3}
.hex_item:nth-of-type(16n+15){grid-column:29/span 3; grid-row:calc(var(--counter) + var(--counter) - 1)/span 2}
.hex_item:nth-of-type(16n+16){grid-column:31/span 3}
*/
.hex_item:nth-of-type(n+ 17){--counter:2}
.hex_item:nth-of-type(n+ 33){--counter:3}
.hex_item:nth-of-type(n+ 49){--counter:4}
.hex_item:nth-of-type(n+ 65){--counter:5}
.hex_item:nth-of-type(n+ 81){--counter:6}
.hex_item:nth-of-type(n+ 97){--counter:7}
.hex_item:nth-of-type(n+113){--counter:8}
.hex_item:nth-of-type(n+129){--counter:9}
.hex_item:nth-of-type(n+145){--counter:10}
.hex_item:nth-of-type(n+161){--counter:11}
.hex_item:nth-of-type(n+177){--counter:12}
.hex_item:nth-of-type(n+193){--counter:13}
.hex_item:nth-of-type(n+209){--counter:14}
.hex_item:nth-of-type(n+225){--counter:15}
.hex_item:nth-of-type(n+241){--counter:16}
.hex_item:nth-of-type(n+257){--counter:17}
.hex_item:nth-of-type(n+273){--counter:18}
.hex_item:nth-of-type(n+289){--counter:19}
.hex_item:nth-of-type(n+305){--counter:20}
.hex_item:nth-of-type(n+321){--counter:21}
.hex_item:nth-of-type(n+337){--counter:22}
.hex_item:nth-of-type(n+353){--counter:23}
.hex_item:nth-of-type(n+369){--counter:24}
.hex_item:nth-of-type(n+385){--counter:25}
.hex_item:nth-of-type(n+401){--counter:26}
.hex_item:nth-of-type(n+417){--counter:27}
.hex_item:nth-of-type(n+433){--counter:28}
.hex_item:nth-of-type(n+449){--counter:29}
.hex_item:nth-of-type(n+465){--counter:30}
.hex_item:nth-of-type(n+481){--counter:31}
.hex_item:nth-of-type(n+497){--counter:32}
.hex_item:nth-of-type(n+513){--counter:33}
.hex_item:nth-of-type(n+529){--counter:34}
.hex_item:nth-of-type(n+545){--counter:35}
.hex_item:nth-of-type(n+561){--counter:36}
.hex_item:nth-of-type(n+577){--counter:37}
.hex_item:nth-of-type(n+593){--counter:38}
.hex_item:nth-of-type(n+609){--counter:39}
.hex_item:nth-of-type(n+625){--counter:40}
.hex_item:nth-of-type(n+641){--counter:41}
.hex_item:nth-of-type(n+657){--counter:42}
.hex_item:nth-of-type(n+673){--counter:43}
.hex_item:nth-of-type(n+689){--counter:44}
.hex_item:nth-of-type(n+705){--counter:45}
.hex_item:nth-of-type(n+721){--counter:46}
.hex_item:nth-of-type(n+737){--counter:47}