#c{color:rgb(70, 10, 10)}
.bg{background-color: rgb(248, 250, 255); color:rgb(173, 183, 240)}
.shad5{background: linear-gradient(rgba(0,0,0,1%),rgba(0,0,0,1%))}
.shad4{background: linear-gradient(rgba(0,0,0,2%),rgba(0,0,0,2%))}
.shad3{background: linear-gradient(rgba(0,0,0,3%),rgba(0,0,0,3%))}
.shad2{background: linear-gradient(rgba(0,0,0,5%),rgba(0,0,0,5%))}
.shad1{background: linear-gradient(rgba(0,0,0,8%),rgba(0,0,0,8%))}
.shad0{background: linear-gradient(rgba(0,0,0,13%),rgba(0,0,0,13%))}
.P{background-color:rgb(255, 245, 241);color:coral;font-weight: 900;}
.V{background-color:rgb(255, 251, 247);color:rgb(175, 95, 38)}
.S{background-color:rgb(249, 255, 249);color:rgb(20, 119, 20)}
.X{background-color:rgb(251, 246, 255);color:blueviolet}
.N{background-color:white;color:aqua}
.R{background-color:rgb(255, 246, 246);color:red}
.help{color:lightgray;}
a:link{
  text-decoration:none;
}
@media all and (min-width: 0px) and (max-width: 800px) {
  body{
    font-size: 3.1vw;
    line-height: 2.9vw;
  }
  #g{
    /* font-size:2vw; */
    width: 96vw;
    height: 90vw; /* square, same as width*/
    .px{
      display:inline-block;
      width: 1.6vw;
      height: 3vw;
      
      
    }
  }
}
@media all and (min-width: 801px) {
  body{
    font-size: 26px;
    line-height: 25px;
  }
  #g{
    margin: 12% 0 0 0;
    width: 800px;
    height: 800px;
    .px{
      display:inline-block;
      width: 13px;
      height: 26px;
      
    }
  }
}