body{
  text-align: center;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  font-size: 100%;
  background-image: url(./images/photo-1507838153414-b4b713384a76.jfif);
  background-repeat: no-repeat;
  background-blend-mode:soft-light;
  background-size:cover;
  background-color: #d4cfbf;
  margin-top: 5vw;
}

h2{
  display: none;
}
/* content section: */
  /* songs */
.song{
  position: relative;
  width: 300px;
  padding: 10px 40px;
  overflow: hidden;
  align-self: center;
    
}

.album-art{
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  margin-top: 2%;
  width: 100%;
  border: 2px solid rgba(84, 87, 87, 0.329);
  padding: 2px;
  align-items: center;
  size: 5px;
}

.duration{
    color: rgb(88, 2, 2);
}

.text{
  width:150% ;
  height: 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: space-evenly;
  animation: moving 4s infinite;
}
@keyframes moving {
    from {transform: translateX(-110%);}
    to {transform: translateX(100%);}
}


#songs{
  height: 280px;
  width: 300px;
  border:transparent;
  overflow:auto;
  position:relative;
  display: flex;
  flex-flow: row wrap;
  align-items:center;
  justify-content : space-around;
}

.overlay {
  position: absolute; 
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008bba00;
  overflow: hidden;
  width: 80%;
  height: 10%;
  transition: .5s ease;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.song:hover .overlay {
  bottom: 0;
  height: 100%;
}

.song-button{
  overflow: hidden;
  background-color: transparent;
  border: none;
  color: white;
  padding:  70px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.now-playing{
  background-color: rgba(61, 199, 199, 0.315);
}
/* /* playlists */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.playlist{
  background-color: rgba(245, 245, 220, 0.377);
  margin: 2%;
  padding: 1.5%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  border-radius: 10%;
  border-width: 2px;
  border-color: blue;
}
.side-el{
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.shuffle-button{
  opacity: 50%;
  background-color: transparent;
  border-color: transparent;
}

.hide {
  display: none;
}

.num-of-song:hover + .hide {
  display: block;
  color: rgba(6, 27, 117, 0.336);
}
  
/* add section-display */
.inputs{
  display: none;
}
.open{
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content : space-around;
}
.close{
  display: none;
}

#add-sec-headline:hover{
  color: rgb(96, 240, 240);
}

input{
  width: 150%;
  padding:5px;
  margin: 5px;
  border-radius:15px;
  border:0;
  box-shadow:4px 4px 10px rgba(0, 0, 0, 0.514);
  height:50px;
  background-color:rgba(255, 228, 196, 0.493);
  color: rgb(20, 2, 70);
  
}
input:hover {
    background-color: #634d4d2f;
}

::placeholder { 
    color: rgba(8, 0, 0, 0.562);
    font-weight: bold;
}

.add-section-buttons{
  padding:10px;
  border:none;
  background-color:#3f51b585;
  color:#fff;
  font-weight:600;
  border-radius:5px;
  width: 50%;
  align-items:center;
  margin-left: 25%;
  margin-bottom: 2px;
}

.add-section-buttons:hover{
  background-color:#3f51b5;
}

#add-sec-headline{
  display: block;
}