body {
  background-color: #152634;;
  padding: 0;
  margin: 0;
}

@keyframes harlem {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
  }
  20% {
    transform: scale(1.03, 1);
    -webkit-transform: scale(1.03, 1);
    -moz-transform: scale(1.03, 1);
    -o-transform: scale(1.03, 1);
    -ms-transform: scale(1.03, 1);
  }
  40% {
    transform: scale(0.97, 1);
    -webkit-transform: scale(0.97, 1);
    -moz-transform: scale(0.97, 1);
    -o-transform: scale(0.97, 1);
    -ms-transform: scale(0.97, 1);
  }
  60% {
    transform: scale(1.01, 1);
    -webkit-transform: scale(1.01, 1);
    -moz-transform: scale(1.01, 1);
    -o-transform: scale(1.01, 1);
    -ms-transform: scale(1.01, 1);
  }
  80% {
    transform: scale(0.99, 1);
    -webkit-transform: scale(0.99, 1);
    -moz-transform: scale(0.99, 1);
    -o-transform: scale(0.99, 1);
    -ms-transform: scale(0.99, 1);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
  }
}

.header {
  display: inline-flex;
  margin: 0 0 40px 0;
}

input[type=checkbox] {
  visibility: hidden;
  margin: 0;
  padding: 0;
  z-index: 10;
}

label.main:before {
  position: absolute;
  top: 23px;
  right: 23px;
  background-image: url("../assets/img/icons/hamburger.svg");
  background-size: 2.3rem 2rem;
  background-repeat: no-repeat;
  content: "fes";
  color: transparent;
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease-in;
}

label.main:hover:before {
    background-image: url("../assets/img/icons/hamburger.svg");
}

.screen > #magicButton:checked ~ label.main:before {
  background-image: url("../assets/img/icons/hamburgerChecked.svg");
  transition: all 0.3s ease-in;
}



.coverImage {
  width: 100%;
  height: 366px;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0% 0%;
  transition: all 0.3s ease-in;
}

h5 {
  color: white;
  letter-spacing: 0.2rem;
  font-size: 1.3rem;
  margin-top: 1.9rem;
  margin-left: 3rem;
}

.songImage {
  background: url('../assets/img/covers/oneDayTest.pg') no-repeat;
  background-size: 20rem;
  width: 20rem;
  height: 20rem;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  right: 7rem;
  z-index: 3;
  transform-origin: 0% 0%;
  transition: all 0.3s ease-in;
}

.songtitle{
  padding-left: 2rem;
  padding-top: 1.8rem;
}

@media only screen and (max-width: 450px) {
  .screen > #magicButton:checked ~ .info h3 {
    opacity: 0;
  }

  .screen > #magicButton:checked ~ .info h4 {
    text-align: left;
    margin: 0 0 5px 0px;
    margin-top: 3.2rem;
    font-size: 16px;
    color: #111111;
    transition: all 0.3s ease-in;
  }
}

@media only screen and (max-width: 900px) and (min-width: 451px) {
  .screen > #magicButton:checked ~ .info h4 {
    text-align: left;
    margin: 0 0 5px 0px;
    margin-top: 1rem;
    font-size: 16px;
    color: #111111;
    transition: all 0.3s ease-in;
  }
}

@media only screen and (max-width: 900px) {
  .music__link {
    margin: 2rem;
  }

  .screen > #magicButton:checked ~ .info h3 {
    margin-top: 1rem;
  }

  .youtube-link {
    height: 80rem;
  }

  .screen {
    background-color: white;
    padding: 0;
    height: 80rem;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    overflow: hidden;
  }

.bodyPlayer {
    position: absolute;
    top: 366px;
    left: 0;
    margin: 0;
    padding: 0;
    height: 45rem;
    width: 100%;
    background: #192737;
    transition: all 0.3s ease-in;
  }

  .screen > #magicButton:checked ~ .player {
    bottom: 40px;
    left: 0;
    transform: scale(0.6, 0.6);
    transition: all 0.3s ease-in;
  }

  .screen > #magicButton:checked ~ .coverImage {
    transform: scale(0.251, 0.251);
    width: 366px;
    height: 366px;
    left: 23px;
    top: 80px;
    transition: all 0.3s ease-in;
    border-radius: 20px;
  }


.screen > #magicButton:checked ~ .bodyPlayer {
  height: 870px;
  left: 0;
  top: 200px;
  width: 100%;
  transition: all 0.3s ease-in;
}

.screen > #magicButton:checked ~ .list {
  top: 205px;
  left: 0;
  opacity: 1;
  visibility: visible;
  transform: scale(1, 1);
  transition: all 0.3s ease-in;
  width: 100%;
  margin-right: 1rem;
}

.screen > #magicButton:checked ~ .info {
  margin-left: 0rem;
  top: 82px;
  left: 106px;
  text-align: left;
  transition: all 0.3s ease-in;
  width: 80%;
}

.info {
    width: 100%;
    padding: 0 3rem;
    color: white;
    text-align: center;
    position: absolute;
    transform-origin: 50% 50%;
    top: 450px;
    transition: all 0.3s ease-in;
  }

  .player {
    background: none;
    text-align: center;
    color: #fff;
    font-size: 26px;
    line-height: 26px;
    height: 0px;
    position: absolute;
    bottom: 21rem;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
    transition: all 0.3s ease-in;
    border-spacing: 0;
  }

  .footer-player {
    background: none;
    color: #6d6d6d;
    font-size: 15px;
    line-height: 15px;
    /* width: 100%; */
    position: absolute;
    bottom: 35px;
    transform-origin: center;
    left: calc(50% - 9.7rem);
    z-index: 2;
    opacity: 0.4;
    transition: all 0.15s linear;
    transition: bottom 0.3s linear;
  }

  .cover-single {
    width: 100%;
    height: 39rem;
    object-fit: cover;
  }

.song{
  display: flex;
  margin-top: 1rem;
  width: 100%;
  justify-content: space-between;
  position: relative;
  margin-right: 2rem;
}

.music_subtitle {
  opacity: 0.4;
  font-size: 1.4rem;
  margin-top: 3rem;
  letter-spacing: 0.1rem;
  line-height: 2.6rem;
  font-weight: 300;
}

.length {
  display: none;
}

.nr {
  margin-left: -1rem;
}
}


@media only screen and (min-width: 901px) {

  .music_subtitle {
    opacity: 0.4;
    font-size: 1.4rem;
    margin-top: 4rem;
    letter-spacing: 0.1rem;
    line-height: 2.6rem;
    font-weight: 300;
}

.screen > #magicButton:checked ~ .info h4 {
  text-align: center;
  margin: 0 0 5px 0px;
  margin-top: 1rem;
  font-size: 16px;
  color: #111111;
  transition: all 0.3s ease-in;
}

  .song{
    display: flex;
    margin-top: 1rem;
    width: 52%;
    justify-content: space-between;
    position: relative;
    margin-right: 2rem;
  }

  .youtube-link {
    height: 70rem;
    background-position: center;
    object-fit: cover;
  }

  .screen {
    background-color: white;
    padding: 0;
    height: 70rem;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    overflow: hidden;
  }

    .coverImage {
        width: 20rem;
        height: 100vh;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: 0% 0%;
        transition: all 0.3s ease-in;
      }

      .player {
        background: none;
        text-align: center;
        color: #fff;
        font-size: 26px;
        line-height: 26px;
        height: 0px;
        position: absolute;
        bottom: 26rem;
        /* left: 78.5vw; */
        left: calc(50% + 20vw + 11rem);
        /* width: 30rem; */
        /* margin-left: -3.5rem; */
        transform: translate(-50%, 0);
        z-index: 10;
        transition: all 0.3s ease-in;
        border-spacing: 0;
      }

      .screen > #magicButton:checked ~ .info {
        top: 65rem;
        left: 16vw;
        text-align: center;
        transition: all 0.1s ease-in;
      }

      .cover-single {
        width: 50vw;
        height: 75rem;
        object-fit: cover;
      }

      .screen > #magicButton:checked ~ .player {
        bottom: 4rem;
        left: 50vw;
        transform: scale(0.6, 0.6);
        transition: all 0.3s ease-in;
      }

      .screen > #magicButton:checked ~ .coverImage {
        transform: scale(0.8, 0.8);
        width: 366rem;
        height: 366rem;
        left: 3%;
        top: 2%;
        right: 3%;
        bottom: 2%;
        transition: all 0.3s ease-in;
        margin: 2rem;
      }

      .bodyPlayer {
        position: absolute;
        top: 0;
        left: 50%;
        margin: 0;
        padding: 0;
        height: 70rem;
        width: 60%;
        background: #192737;
        transition: all 0.3s ease-in;
      }

      .screen > #magicButton:checked ~ .list {
        top: 8rem;
        left: 52vw;
        opacity: 1;
        visibility: visible;
        transform: scale(1, 1);
        transition: all 0.3s ease-in;
      }

      .screen > #magicButton:checked ~ .bodyPlayer {
        height: 70rem;
        left: 50%;
        width: 100%;
        transition: all 0.3s ease-in;
      }

      .info {
        color: white;
        text-align: center;
        position: absolute;
        bottom: 30rem;
        left: calc(50% + 20vw);
        width: 30rem;
        margin-left: -3.5rem;
        transition: all 0.3s ease-in;
      }

      .footer-player {
        background: none;
        color: #6d6d6d;
        font-size: 15px;
        line-height: 15px;
        height: 45px;
        width: 250px;
        position: absolute;
        bottom: 10px;
        right: -2rem;
        z-index: 2;
        opacity: 0.4;
        transition: all 0.15s linear;
        transition: bottom 0.3s linear;
      } 
}

.screen > #magicButton:checked ~ .songImage {
  opacity: 0;
  top: -60px; 
  transition: all 0.2s ease-in;
  border-radius: 20px;
}

.image-cover {
  border-radius: 50%;
  margin-bottom: 4rem;
  opacity: 1;
}

.screen > #magicButton:checked ~ .image-cover {
  opacity: 0;
  transform: scale(0,0);
}

.search:before {
  position: absolute;
  top: 23px;
  right: 23px;
  content: '\f002';
  color: #959595;
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease-in;
}

.search:hover:before {
  color: #bbb;
}

.list {
  border-spacing: 0px 2px;
  width: 90vw;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 52vw;
  transform-origin: 0% 0%;
  transform: scale(1, 0.1);
  transition: all 0.3s ease-in;
}

.list tr {
  transform-origin: 0% 50%;
  height: 50px;
  text-align: center;
  background: #1C354A;
  text-indent: 8px;
}

.list tr:hover {
  background: white;
  cursor: pointer;
}

.list tr:hover .title {
  color: black;
}

.list tr:hover h5 {
  color: black;
}

.title {
  width: 215px;
  text-align: left;
  text-indent: 15px;
  transition: all 0.11s ease-in;
  color: white;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  font-size: 1.6rem;
}

.list tr:hover .title {
  padding-left: 5px;
  width: 210px;
  transition: all 0.11s ease-in;
}

.screen > #magicButton:checked ~ table tr:nth-child(1) {
  opacity: 1;
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.185s;
}

.screen > #magicButton:checked ~ table tr:nth-child(2) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.2s;
}

.screen > #magicButton:checked ~ table tr:nth-child(3) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.215s;
}

.screen > #magicButton:checked ~ table tr:nth-child(4) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.23s;
}

.screen > #magicButton:checked ~ table tr:nth-child(5) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.245s;
}

.screen > #magicButton:checked ~ table tr:nth-child(6) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.26s;
}

.screen > #magicButton:checked ~ table tr:nth-child(7) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.275s;
}

.screen > #magicButton:checked ~ table tr:nth-child(8) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.29s;
}

.screen > #magicButton:checked ~ table tr:nth-child(9) {
  animation: harlem 0.3s linear forwards;
  animation-delay: 0.305s;
}

label.zmr:before {
    background-image: url("../assets/img/icons/heartEmpty.svg");
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    content: "fes";
    color: transparent;
  font-size: 15px;
  line-height: 15px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.15s linear;
}

td > #heart:checked ~ label.zmr:before {
  background-image: url("../assets/img/icons/heart.svg");
  background-size: 1.1rem 1.1rem;
  background-repeat: no-repeat;
  content: "fes";
  color: transparent;
  transition: all 0.15s linear;
}

td > #heart1:checked ~ label.zmr:before {
    background-image: url("../assets/img/icons/heart.svg");
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    content: "fes";
    color: transparent;
  transition: all 0.15s linear;
}

td > #heart2:checked ~ label.zmr:before {
    background-image: url("../assets/img/icons/heart.svg");
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    content: "fes";
    color: transparent;
  transition: all 0.15s linear;
}

td > #heart3:checked ~ label.zmr:before {
    background-image: url("../assets/img/icons/heart.svg");
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    content: "fes";
    color: transparent;
  transition: all 0.15s linear;
}

td > #heart4:checked ~ label.zmr:before {
    background-image: url("../assets/img/icons/heart.svg");
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    content: "fes";
  color: transparent;
  transition: all 0.15s linear;
}

td > #heart5:checked ~ label.zmr:before {
    background-image: url("../assets/img/icons/heart.svg");
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    content: "fes";
    color: transparent;
  transition: all 0.15s linear;
}

td > #heart6:checked ~ label.zmr:before {
    background-image: url("../assets/img/icons/heart.svg");
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    content: "fes";
    color: transparent;
  transition: all 0.15s linear;
}

td > #heart7:checked ~ label.zmr:before {
    background-image: url("../assets/img/icons/heart.svg");
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    content: "fes";
    color: transparent;
  transition: all 0.15s linear;
}

td > #heart8:checked ~ label.zmr:before {
    background-image: url("../assets/img/icons/heart.svg");
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    content: "fes";
    color: transparent;
  transition: all 0.15s linear;
}

.bar {
  background-size: 100%;
  width: 320px;
  height: 21px;
  position: absolute;
  top: 407px;
  left: 23px;
  transform-origin: 0% 0%;
  transition: all 0.3s ease-in;
}

.screen > #magicButton:checked ~ .bar {
  top: 119px;
  left: 126px;
  transform: scale(0.6875, 0.6875);
  transition: all 0.3s ease-in;
}

.screen > #magicButton:checked ~ .info h3 {
    color: #111111;
}

.player td {
  /* width: 72px; */
  justify-content: center;
  text-align: center;
  padding-left: 2rem;
}

.backward:before {
    background-image: url("../assets/img/icons/backward.svg");
    background-size: 2rem 2rem;
    background-repeat: no-repeat;
    content: "fes";
    color: transparent;
  cursor: pointer;
  transition: all 0.15s linear;
}

.play:before {
    background-image: url("../assets/img/icons/play.svg");
  background-size: 2rem 2rem;
  background-repeat: no-repeat;
  content: "fes";
  color: transparent;
  cursor: pointer;
  transition: all 0.15s linear;
}

.forward:before {
    background-image: url("../assets/img/icons/forward.svg");
    background-size: 2rem 2rem;
    background-repeat: no-repeat;
    content: "fes";
    color: transparent;
  cursor: pointer;
  transition: all 0.15s linear;
}

.backward:hover:before {
  color: transparent;
  transition: all 0.15s linear;
}

.play:hover:before {
  color: transparent;
  transition: all 0.15s linear;
}

.forward:hover:before {
  color: transparent;
  transition: all 0.15s linear;
}

td > #play:checked ~ label.play:before {
    background-image: url("../assets/img/icons/pause.svg");
    background-size: 2rem 2rem;
    background-repeat: no-repeat;
    content: "fes";
    color: transparent;
  transition: all 0.15s linear;
}

.shadow {
  background: 192737;
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: -12px;
  left: 0;
}

.love:before {
  content: "\f08a";
  cursor: pointer;
  transition: all 0.15s linear;
}

.shuffle:before {
  content: "\f074";
  cursor: pointer;
  transition: all 0.15s linear;
}

.repeat:before {
  content: "\f01e";
  cursor: pointer;
  transition: all 0.15s linear;
}

.options:before {
  content: "\f141";
  cursor: pointer;
  transition: all 0.15s linear;
}

.love:hover:before {
  color: #bbb;
  transition: all 0.15s linear;
}

.shuffle:hover:before {
  color: #bbb;
  transition: all 0.15s linear;
}

.repeat:hover:before {
  color: #bbb;
  transition: all 0.15s linear;
}

.options:hover:before {
  color: #bbb;
  transition: all 0.15s linear;
}

td > #love:checked ~ label.love:before {
  content: "\f004";
  color: #ff564c;
  transition: all 0.15s linear;
}

td > #shuffle:checked ~ label.shuffle:before {
  color: #ff564c;
  transition: all 0.15s linear;
}

td > #repeat:checked ~ label.repeat:before {
  color: #ff564c;
  transition: all 0.15s linear;
}

.screen > #magicButton:checked ~ .footer-player {
  bottom: -60px;
  transition: all 0.3s ease-in;
}

.current {
  position: absolute;
  right: 23px;
  bottom: -60px;
  transition: all 0.3s ease-in;
}

.screen > #magicButton:checked ~ .current {
  bottom: 17px;
  transition: all 0.3s ease-in;
}

audio {
  visibility: hidden;
  display: none;
}

.music_title {
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.2rem;
    letter-spacing: 0.3rem;
    line-height: 2.2rem;
}

.active-song > td > h6 {
  color: #FF3568;
}

.not-active-song {
}

.activeAudio {
  display: none;
}

.not-activeAudio {
  display: none;
}