/* #################################
start CSS with margin and padding to control every px in page
#################################### */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background-color: #000000;
}

a {
  text-decoration: none;
  color: white;
}

.page {
  width: 100%;
  height: 100%;
  background-color: #000000;
  color: white;
}

/* #################################
              header
#################################### */

.header {
  position: relative;
  width: 100%;
}

.mainLogo {
  padding-right: 285px;
  padding-left: 12.5px;
  a img {
    width: 64px;
  }
}

.houseLogo {
  position: absolute;
  background-color: #1f1f1f;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  top: 9.5px;
  left: 360px;

  a img {
    margin: 8.5px;
    width: 27.5px;
  }
}
.houseLogo:hover {
  scale: 1.04;
}

.searchBar {
  position: absolute;
  background-color: #1f1f1f;
  border-radius: 50px;
  top: 9.5px;
  left: 417.5px;
  width: 480px;
  height: 45px;
  transition: background-color 0.3s;
}

.searchBar:hover {
  background-color: #2a2a2a;
  border: 1px solid #404040;
  ul li img {
    transition: 20ms;
    opacity: 1;
  }
}

.searchBarItem {
  display: inline-block;
}
.searchIcon {
  position: absolute;

  top: 10px;
  left: 7.5px;
  a img {
    opacity: 0.6;
    width: 27.5px;
    transition: opacity 0.3s;
  }
}

.inputBar {
  position: absolute;
  top: 1.5px;
  left: 0;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
  cursor: text;
  border-radius: 25px;

  width: 470px;
  height: 45px;
  padding-left: 40px;

  font-size: 17px;
  color: white;
}
.inputBar::placeholder {
  color: white;
  opacity: 0.59;
}
.verticalSearchLine {
  position: absolute;
  box-shadow: 0 0 0 0.3px white;

  height: 25px;

  top: 9px;
  left: 415px;
}

.fileLogoSearchBar a img {
  position: absolute;
  top: 4.5px;
  left: 425px;
  width: 29px;
}

.signUpAndIn {
  position: absolute;
  top: 7.5px;
  left: 1060px;
}

.signUp,
.logIn {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  width: 100px;
  font-size: 15px;
  position: absolute;
  left: 1.5px;
  display: inline-block;
}
.signUp {
  margin-top: 13px;
  margin-left: 4.5px;
  opacity: 0.7;
}

.signUp:hover {
  opacity: 1;
  scale: 1.05;
  cursor: pointer;
}
.logIn {
  color: black;
  background-color: white;

  width: 105px;
  height: 47.5px;

  left: 87.5px;
  border-radius: 50px;
  padding-left: 30.5px;
  padding-top: 13px;
}

.logIn:hover {
  scale: 1.04;
  cursor: pointer;
}

/* #################################
   start the body of the page
#################################### */

.allContent {
  width: 100%;
}
.allContent div {
  display: inline-block;
}

/* #################################
   left Section
#################################### */

.leftSection {
  position: fixed;
  width: 27%;
  margin-left: 7.5px;
  height: 600px;
  background-color: #121212;
  border-radius: 10px;
  position: relative;
}
.librarySection div {
  display: inline-block;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.libraryLogo a {
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.libraryLogo:hover {
  opacity: 1;
}
.libraryLogo a img {
  margin-left: 5px;
  width: 55px;
}
.libraryLogo a span {
  position: absolute;
  top: 13.5px;
}

.plusLogo {
  position: absolute;
  top: 17.5px;
  right: 19.5px;
  font-size: 30px;
}
.plusLogo a {
  display: inline-block;

  opacity: 0.9;
  transition: opacity 0.3s;

  width: 25px;
  height: 25px;

  border-radius: 50px;
}
.plusLogo a span {
  position: absolute;
  bottom: 2px;
  left: 4px;
}

.plusLogo a:hover {
  opacity: 1;
  background-color: #404040;
}

.createProfileList {
  font-family: "Poppins", sans-serif;

  font-style: normal;

  position: absolute;
  left: 6.5px;
  top: 80px;
  border-radius: 10px;
  background-color: #1f1f1f;
  width: 328px;
  height: 135px;
}

.createProfileList .createTextHead {
  position: absolute;

  top: 15px;
  left: 17.5px;
}
.createProfileList .createTextHead h3 {
  font-size: 15px;
  font-weight: 600;
}

.createProfileList .createParagraph {
  font-size: 12px;
  font-weight: 400;

  position: absolute;
  top: 50px;
  left: 17.5px;
}

.buttonCreateList span {
  color: black;
  background-color: white;

  font-size: 12.5px;
  font-weight: 600;
  position: absolute;
  top: 87.5px;
  left: 25px;
  border-radius: 50px;
  width: 120px;
  height: 32.5px;
  padding-left: 12.5px;
  padding-top: 7px;
}

.buttonCreateList span:hover {
  scale: 1.03;
  opacity: 0.9;
}

.SearchForPodcast {
  font-family: "Poppins", sans-serif;

  font-style: normal;

  position: absolute;
  left: 6.5px;
  top: 240px;
  border-radius: 10px;
  background-color: #1f1f1f;
  width: 328px;
  height: 135px;
}

.SearchForPodcast .createTextHead {
  position: absolute;

  top: 15px;
  left: 17.5px;
}
.SearchForPodcast .createTextHead h3 {
  font-size: 15px;
  font-weight: 600;
}

.SearchForPodcast .createParagraph {
  font-size: 12px;
  font-weight: 400;

  position: absolute;
  top: 50px;
  left: 17.5px;
}

.buttonBrowse span {
  color: black;
  background-color: white;

  font-size: 12.5px;
  font-weight: 600;
  position: absolute;
  top: 87.5px;
  left: 25px;
  border-radius: 50px;
  width: 137.5px;
  height: 32.5px;
  padding-left: 12.5px;
  padding-top: 7px;
}

.buttonBrowse span:hover {
  scale: 1.03;
  opacity: 0.9;
}

.linksSection {
  position: absolute;
  top: 415px;
  left: 15px;
  width: 79%;
  height: 75px;
  color: white;

  font-size: 11.5px;
  font-family: "Poppins", sans-serif;

  font-style: normal;
}

.linksSection li {
  display: inline-block;
}
.linksSection ul li a {
  display: inline-block;
  padding-right: 20px;
  padding-bottom: 10px;
  opacity: 0.7;
}
.linksSection ul li .cookiesLink {
  opacity: 1;
}

.linksSection ul li .cookiesLink:hover {
  text-decoration: underline;
}

.languageButton {
  position: absolute;
  bottom: 8px;
  left: 25px;
  width: 90px;
  height: 33px;
  border: 1px solid rgba(255, 255, 255, 0.525);
  border-radius: 50px;
  transition: border 0.3s;
}

.languageButton:hover {
  border: 1px solid rgb(255, 255, 255);
  cursor: pointer;
  scale: 1.02;
}

.languageButton img {
  width: 25px;
  display: inline-block;
  padding-top: 5px;
  padding-left: 5px;
}

.languageButton span {
  position: absolute;
  top: 5px;
  font-family: "Poppins", sans-serif;

  font-style: normal;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
}

/* #################################
now we start with right section
#################################### */

.rightSection {
  width: 70.9%;
  margin-left: 7.5px;
  margin-right: 7.5px;
  height: 2000px;
  background-color: #121212;
  border-radius: 20px;
  position: absolute;
}

.spanHeader {
  position: absolute;
  top: 14px;
  left: 20px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 27px;
  z-index: 999;
}

.spanShowAll {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: smaller;
  position: absolute;
  right: 25px;
  top: 20px;
  opacity: 0.7;
}

.spanShowAll:hover {
  text-decoration: underline;
  cursor: pointer;
}
.artistProfiles li {
  float: left;
}

.borderBoxForSinger {
  width: 170px;
  height: 290px;
  margin-left: 5px;
  background-color: #121212;
  transition: background-color 0.3s;
  border-radius: 10px;
}
.borderBoxForSinger a {
  position: relative;
}

.artistProfiles li .playerIcon {
  position: absolute;

  width: 60px;
  border-radius: 50%;
  margin-top: 170px;
  margin-left: 105px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.borderBoxForSinger:hover .playerIcon {
  opacity: 1;
  transform: translateX(0) translateY(-30%);
}

.borderBoxForSinger:hover {
  background: linear-gradient(to bottom, #121212, #40404042);
}

.artistProfiles li img {
  width: 164px;
  border-radius: 50%;
  margin-top: 60px;
  margin-left: 6px;
  margin-right: 6px;
  display: block;
}
.artistProfiles li .artistName {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
  /* position: absolute; */
  margin-top: 5px;
  margin-left: 17px;
  display: block;
}

.artistProfiles li .artistOfAll {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-size: 13px;

  /* position: absolute; */
  /* top: 246px; */
  margin-top: 1px;
  margin-left: 17px;
  opacity: 0.7;
  display: block;
}

.spanHeaderAlbum {
  position: absolute;
  top: 300px;
  left: 20px;

  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 27px;
  z-index: 999;
}

.spanShowAllAlbum {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: smaller;
  position: absolute;
  right: 25px;
  top: 320px;
  opacity: 0.7;
}

.spanShowAllAlbum:hover {
  text-decoration: underline;
}

.popularAlbums li img {
  width: 164px;
  border-radius: 10px;
  margin-top: 60px;
  margin-left: 6px;
  margin-right: 6px;
  display: block;
}
.popularAlbums li .artistName {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
  margin-top: 5px;
  margin-left: 17px;
  display: block;
}

.popularAlbums li .artistOfAll {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-size: 13px;

  margin-top: 1px;
  margin-left: 17px;
  opacity: 0.7;
  display: block;
}

.borderBoxForAlbums {
  width: 174px;
  height: 300px;
  margin-left: 5px;
  background-color: #121212;
  transition: background-color 0.3s;
  border-radius: 10px;
}
.borderBoxForAlbums a {
  position: relative;
}

.borderBoxForAlbums:hover {
  background: linear-gradient(to bottom, #121212, #40404042);
}

.borderBoxForAlbums:hover .playerIcon {
  opacity: 1;
  transform: translateX(0) translateY(-30%);
}

.spanHeaderRadio {
  position: absolute;
  top: 600px;
  left: 20px;

  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 27px;
  z-index: 999;
}

.spanShowAllRadio {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: smaller;

  position: absolute;
  right: 25px;
  top: 620px;
  opacity: 0.7;
}

.spanShowAllRadio:hover {
  text-decoration: underline;
}

.spanHeaderFeatureCharts {
  position: absolute;
  top: 900px;
  left: 20px;

  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 27px;
  z-index: 999;
}

.spanShowAllFeatureCharts {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: smaller;

  position: absolute;
  right: 25px;
  top: 920px;
  opacity: 0.7;
}

.spanShowAllFeatureCharts:hover {
  text-decoration: underline;
}

.spanHeaderOurEdits {
  position: absolute;
  top: 1200px;
  left: 20px;

  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 27px;
  z-index: 999;
}

.spanShowAllOurEdits {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: smaller;

  position: absolute;
  right: 25px;
  top: 1220px;
  opacity: 0.7;
}

.spanShowAllOurEdits:hover {
  text-decoration: underline;
}

ul li {
  list-style-type: none;
  /* display: inline-block; */
}

.info {
  margin-top: 40px;
  position: relative;
}
.info ul {
  display: inline-block;
  vertical-align: top;
  margin-left: 55px;
}

.info ul li {
  padding-bottom: 12px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
}

.info .listHead span {
  font-weight: 600;
  opacity: 1;
}

.info .listLink a {
  opacity: 0.7;
}

.info .listLink a:hover {
  opacity: 1;
  text-decoration: underline;
}

.socialMediaSites {
  position: relative;
  left: 650px;
  bottom: 250px;
}
.socialMediaSites li {
  display: inline-block;

  width: 40px;
  height: 40px;
  padding: 10px;
  margin: 5px;
  border-radius: 50%;
  background-color: #2a2a2a;
}

.socialMediaSites img {
  width: 19px;
}

.socialMediaSites li:hover {
  background-color: #404040;
}

hr {
  margin-left: 45px;
  width: 90%;
  opacity: 0.1;
  box-shadow: 0 0 0 0.3px white;
}

.spotifyLabel {
  position: absolute;
  left: 45px;
  top: 380px;
  padding-bottom: 12px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-size: 13px;
  opacity: 0.7;
}

.spotifyLabel2 {
  position: absolute;
  left: 45px;
  top: 330px;
  padding-bottom: 12px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-size: 13px;
  opacity: 0.7;
  scale: 1;
  transition: scale 0.3s;
}
.spotifyLabel2:hover{
opacity: 1;
  scale: 1.1;
}
.divClear {
  clear: both;
}