body {
  margin: 0;
  height: 100vh;
  font-family: "Tac One", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  transition: 0.5s;
}

/* Backgrounds */
.bg-classic { background-image: url("./image/image.png"); }
.bg-dark { background-image: url("./image/image copy 2.png"); }
.bg-colorful { background-image: url("./image/image\ copy.png"); }

.controls { margin-bottom: 15px; }

select { padding: 6px 10px; border-radius: 6px; }

.piano { display: flex; gap: 4px; }

.key {
  width: 28px;
  height: 150px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.1s;
}
h1{
    color: white;
    text-shadow: 2px 5px 4px rgba(0,0,0,0.7);
    font-size: 50px;
}

.key:active { transform: scale(0.95); }

/* Piano Styles */
.style-classic .key { background: linear-gradient(#fff, #ccc); color: #000; border: 1px solid #444; }
.style-dark .key { background: linear-gradient(#333, #000); color: #fff; border: 1px solid #777; }
.style-colorful .key { background: linear-gradient(#ffda77, #ff7a00); color: #000; border: 1px solid #000; }