main.css

/**
 * Pure CSS3 Piano by Taufik Nurrohman
 * On: 1 December 2011
 * URL: http://hompimpaalaihumgambreng.blogspot.com/
 * Note: This experiment is under the God Almighty License.
 * Please do not replace or remove the attribution above if you want to save/modify this project legally.
 * Good luck!
 */
 @import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

 * {
  margin:0px;
  padding:0px;
  list-style:none;
  -webkit-touch-callout:none;
  touch-action: manipulation;
}

*, *:after, *:before {
  box-sizing: border-box;
}

:focus {
  outline:none !important;
}

body {
  height: 100vh;
  background:#666;
  background:-webkit-radial-gradient(bottom left,cover,#999,#666);
  background:-moz-radial-gradient(bottom left,cover,#999,#666);
  background:-ms-radial-gradient(bottom left,cover,#999,#666);
  background:-o-radial-gradient(bottom left,cover,#999,#666);
  background:radial-gradient(bottom left,cover,#999,#666);
  -webkit-font-smoothing: antialiased;
  font-size: 0.6em;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -.022em;
  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
  background-color: #fff;
  color: #1d1d1f;
  font-style: normal;  
  touch-action: manipulation; 
  margin: 0;
  padding: 0;
}

a {
  color:indigo;
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

/* Piano Wrapper */
#p-wrapper {
  background:#000;
  background:-webkit-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);
  background:-moz-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);
  background:-ms-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);
  background:-o-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);
  background:linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);
  width:1300px;
  position:relative;
  left:-20px;
  -webkit-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000;
  -moz-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000;
  box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000;
  border:2px solid #333;
  -webkit-border-radius:0 0 5px 5px;
  -moz-border-radius:0 0 5px 5px;
  border-radius:0 0 5px 5px;
  -webkit-animation:taufik 2s;
  -moz-animation:taufik 2s;
  animation:taufik 2s;
}

/* Tuts */
ul#piano {
  display:block;
  width:100%;
  height:240px;
  border-top:2px solid #222;
}

ul#piano li {
  list-style:none;
  float:left;
  display:inline;
  background:#aaa;
  width:40px;
  position:relative;
}

ul#piano li a,ul#piano li div.anchor {
  display:block;
  height:220px;
  background:#fff;
  background:-webkit-linear-gradient(-30deg,#f5f5f5,#fff);
  background:-moz-linear-gradient(-30deg,#f5f5f5,#fff);
  background:-ms-linear-gradient(-30deg,#f5f5f5,#fff);
  background:-o-linear-gradient(-30deg,#f5f5f5,#fff);
  background:linear-gradient(-30deg,#f5f5f5,#fff);
  border:1px solid #ccc;
  -webkit-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7);
  -moz-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7);
  box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7);
  -webkit-border-radius:0 0 3px 3px;
  -moz-border-radius:0 0 3px 3px;
  border-radius:0 0 3px 3px;
}

ul#piano li div.anchor.active{
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);
  box-shadow:0 2px 2px rgba(0,0,0,0.4);
  position:relative;
  top:2px;
  height:216px;
}

ul#piano li div.anchor.active:before {
  content:"";
  width:0px;
  height:0px;
  border-width:216px 5px 0px;
  border-style:solid;
  border-color:transparent transparent transparent rgba(0,0,0,0.1);
  position:absolute;
  left:0px;
  top:0px;
}

ul#piano li div.anchor.active:after {
  content:"";
  width:0px;
  height:0px;
  border-width:216px 5px 0px;
  border-style:solid;
  border-color:transparent rgba(0,0,0,0.1) transparent transparent;
  position:absolute;
  right:0px;
  top:0px;
}

/* Black Tuts */
ul#piano li span {
  position:absolute;
  top:0px;
  left:-12px;
  width:20px;
  height:120px;
  color: white;
  background:#333;
  background:-webkit-linear-gradient(-20deg,#333,#000,#333);
  background:-moz-linear-gradient(-20deg,#333,#000,#333);
  background:-ms-linear-gradient(-20deg,#333,#000,#333);
  background:-o-linear-gradient(-20deg,#333,#000,#333);
  background:linear-gradient(-20deg,#333,#000,#333);
  z-index:10;
  border-width:1px 2px 7px;
  border-style:solid;
  border-color:#666 #222 #111 #555;
  -webkit-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4);
  -webkit-border-radius:0 0 2px 2px;
  -moz-border-radius:0 0 2px 2px;
  border-radius:0 0 2px 2px;
}

ul#piano li span.active{
  border-bottom-width:2px;
  height:123px;
  -webkit-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000;
  -moz-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000;
  box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000;
}
.clear {
  clear:both;
}

/* Animation */
@-webkit-keyframes taufik {
  from {opacity:0;}
  to {opacity:1;}
}
@-moz-keyframes taufik {
  from {opacity:0;}
  to {opacity:1;}
}
@keyframes taufik {
  from {opacity:0;}
  to {opacity:1;}
}

/* dialog */
.modal {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
}

.dialog {
  width: 30em;
  background-color: #fff;
  border: 1px solid black;
  border-radius: 20px;
  padding: 2em;
  display: flex;
  flex-direction: column;
}

.dialog > div {
  margin: .5em 0;
}

.btn {
  padding: .5em 1.2em;
  border: 1px solid black;
  border-radius: .5em;
  background-color: #1e1efe;
  color: #fefefe;
  width: fit-content;
  cursor: pointer;
  align-self: flex-end;
}

.hidden {
  visibility: hidden;
}

#debug {
  position: fixed;
  top: .5em;
  right: .5em;
  padding: .5em 1em;
  border-radius: 1em;
  border: 1px solid black;
  background-color: white;
  justify-content: center;
  text-align: center;
  line-height: 1em;
  cursor: pointer;
}

#log {
  position: fixed;
  bottom: 0;
  overflow-y: scroll;
  outline: 1px #555 solid;
  margin: .5em;
  background-color: forestgreen;
  color: cornsilk;
  width: 96vw;
  height: 20em;
  padding: .5rem;
  overflow-wrap: break-word;
  opacity: 0.5;
}

#grid {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: center;
}

body.body--grid,
#container.container--grid {
  background-color: #333;
  background-image: none;
}

#container {
  --pad-highlight: rgba(255, 255, 255, 0.2);
  --pad-highlight-active: rgba(200, 200, 200, 0.2);
  --pad-shadow: rgba(0, 0, 0, 0.25);
  --pad-shadow-active: rgba(0, 0, 0, 0.15);
  --pad-shadow-up: 1vw;
  --pad-shadow-down: -1vw;
  --pad-shadow-blur: 1vw;
}
#container > #grid {
  padding: 0.5%;
}
#container > #grid > li {
  position: relative;
  width: 20%;
}
#container > #grid > li:before {
  display: block;
  content: "";
  padding-top: 100%;
}
#container > #grid > li > .anchor {
  position: absolute;
  top: 1%;
  right: 1%;
  bottom: 1%;
  left: 1%;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  border-radius: 2px;
  box-shadow: inset var(--pad-shadow-down) var(--pad-shadow-down) var(--pad-shadow-blur) 0px var(--pad-shadow),
              inset var(--pad-shadow-up) var(--pad-shadow-up) var(--pad-shadow-blur) 0px var(--pad-highlight);
  background: radial-gradient(circle, rgba(208,208,208,1) 0%, rgba(170,170,170,1) 100%);
  transition: 40ms;
}
#container > #grid > li > .anchor.active {
  box-shadow: inset var(--pad-shadow-down) var(--pad-shadow-down) var(--pad-shadow-blur) 0px var(--pad-shadow-active),
              inset var(--pad-shadow-up) var(--pad-shadow-up) var(--pad-shadow-blur) 0px var(--pad-highlight-active),
              inset 0 0 32px 0 rgba(255, 255, 255, 0.5);
  background: radial-gradient(circle, rgba(200,200,200,1) 0%, rgba(170,170,170,1) 100%);
  transform: scale3d(0.9875, 0.9875, 1.0);

}
#container > #grid > li .anchor__key {
  --pad-text-glow:  0 0 16px rgba(0, 0, 0, 0.25), 0 0 4px rgba(100, 100, 100, 1.0);
  --pad-text-color: rgb(50, 50, 50, 0.25);
  --pad-bg-color: rgba(255, 255, 255, 0);
  --pad-bg-glow: 0;
  pointer-events: none;
  font-size: 27px;
  font-weight: bold;
  line-height: 27px;
  letter-spacing: 0.5px;
  font-family: "Anton", sans-serif;
  text-shadow: var(--pad-text-glow);
  color: var(--pad-text-color);
  box-shadow: var(--pad-bg-glow);
  background-color: var(--pad-bg-color);
  opacity: 0.5;
  transition: 88ms;
  filter: blur(0px);
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#container > #grid > li .active .anchor__key {
  --pad-text-glow: 0 0 16px rgba(143, 159, 255, 0.25), 0 0 4px rgb(36, 105, 255);
  --pad-text-color: rgba(227, 236, 255, 0.95);
  --pad-bg-color: rgba(62, 98, 255, 0.466);
  --pad-bg-glow: 0 0 32px 0 rgba(0, 89, 255, 0.5);
  /* filter: blur(1px); */
  opacity: 0.75;
}
#container > #grid > li .active--network .anchor__key {
  --pad-text-glow: 0 0 16px rgba(255, 255, 255, 0.25), 0 0 4px rgba(200, 200, 200, 1.0);
  --pad-text-color: rgba(255, 255, 255, 0.95);
  --pad-bg-color: rgba(255, 255, 255, 0.15);
  --pad-bg-glow: 0 0 32px 0 rgba(255, 255, 255, 0.5);
  /* filter: blur(1px); */
  opacity: 0.75;
}