body {
  background-color: #fff;
  margin: 0;
  user-select: none; /* Prevent text selection */
}

.container {
  width: 100vw;
  min-height: 100vh;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.piano {
  flex-shrink: 0; /* Prevent shrinking below min-width */
  width: min(1250px, 95vw);
  height: min(
    550px,
    calc(95vw * 550 / 1250)
  ); /* Keep the 1250:550 ratio when shrinking */
  background-color: #050505;
  border-radius: 15px;
  padding: min(
    2rem,
    calc(95vw * 32 / 1250)
  ); /* Scale with the piano, max 2rem */
  box-sizing: border-box; /* Ensure padding doesn't break fixed dimensions */
}

.key-container {
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  margin: 0 auto;
  overflow: hidden; /* Ensure keys don't overflow the container */
  display: grid;
}

.row {
  grid-column: 1; /* Span the entire width of the grid */
  grid-row: 1; /* Span the entire height of the grid */
  display: flex;
  flex-wrap: wrap;
}

/**
  * Column classes for responsive layout
  * Each class represents a fraction of the total width (12 columns)
  * borrowing Bootstrap's grid system concept but since this is pure css and not scss or sass, it can't be compiled from a loop, so we have to write each class manually.
*/

.col-12 {
  flex: 0 0 calc(12 / 12 * 100%);
  max-width: calc(12 / 12 * 100%);
}
.col-11 {
  flex: 0 0 calc(11 / 12 * 100%);
  max-width: calc(11 / 12 * 100%);
}
.col-10 {
  flex: 0 0 calc(10 / 12 * 100%);
  max-width: calc(10 / 12 * 100%);
}
.col-9 {
  flex: 0 0 calc(9 / 12 * 100%);
  max-width: calc(9 / 12 * 100%);
}
.col-8 {
  flex: 0 0 calc(8 / 12 * 100%);
  max-width: calc(8 / 12 * 100%);
}
.col-7 {
  flex: 0 0 calc(7 / 12 * 100%);
  max-width: calc(7 / 12 * 100%);
}
.col-6 {
  flex: 0 0 calc(6 / 12 * 100%);
  max-width: calc(6 / 12 * 100%);
}
.col-5 {
  flex: 0 0 calc(5 / 12 * 100%);
  max-width: calc(5 / 12 * 100%);
}
.col-4 {
  flex: 0 0 calc(4 / 12 * 100%);
  max-width: calc(4 / 12 * 100%);
}
.col-3 {
  flex: 0 0 calc(3 / 12 * 100%);
  max-width: calc(3 / 12 * 100%);
}
.col-2 {
  flex: 0 0 calc(2 / 12 * 100%);
  max-width: calc(2 / 12 * 100%);
}
.col-1 {
  flex: 0 0 calc(1 / 12 * 100%);
  max-width: calc(1 / 12 * 100%);
}

.footer {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

.white-key-row {
  z-index: 1; /* Ensure white keys are behind black keys */
  height: 100%;
  background-color: #a0a0a0;
  color: #000;
}

.black-key-row {
  z-index: 2; /* Ensure black keys are on top of white keys */
  height: 60%;
  pointer-events: none; /* Allow clicks to pass through to white keys */
  justify-content: center;
  width: 100%;
}

.key {
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.white-key-row .key {
  flex: 0 0 calc(100% / 7);
  height: 100%;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 0 0 8px 8px;
  box-sizing: border-box; /* Ensure borders don't affect width */
}

.black-key-row .key {
  flex: 0 0 calc(100% / 7); /* Adjust width for black keys */
  height: 100%;
  box-sizing: border-box; /* Ensure borders don't affect width */
  pointer-events: auto; /* Allow clicks on black keys */
}

.black-key {
  background-color: #000;
  border: 1px solid #000;
  border-radius: 0 0 8px 8px;
  transform: scaleX(0.5);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.black-key > span {
  transform: scaleX(2); /* Scale the label back to normal size */
}

.blank-key {
  visibility: hidden; /* Hide the blank key but keep its space */
}

.white-key-row .key:hover {
  background-color: #e5e5e5;
}

.white-key-row .key:active, /* Active state for white keys */
.white-key-row .key.active {
  /* Active state for white keys done by adding active class to key that's pressed */
  background-color: #cecece;
}

.black-key-row .key:hover {
  background-color: #333;
}

.black-key-row .key:active,
.black-key-row .key.active {
  background-color: #111;
}