*{
  box-sizing: border-box;
}
body{
  background-image:linear-gradient(to bottom, #bec1c8, #5c5c64);
  background-color:gray;
  font-size:40px;
  color:white;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  align-items:center;
  margin:0;
  height:100vh;
  overflow:hidden;
  user-select:none;
}
.dot{
  border-radius:100%;
  background:white;
  width:100%;
  height:100%;
  position: relative;
  animation: bounce 1s ease-out 0s infinite alternate forwards running;
  background-size:contain;
  z-index:30;
  box-shadow:inset 0 -5px 15px #333;
  &:after{
    content:"";
    position: absolute;
    left:20%;
    top: 2%;
    width:60%;
    height:60%;
    border-radius: 100%;
    background-image:linear-gradient(to bottom, white -20%, transparent 50%);
  }
}
.shadow{
  content:"";
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  border-radius:100%;
  background:#00000044;
  animation: shadow 1s ease-out 0s infinite alternate forwards running;
}
@keyframes bounce {
  0% { scale:.8; }
  100% { scale:1.1;}
}
@keyframes shadow {
  0% { left:0; scale:.7;}
  100% {
    opacity:.1;
    left:5vw;
    scale:1;
  }
}
.container {
  width:100vw;
  height:100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    ". . . . . . . . . . . . . . . . ."
    ". b b b . . . . . l l l . . . . ."
    "a . . c . . k k . . . . m . . r ."
    ". . . c . h . . j . . n . . s . ."
    ". . . c . h . . j . . n . t t t ."
    ". . d . . h . . j . o . . u . . w"
    "e e . . . h . . j . o . . u . . w"
    ". f . . . . i i . p . . . . v v ."
    ". . g g g . . . . q q q q . . . ."
    ". . . . . . . . . . . . . . . . .";
    .btn{
      background:#ffffff33;
      position: relative;
      cursor:pointer;
      &.active{
        box-shadow:inset 0px 2px 2px #00000033;
        background:#00000011;
      }
      &:hover:not(.active){
        box-shadow:inset 0px 1px 1px #ffffff99;
      }
    }
    .a { grid-area: a; }
    .b { grid-area: b; }
    .c { grid-area: c; }
    .d { grid-area: d; }
    .e { grid-area: e; }
    .f { grid-area: f; }
    .g { grid-area: g; }
    .h { grid-area: h; }
    .i { grid-area: i; }
    .j { grid-area: j; }
    .k { grid-area: k; }
    .l { grid-area: l; }
    .m { grid-area: m; }
    .n { grid-area: n; }
    .o { grid-area: o; }
    .p { grid-area: p; }
    .q { grid-area: q; }
    .r { grid-area: r; }
    .s { grid-area: s; }
    .t { grid-area: t; }
    .u { grid-area: u; }
    .v { grid-area: v; }
    .w { grid-area: w; }
}

@media only screen and (max-width: 1000px) {

}