:root {
  --white-key-color: #f6f5cbd7;
  --white-key-active-color: #f3f8f82f;
  --black-key-color: linear-gradient(to bottom, rgba(79, 74, 74, 1), rgb(0, 0, 0));
  --box-shadov: 0 9px 5px rgba(37, 36, 36, 0.812);
  --box-shadow-active: 0 5px 3px rgba(25, 25, 25, 0.712);
}

* {
  padding: 0;
  margin: 0;
}

.piano {
  margin: 0;
  height: max-content;
  background: linear-gradient(to left bottom, rgb(236, 214, 154), rgb(151, 177, 195));
}

.piano-name {
  height: 100px;
}

h1 {
  text-align: center;
  padding: 40px 0;
  font-family: "Dancing Script", cursive;
  font-size: 50px;
  color: rgb(23, 23, 67);
}

ul {
  list-style-type: none;
}

.piano-keyboard {
  width: max-content;
  height: 470px;
  position: relative;
  margin: 40px auto; 
}


/*black keys styles*/
.white {
  display: flex;
}

.white .key {
  background: var(--white-key-color);
  height: 470px;
  width: 100px;
  border: 3px solid rgba(0, 0, 0, 0.695);
  border-top: 10px solid hsla(246, 70%, 18%, 1);
  box-shadow: var(--box-shadov);
}

#do-1 {
  border-left: 6px solid rgba(0, 0, 0, 0.695);
}

#mi-2 {
  border-right: 6px solid rgba(0, 0, 0, 0.695);
}

.white button:hover {
  background: #f6f5cb95;
}

.white button:active {
  border-style: outset;
  height: 472px;
  box-shadow: var(--box-shadow-active);
  background: var(--white-key-active-color);
}


/*black keys styles*/
.black {
  position: absolute;
  top: 0;
  height: 310px;
  margin-top: 9px;
  padding-left: 68px;
  pointer-events: none;
  display: flex;
  gap: 35px;
  justify-content: center;
}

.black li {
  width: 65px;
}

.black .key {
  background: var(--black-key-color);
  height: 300px;
  width: 100%;
  box-shadow: var(--box-shadov);
  pointer-events: all;
}

.black button:hover {
  background: linear-gradient(to bottom, rgb(115, 125, 128), rgba(0, 0, 0, 1));
}

.black button:active {
  border-style: outset;
  height: 301px;
  box-shadow: var(--box-shadow-active);
}

#do-diez-1:active {
  background: hsl(180, 81%, 8%);
  border: 2px solid hsl(180, 81%, 5%);
}

#re-diez-1:active {
  background: hsl(180, 75%, 14%);
  border: 2px solid hsl(180, 75%, 12%);
}

#fa-diez-1:active {
  background: hsl(180, 66%, 22%);
  border: 2px solid hsl(180, 66%, 18%);
}

#sol-diez-1:active {
  background: hsl(180, 60%, 32%);
  border: 2px solid hsl(180, 60%, 28%);
}

#la-diez-1:active {
  background: hsl(180, 52%, 44%);
  border: 2px solid hsl(180, 52%, 40%);
}

#do-diez-2:active {
  background: hsl(180, 57%, 55%);
  border: 2px solid hsl(180, 57%, 47%);
}

#re-diez-2:active {
  background: hsl(180, 82%, 65%);
  border: 2px solid hsl(180, 82%, 55%);
}

.selected {
  position: relative;
}

.selected::after {
  position: absolute;
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background-image: url("./note-image.svg");
  background-size: 30px 30px;
  bottom: 10px;
  left: 50%;
  translate: -50%;
}


/*colors {
  color: #042626;
  color: #093f3f;
  color: #135d5d;
  color: #208383;
  color: #35aaaa;
  color: #4acdcd;
  color: #5eefef;


  color: #f3f8f82f;
}*/




.input-field {
  width: max-content;
  align-items: center;
  justify-content: center;
  margin: 130px auto 0;
  padding-bottom: 100px;
  display: flex;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 500px;
  padding-right: 50px;
}

label {
  font-family: "Dancing Script", cursive;
  font-size: 40px;
  font-weight: bold;
  color: rgb(23, 23, 67);
  text-align: center;
}

#melody-choice {
  font-family:"Harrington", fantasy;
  font-size: 25px;
  font-weight: 500;
  color: rgb(0, 0, 0);
  border-radius: 15%;
  width: 300px;
  height: 55px;
  margin: 20px 0;
}

#custom-melody-input {
  font-family:"Harrington", fantasy;
  font-size: 25px;
  font-weight: 500;
  color: rgb(0, 0, 0);
  border-radius: 10%;
  height: 250px;
  width: 300px;
  margin: 20px 0;
}

#play-btn {
  font-family: "Dancing Script", cursive;
  font-size: 25px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  border-radius: 13%;
}


.instrucion {
  width: 650px;
  height: max-content;
}

h3 {
  font-family: "Dancing Script", cursive;
  font-size: 35px;
  font-weight: bold;
  color: rgb(23, 23, 67);
  text-align: center;
  padding-bottom: 12px;
}

p {
  word-break: keep-all;
  letter-spacing: 1.5px;
  line-height: 1.3;
  font-family:"Harrington", fantasy;
  color: black;
  font-size: 20px;
  font-weight: 500;
}

.important-inf {
  text-decoration: underline;
}

.examples {
  color: rgb(34, 146, 165);
  font-weight: 600;
}