.home-section {
  margin-left: 260px;
  margin-bottom: 90px;
}

.greeting,
.made-for-you {
  font-weight: 800;
  font-size: 30px;
  color: white;
  margin-bottom: 15px;
}

.made-for-you {
  font-size: 20px;
  font-weight: 700;
}
.recent-playlists-container {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  margin-top: 15px;
  margin-right: 30px;
}

/* RECOMMENDATIONS 
\
\
*/
.recommendations-container {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  margin-top: 30px;
  margin-right: 30px;
}

.first-row,
.second-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.first-row {
  margin-top: 6px;
}

.recent-playlist {
  display: flex;
  position: relative;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  width: 325px;
  font-weight: 800;
  font-size: 14px;
  padding-right: 15px;
  background-color: rgba(200, 200, 200, 0.2);
  transition: 0.2s;
}

.recent-playlist:hover {
  background-color: rgba(200, 200, 200, 0.4);
}

.recent-playlist:hover .play-recent {
  opacity: 1;
}

.recent-playlist img {
  width: 85px;
  object-fit: cover;
  margin-right: 20px;
}

.recommendations {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.recommended-playlist {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 20px;
  border-radius: 5px;
  background-color: rgba(30, 30, 30, 0.7);
  transition: 0.1s;
}

.recommended-playlist:hover {
  background-color: rgba(30, 30, 30, 1);
}

.recommended-playlist p {
  font-size: 14px;
  text-align: left;
}

.playlist-name {
  font-weight: 700;
  padding-bottom: 10px;
}

.playlist-creator {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13;
}
.playlist-cover {
  padding-left: 15px;
  padding-right: 15px;
  overflow: hidden;
}

.playlist-cover img {
  width: 160px;
  object-fit: cover;
  border-radius: 5px;
}

.playlist-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 20px;
  padding-left: 15px;
}

.play-recent {
  display: flex;
  position: absolute;
  right: 0;
  opacity: 0;
  background-color: rgb(30, 215, 96);
  border-radius: 100%;
  padding: 12px 10px 12px 10px;
  vertical-align: center;
  margin-left: 20px;
  margin-right: 15px;
  box-shadow: -1px 13px 32px -2px rgba(0, 0, 0, 0.64);
  -webkit-box-shadow: -1px 13px 32px -2px rgba(0, 0, 0, 0.64);
  -moz-box-shadow: -1px 13px 32px -2px rgba(0, 0, 0, 0.64);
}

.play-recent img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

/* 
shadow for play button
box-shadow: -1px 13px 32px -2px rgba(0,0,0,0.64);
-webkit-box-shadow: -1px 13px 32px -2px rgba(0,0,0,0.64);
-moz-box-shadow: -1px 13px 32px -2px rgba(0,0,0,0.64); */