@font-face {
  font-family: PersonaUI;
  src: local('Arial Black');
}

:root {
  --volume-color:#e60012;
}

.player {
  transform: scale(.5);
  transform-origin: top left;
}

body {
  background:#fff;
  display:flex;
  justify-content:left;
  align-items:right;
  height:100vh;
  font-family:PersonaUI,sans-serif;
}

.player {
  width:760px;
  height:320px;
  padding:24px;
  box-sizing:border-box;
  color:white;
  position:relative;
}

/* DATE */
.date-box {
position:absolute;
  left:40px;
  top: 6px;
  background:white;
  border: 10px solid black;
  color:black;
  padding:8px 18px;
  font-size:20px;
  font-weight:900;
  transform:skew(12deg);
  width:330px;
}

/* CONTENT */
.content-layer {
  position:relative;
  margin-top:22px;
  height:210px;
}

/* ALBUM */
.album-box {
  position:absolute;
  left:8px;
  top:28px;
  transform:rotate(-10deg);
  width:180px;
  height:180px;
  z-index:7;

  background:white;
  padding:8px;
  box-sizing:border-box;

  box-shadow:0 0 0 8px black;
}

.album-box img {
  width:100%;
  height:100%;
  transform:rotate(-2deg);
  object-fit:cover;
  display:block;
}

/* ARTIST */
.artist-box {
  position:absolute;
  left:190px;
  top:31px;
  width:180px;
  height:50px;
  background:white;
  color:black;
  padding:10px;
  box-sizing:border-box;
  transform:skew(-11deg);
  transform:rotate(-5deg);
  z-index:5;
}

.artist {
  font-size:18px;
}

/* SONG */
.song-box {
  position:absolute;
  left:210px;
  top:75px;
  width:420px;
  height:80px;
  background:white;
  color:black;
  padding:20px;
  box-sizing:border-box;
  transform:skew(-11deg);
  transform:rotate(3deg);
  z-index:4;
}

.song {
  font-size:26px;
  font-weight:900;
  letter-spacing:-1px;
}

/* CONTROLS */
.controls {
  position:absolute;
  bottom:65px;
  left:180px;
  right:0;
  width:420px;
  height:50px;
  display:flex;
  justify-content:center;
  background:black;
  border: 5px solid black;
  gap:60px;
  transform:skew(-11deg);
  transform:rotate(4deg);
  z-index:3;
}

.btn {
  width:48px;
  height:48px;
  background:none;
  border:none;
  cursor:pointer;
}

.btn svg {
  width:100%;
  height:100%;
  fill:white;
}

.btn:active {
  transform:scale(.82);
}

#pauseIcon {
  display:none;
}

/* VOLUME */
.volume {
  position:absolute;
  left:177px;
  right:0;
  bottom:42px;
  width:420px;
  height:20px;
  background:black;
  border: 5px solid black;
  text-align:center;
  transform:skew(-11deg);
  transform:rotate(4deg);
  z-index:2;
}

/* BACKGROUND */
.background-box {
  position:relative;
  left:240px;
  top:-145px;
  width:400px;
  height:100px;
  background:black;
  color:black;
  box-sizing:border-box;
  text-align:center;
  transform:skew(-11deg);
  transform:rotate(4deg);
  z-index:1;
}


/* BACKGROUND */
.background2-box {
  position:relative;
  left:37px;
  top:-295px;
  width:354px;
  height:150px;
  background:black;
  color:black;
  border: 10px solid black;
  box-sizing:border-box;
  text-align:center;
  transform:rotate(-10deg);
  transform:skew(12deg);
  z-index:1;
}

input[type=range] {
  width:260px;
  accent-color:var(--volume-color);
}