@font-face {
  font-family: Fuzzy;
  src: url("fonts/FuzzyBubbles-Bold.ttf");
}

:root {
  --boardHeight : 96dvh;
  --keyNos : 10;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Fuzzy;
  user-select: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
}

.board {
  width: 90dvw;
  position: absolute;
  height: var(--boardHeight);
  overflow-y: scroll;
  overflow-x: hidden;
  border-radius: 0.5rem;
  background: hsla(0, 0%, 15%, 1);
  border: 2px solid;
  padding-left: 4px;
  anchor-name: --board;
  scroll-snap-type: y mandatory;
}

.key.white {
  background-image: linear-gradient(to right, hsla(0, 0%, 90%, 1), hsla(0, 0%, 98%, 1), hsla(0, 0%, 90%, 1));
  width: 70%;
  height: calc((var(--boardHeight) - 4px)/var(--keyNos));
  border: 2px solid hsla(0, 0%, 15%, 1);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
}

.key.black {
  background-image: linear-gradient(to right, hsla(0, 0%, 20%, 1), hsla(0, 0%, 5%, 1), hsla(0, 0%, 0%, 1));
  position: absolute;
  width: 70%;
  height: calc((var(--boardHeight) - 4px)/var(--keyNos));
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  color: white;
  transform: translateX(25%) translateY(-50%) scale(0.85);
  box-shadow: 0 0 10px hsla(0, 0%, 40%, 1) , 0 0 10px hsla(0, 0%, 40%, 1) inset;
}

.keyName {
  transform: rotate(90deg) translateY(25%);
  width: calc((var(--boardHeight) - 4px)/var(--keyNos));
  transform-origin: center;
  text-align: center;
}

.pressed.white {
  box-shadow: 0 0 15px hsla(0, 0%, 40%, 1) inset;
  border: 3px solid;
}

.pressed.black {
  box-shadow: 0 0 20px hsla(0, 0%, 40%, 1) inset;
  transform: translateX(25%) translateY(-50%) scale(0.8);
}

.pad {
  position-anchor: --board;
  position-area: start end;
  position: absolute;
  height: calc(((var(--boardHeight) - 4px)/var(--keyNos))*52);
  top: 0;
  right: 0;
  width: 45%;
  background-image: linear-gradient(to right, hsla(0, 0%, 0%, 1), hsla(0, 0%, 5%, 1), hsla(0, 0%, 15%, 1));
  z-index: 9999;
}

.white .keyName {
  display: block;
}

.black .keyName {
  display: none;
}