*{
  color: rgb(255, 255, 255);
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
}

body {
  
  background-color: rgb(60,35,92);
  padding: 0px;
  margin: 0px;
  justify-content: center;
}

.cinzel {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
}

.nunito {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
}


.wrapper {
    display: grid;
    background-color: rgb(197, 50, 187);
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(5, 100px);
}

.one {
  grid-row: 1;
  grid-column: 1/3;
  background-color: rgb(60,35,92);
  padding: 25px;
  border: 10px;
  border-style: ridge;
  border-color: rgb(45, 26, 70);
  display: flex;
  justify-content: center;
  align-items: center;
}

.two {
  grid-row: 2/7;
  grid-column: 1/3;
  background-color: rgb(60,35,92);
  padding: 25px;
  border: 10px;
  border-style: ridge;
  border-color: rgb(45, 26, 70);
}

.three {
  grid-row: 1/7;
  grid-column: 3/21;
  background-color: rgb(124, 44, 161);
  padding: 25px;
  border: 10px;
  border-style: ridge;
  border-color: rgb(101, 34, 133);
  
}

/* .four {
  grid-row: 10;
  grid-column: 2;
  background-color: rgb(187,28,203);
  padding: 25px;
}

.five {
  grid-row: 10;
  grid-column: 2;
  background-color: rgb(243,210,108);
  padding: 25px;
}

.six {
  grid-row: 10;
  grid-column: 2;
  background-color: rgb(219,87,211);
  padding: 25px;
} */



.seven {
  grid-row: 8;
  grid-column: 1/21;
  background-color: rgb(182, 108, 243);
  padding: 25px;
  border: 10px;
  border-style: ridge;
  border-color: rgb(133, 83, 175);
  display: flex;
  justify-content: center;
}

.eight {
  grid-row: 2;
  grid-column: 1;
  background-color: rgb(219,87,211);
  border: 10px;
  border-style: ridge;
  border-color: rgb(182, 72, 175);
  display: flex;
  justify-content: center ;
  align-items: center;
} 

.nine {
  grid-row: 2;
  grid-column: 2;
  background-color: rgb(219,87,211);
  border: 10px;
  border-style: ridge;
  border-color: rgb(182, 72, 175);
  display: flex;
  justify-content: center ;
  align-items: center;
} 

.ten {
  grid-row: 3;
  grid-column: 1;
  background-color: rgb(219,87,211);
  border: 10px;
  border-style: ridge;
  border-color: rgb(182, 72, 175);
  display: flex;
  justify-content: center ;
  align-items: center;
} 

.eleven {
  grid-row: 3;
  grid-column: 2;
  background-color: rgb(219,87,211);
  border: 10px;
  border-style: ridge;
  border-color: rgb(182, 72, 175);
  display: flex;
  justify-content: center ;
  align-items: center;
} 

.twelve {
  grid-row: 4;
  grid-column: 1;
  background-color: rgb(219,87,211);
  border: 10px;
  border-style: ridge;
  border-color: rgb(182, 72, 175);
  display: flex;
  justify-content: center ;
  align-items: center;
} 

.thirteen {
  grid-row: 4;
  grid-column: 2;
  background-color: rgb(219,87,211);
  border: 10px;
  border-style: ridge;
  border-color: rgb(182, 72, 175);
  display: flex;
  justify-content: center ;
  align-items: center;
} 

.fourteen {
  grid-row: 3;
  grid-column: 4/15;
  background-color: rgb(219,87,211);
  border: 10px;
  border-style: ridge;
  border-color: rgb(182, 72, 175);
  display: flex;
  justify-content: left ;
  align-items: center;
  position: relative; 
  z-index: 5;

}

.fifteen {
  grid-row: 4;
  grid-column: 4/15;
  background-color: rgb(219,87,211);
  border: 10px;
  border-style: ridge;
  border-color: rgb(182, 72, 175);
  display: flex;
  justify-content: left ;
  align-items: center;
  position: relative; 
  z-index: 5;

}

.title {
  font-size: xx-large;

}

.selected {
  background-color: rgb(71, 29, 69);
  border-color: rgb(71, 28, 68)
}

/* Container inside the pink row */
.discog-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 0px;
  background-color: #d857d3; 
  box-sizing: border-box;
  width: 100%;
  height: 70%;
}

.audio-player {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #fff;
  font-family: inherit;
}

.play-pause-btn {
  background-color: #cf50ca;
  color: #fff;
  border: 3px outset #f58ff2;
  box-shadow: 1px 1px 0px #631260;
  width: 38px;
  height: 38px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.play-pause-btn:active {
  border-style: inset;
}


/* Center timeline */
.seek-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.seek-section input[type="range"] {
  width: 100%;
  accent-color: #ffffff;
  cursor: pointer;
}

.time-display {
  font-size: 11px;
  font-family: monospace;
  color: #fce4fc;
}

/* Volume controls */
.volume-container {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: bold;
}

.volume-container input[type="range"] {
  width: 65px;
  accent-color: #fff;
  cursor: pointer;
}

/* Contact me form */

form {
    width: 400px;
    margin: auto;
    
}

input,
select,
textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    background-color: rgb(107, 31, 148);
}

input[type="submit"] {
    background-color: rgb(107, 31, 148);
    color: rgb(252, 250, 250);
    border: bevel rgb(131, 27, 186);
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: rgb(131, 27, 186);
}