@import url("https://fonts.googleapis.com/css?family=Montserrat");
body {
  font-family: "Montserrat", sans-serif;
}
body h1 {
  text-align: center;
  letter-spacing: 10px;
}
body .container {
  width: 550px;
  height: 400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
body .container .note {
  width: 60px;
  height: 300px;
  background: tomato;
  cursor: pointer;
  border-radius: 20px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: #643e02;
  font-size: 20px;
  font-weight: 900;
  user-select: none;
  z-index: 10;
  position: relative;
  border: 1px solid #643e02;
}
body .container .note:after {
  content: "|";
  width: 20px;
  height: 20px;
  background: #d58c3f;
  display: block;
  border-radius: 50%;
  color: #a0682e;
  position: absolute;
  box-shadow: 1px 1px #a0682e, 1px 1px #a0682e;
}
body .container .note:before {
  content: "|";
  width: 20px;
  height: 20px;
  background: #d58c3f;
  display: block;
  border-radius: 50%;
  color: #a0682e;
  position: absolute;
  box-shadow: 1px 1px #a0682e, 1px 1px #a0682e;
}
body .container .note:nth-child(1) {
  background: #7bb551;
}
body .container .note:nth-child(1):after {
  top: 10%;
}
body .container .note:nth-child(1):before {
  top: 82%;
}
body .container .note:nth-child(2) {
  background: #dc6f3e;
  height: 280px;
}
body .container .note:nth-child(2):after {
  top: 12%;
}
body .container .note:nth-child(2):before {
  top: 82%;
}
body .container .note:nth-child(3) {
  background: #f3e94a;
  height: 260px;
}
body .container .note:nth-child(3):after {
  top: 12%;
}
body .container .note:nth-child(3):before {
  top: 80%;
}
body .container .note:nth-child(4) {
  background: #196cb5;
  height: 240px;
}
body .container .note:nth-child(4):after {
  top: 14%;
}
body .container .note:nth-child(4):before {
  top: 78%;
}
body .container .note:nth-child(5) {
  background: #e7272a;
  height: 220px;
}
body .container .note:nth-child(5):after {
  top: 14%;
}
body .container .note:nth-child(5):before {
  top: 78%;
}
body .container .note:nth-child(6) {
  background: #fffffd;
  height: 200px;
}
body .container .note:nth-child(6):after {
  top: 16%;
}
body .container .note:nth-child(6):before {
  top: 76%;
}
body .container .note:nth-child(7) {
  background: #c31c64;
  height: 180px;
}
body .container .note:nth-child(7):after {
  top: 16%;
}
body .container .note:nth-child(7):before {
  top: 74%;
}
body .container .note:nth-child(8) {
  background: #37823e;
  height: 160px;
}
body .container .note:nth-child(8):after {
  top: 18%;
}
body .container .note:nth-child(8):before {
  top: 70%;
}
body .container:after {
  content: "";
  position: absolute;
  display: flex;
  top: 32%;
  left: 0px;
  width: 550px;
  height: 20px;
  -webkit-transform: translateY(-10px) rotate(8deg);
  background-color: #d58c3f;
  box-shadow: 1px 4px #a0682e, 1px 1px #a0682e;
}
body .container:before {
  content: "";
  position: absolute;
  display: flex;
  top: 66%;
  left: 0px;
  width: 550px;
  height: 20px;
  -webkit-transform: translatey(0px) rotate(-8deg);
  background-color: #d58c3f;
  box-shadow: 1px 4px #a0682e, 1px 1px #a0682e;
}
body .songs {
  text-align: center;
}
body .songs .button {
  padding: 20px;
  background: #e0e0e0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bolder;
  display: inline-block;
  transition: all 0.3s;
}
body .songs .button:hover {
  background: #95999e;
  color: white;
}