style.css

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;700&display=swap');

html {
  box-sizing: border-box;
  user-select: none;
}

body {
  margin: 0;
  min-height: 100vh;
  background: rgb(84, 84, 129);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: League Spartan, sans-serif;
  font-size: 12px;
}

.signature {
  position: absolute;
  color: whitesmoke;
  font-size: 18px;
  left: 10vw;
  bottom: -40vh;
}

.signature a {
  margin-left: 4px;
  position: absolute;
  color: whitesmoke;
  font-size: 18px;
  text-decoration: none;
  font-style: italic;
}

.signature a:hover {
  color: #a4ff80;
}

.player-container {
  height: 600px;
  width: 290px;
  background: rgb(50 51 85);
  border-radius: 45px;
  border: 10px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  outline: 1px solid #A7A7A6;
  position: relative;
  ;
}

.hora {
  color: whitesmoke;
  font-size: 12.5px;
  position: absolute;
  z-index: 100;
  top: 13px;
  left: 30px;
}

.nav-icons {
  position: absolute;
  z-index: 100;
  top: 13px;
  right: 20px;
}

.nav-icons .fa-wifi,
.nav-icons .fa-battery-full {
  font-size: 11px;
  margin: 0 3px;
}

.option-icons .fa-angle-down {
  position: absolute;
  z-index: 100;
  top: 65px;
  color: whitesmoke;
  left: 20px;
  font-size: 30px;
}

.option-icons .fa-heart {
  position: absolute;
  z-index: 100;
  top: 70px;
  color: whitesmoke;
  right: 20px;
  font-size: 20px;
}

.camera {
  width: 85px;
  height: 24px;
  background: rgb(0, 0, 0);
  border-radius: 50px;
  font-size: 14px;
  user-select: none;
  color: black;
  margin-top: 7px;
}

.btn-1 {
  position: absolute;
  top: 95px;
  left: -14px;
  width: 3px;
  height: 26px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: radial-gradient(#ccc, #666, #222);
  z-index: 50;
}

.btn-2 {
  position: absolute;
  top: 135px;
  left: -14px;
  width: 3px;
  height: 46px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: radial-gradient(#ccc, #666, #222);
  z-index: 50;
}

.btn-3 {
  position: absolute;
  top: 190px;
  left: -14px;
  width: 3px;
  height: 46px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: radial-gradient(#ccc, #666, #222);
  z-index: 50;
}

.btn-right {
  position: absolute;
  top: 160px;
  right: -14px;
  width: 3px;
  height: 96px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: radial-gradient(#ccc, #666, #222);
  z-index: 50;
}

.img-container {
  height: 150px;
  width: 150px;
}

.img-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
}

h2 {
  text-align: center;
  margin: 0;
  color: whitesmoke;
}

h3 {
  font-size: 15px;
  text-align: center;
  font-weight: 400;
  color: whitesmoke;
}

/* Progress */
.progress-container {
  background: linear-gradient(rgb(51, 52, 91), rgb(169, 136, 82));
  cursor: pointer;
  height: 41px;
  width: 100%;

  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
  position: relative;
  overflow: hidden;
}

.progress {
  background: linear-gradient(rgb(51, 52, 91), rgb(229, 180, 69));
  /* border-radius: 5px; */
  height: 100%;
  width: 0%;
  transition: width 0.1s linear;

  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 0px;
  position: relative;
}

.duration-wrapper {
  position: relative;
  top: -25px;
  display: flex;
  justify-content: space-between;
  margin: 0 15px;
}

.duration-wrapper span {
  color: whitesmoke;
}

/* Controls */
.player-controls {
  background: rgb(65, 68, 136);
  border-radius: 135px;
  z-index: 50;
  height: 200px;
  width: 100px;
  position: relative;
}

.player-controls2 {
  background: rgb(65, 68, 136);
  border-radius: 135px;
  z-index: -10;
  height: 100px;
  width: 200px;

  position: relative;
  top: -150px;
  right: 50px;
}

.player-controls::before,
.player-controls::after,
.player-controls2::before,
.player-controls2::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: #323355;
}

.player-controls::after {
  bottom: 37px;
  right: 98px;
  box-shadow: 5px 5px 0 5px rgb(65, 68, 136);
  border-radius: 0 0 50px 0;
  rotate: -90deg;
}

.player-controls2::before {
  bottom: -14px;
  right: 37px;
  box-shadow: 5px 5px 0 5px rgb(65, 68, 136);
  border-radius: 0 0 50px 0;
  rotate: -180deg;
}

.player-controls::before {
  top: 36px;
  right: 98px;
  box-shadow: 5px 5px 0 5px rgb(65, 68, 136);
  border-radius: 0 0 50px 0;
}

.player-controls2::after {
  top: -14px;
  right: 37px;
  box-shadow: -5px 5px 0 5px rgb(65, 68, 136);
  border-radius: 0 0 0 50px;
}

.player-controls .fa-sliders-h {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  margin-top: 20px;
}

.player-controls .fa-redo-alt {
  font-size: 15px;
  margin-bottom: 20px;
  position: relative;
}

.fa-backward {
  position: relative;
  right: 30px;
  bottom: 70px;
}

.fa-forward {
  position: relative;
  left: 90px;
  bottom: 70px;
}

.btn-bg {
  margin-top: 15px;
  margin-bottom: 10px;
  background: linear-gradient(50deg, #a38031, #ffe869);
  box-shadow: inset 8px 5px 5px #a38031, inset -8px -5px 4px #cebc54;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fas {
  font-size: 20px;
  color: whitesmoke;
  cursor: pointer;
  user-select: none;

}

.fas:hover {
  filter: brightness(80%);
}

.fa-play {
  color: rgb(51, 52, 91);
  left: 5px;
}

.main-button {
  font-size: 40px;
  position: relative;
  color: rgb(51, 52, 91);
}

button {
  border: none;
  border-radius: 10px;
  width: 70px;
  color: whitesmoke;
  background: rgb(65, 68, 136);
}

.bg-container {
  position: relative;
}

.bg-container img {
  position: absolute;
  height: 604px;
  top: -302px;
  left: -480px;
  z-index: -1;
}

/* Media Query: iPhone (Vertical) */
@media screen and (max-width: 428px) {
  .player-container {
    width: 100vw;
    height: 100vh;
    border: none;
    outline: none;
    border-radius: 0;
  }

  .camera {
    display: none;
  }

  .img-container {
    margin: 80px !important;
    position: relative;
    left: -20px;
  }

  .img-container img {
    height: 200px;
    width: 200px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 15px;
    padding-bottom: 20px;
  }

  .player-controls {
    top: -10px;
    margin: 30px 0 !important;
  }

  .signature {
    display: none;
  }

  .progress-container {
    height: 20%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-top: 10%;
  }

  .progress {
    border-bottom-left-radius: 0;
  }

  .btn-1,
  .btn-2,
  .btn-3,
  .btn-right {
    display: none;
  }
}


/* heart animation */

.c-heart {
  position: absolute;
  height: 30px;
  width: 30px;
  top: 65px;
  right: 10px;
  z-index: 400;
}

#toggle-heart {
  display: none;
  z-index: 300;
}

#toggle-heart:checked+label {
  color: #e2264d;
  filter: none;
  will-change: font-size;
  -webkit-animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
  animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}


#toggle-heart:checked+label:before,
[id='toggle-heart']:checked+label:after {
  -webkit-animation: inherit;
  animation: inherit;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

#toggle-heart:checked+label:before {
  will-change: transform, border-width, border-color;
  -webkit-animation-name: bubble;
  animation-name: bubble;
}

#toggle-heart:checked+label:after {
  will-change: opacity, box-shadow;
  -webkit-animation-name: sparkles;
  animation-name: sparkles;
}

#toggle-heart:focus+label {
  text-shadow: 0 0 3px white, 0 1px 1px white, 0 -1px 1px white, 1px 0 1px white, -1px 0 1px white;
}

[for='toggle-heart'] {
  align-self: center;
  position: relative;
  color: #888;
  font-size: 2em;
  filter: grayscale(1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

[for='toggle-heart']:before,
[for='toggle-heart']:after {
  position: absolute;
  z-index: -1;
  top: 20%;
  left: 20%;
  border-radius: 50%;
  content: '';
}

[for='toggle-heart']:before {
  box-sizing: border-box;
  margin: -2.25rem;
  border: solid 2.25rem #e2264d;
  width: 4.5rem;
  height: 4.5rem;
  transform: scale(0);
}

[for='toggle-heart']:after {
  margin: -0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;
}

@-webkit-keyframes heart {

  0%,
  17.5% {
    font-size: 0;
  }
}

@keyframes heart {

  0%,
  17.5% {
    font-size: 0;
  }
}

@-webkit-keyframes bubble {
  15% {
    transform: scale(1);
    border-color: #cc8ef5;
    border-width: 2.25rem;
  }

  30%,
  100% {
    transform: scale(1);
    border-color: #cc8ef5;
    border-width: 0;
  }
}

@keyframes bubble {
  15% {
    transform: scale(1);
    border-color: #cc8ef5;
    border-width: 2.25rem;
  }

  30%,
  100% {
    transform: scale(1);
    border-color: #cc8ef5;
    border-width: 0;
  }
}

@-webkit-keyframes sparkles {

  0%,
  20% {
    opacity: 0;
  }

  25% {
    opacity: 1;
    box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
  }
}

@keyframes sparkles {

  0%,
  20% {
    opacity: 0;
  }

  25% {
    opacity: 1;
    box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
  }
}