:root {
  --000: #f0fbfa;
  --100: #d8f5f5;
  --200: #b5eaec;
  --300: #63cfd5;
  --400: #48bfc8;
  --500: #2da2ad;
  --600: #288492;
  --700: #266b78;
  --800: #275963;
  --900: #254a54;
  --950: #133039;

}

html {
  font-size: 10px;
  background: url('./background2.jpg') bottom center;
  background-color: var(--950);
  background-size: cover;
  scroll-behavior: smooth;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  user-select: none;

}

body,
html {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 {
  font-size: clamp(6.4rem, 7vw, 9.6rem);
  font-weight: 400;
  text-align: center;
  color: var(--000);
  padding-block: 1.6rem;
  padding-inline: 3.2rem;
  text-align: center;
  background-image: linear-gradient(90deg, var(--400) 0%, var(--600) 100%);
  border-radius: 12px;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  font-size: clamp(6rem, 5vw, 10rem);
  text-shadow: 1px 1px 1px var(--500), -1px -1px 4px var(--950);
  font-weight: 700;
  transition: all 0.2s ease;
  filter: drop-shadow(0 0 4px var(--100));
}

main {
  place-self: center;
  display: grid;
  place-items: center;
  height: 100%;
  place-content: center;
  text-align: center;
  width: 100%;
  transition: all 0.07s;
  padding-bottom: 10rem;
}

.keys {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Default for small screens */
  text-align: center;
  transition: all 0.03s;
  place-items: center;
  justify-content: center;
  height: 100%;
  width: 60vw;
  margin: 0 auto;
  gap: 2rem;
}

.key {
  border-radius: 2rem;
  position: relative;
  margin: 2rem;
  padding: .25rem .125rem;
  transition: all 0.07s;
  width: 12rem;
  height: 12rem;
  display: grid;
  place-items: center;
  place-content: center;
  text-align: center;
  color: var(--100);
  filter: drop-shadow(0 0 .5rem var(--300));
  text-shadow: 0 0 .5rem var(--950);
  background: #01010199;
  transform-origin: center;
}

@media screen and (max-width: 500px) {
  .keys {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns for mobile phone screens */
    place-items: center;
    justify-content: center;

  }
}

@media screen and (min-width: 760px) and (max-width: 980px) {
  .keys {
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns for medium screens */
    place-items: center;
    /* Add your specific styles for this screen size range */
    .key[data-key="87"] {
      grid-column: 2;
      grid-row: 4;
    }
  }
}

@media screen and (min-width: 980px) {
  .keys {
    grid-template-columns: repeat(4, 1fr);
    place-items: center;
    .key[data-key="87"] {
      grid-column: 3;
      grid-row: 3;
    }
    .key[data-key="76"] {
      grid-column: 2;
      grid-row: 3;
    }
  }
}

.playing {
  transform: scale(1.07);
  border: solid var(--200);
  box-shadow: 0 0 1rem var(--300);
  filter: drop-shadow(0 0 .5rem var(--500));
}

kbd {
  display: block;
  font-size: 3rem;
}

.sound {
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: var(--500);
  filter: drop-shadow(0 0 24rem var(--100));
  text-shadow: 0 0 1rem var(--900);
  font-weight: 500;
}