/* ============================================================
   Piano Container
   ============================================================ */
#piano {
  background-color:var(--accent-color-dteal);
  width: 95%;
  height: 290px;
  margin: 80px auto;
  padding: 90px 20px 0 20px;
  position: fixed;
  border-radius: 10px;
}

/* ============================================================
   Key Area
   ============================================================ */
.keys {
  background-color: #040404;
  width: 100%;
  height: 180px;
  padding-left: 2px;
  overflow: hidden;
}

/* ============================================================
   White Keys
   ============================================================ */
.key {
  background-color: #fff;
  position: relative;
  width: 41px;
  height: 175px;
  margin: 2px;
  float: left;
  border-radius: 0 0 3px 3px;

  /* Accessibility: visible keyboard focus */
  outline: none;
}

.key:focus,
.key:focus-visible {
  outline: 5px solid var(--accent-color-gold);
  outline-offset: 2px;
}

/* ============================================================
   Black Keys
   ============================================================ */
.key.black--key::after {
  content: "";
  position: absolute;
  left: -18px;
  width: 32px;
  height: 100px;
  background-color: #1d1e22;
  border-radius: 0 0 3px 3px;
}

/* ============================================================
   Piano Logo
   ============================================================ */
.logo {
  width: 200px;
  position: absolute;
  top: 23px;
}

/* ============================================================
   Reduced Motion Support
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}