@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root {
  --key-width: 60px;
  --key-height: calc(var(--key-width) * 3);
  --sharp-width: calc(var(--key-width) / 2);
  --sharp-height: calc(var(--sharp-width) * 3);
  --sharp-margin: calc(var(--sharp-width) / -2);
}

body {
  text-align: center;
  background-color: #283149;
  font-family: "Poppins", sans-serif;
}

h1 {
  font-size: 5rem;
  color: #dbedf3;
  text-shadow: 3px 0 #da0463;
}

.pressed {
  opacity: 0.5;
}

.keys {
  display: flex;
  padding: 4%;
}

.key {
  width: var(--key-width);
  height: var(--key-height);
  background-color: white;
  border: 1px solid black;
  position: relative;
  z-index: 1;
}

.sharp {
  width: var(--sharp-width);
  height: var(--sharp-height);
  background-color: black;
  margin: 0 var(--sharp-margin);
  z-index: 2;
}

.key span,
.sharp span {
  position: absolute;
  bottom: 3px;
  left: 6px;
  font-size: 22px;
  font-weight: bold;
}

.sharp span {
  color: white;
  left: 3px;
  font-size: 20px;
}

.key:hover {
  cursor: pointer;
}