*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

body{
  width:100vw;
  min-height:100vh;

  overflow-y:auto;
  overflow-x:hidden;

  font-family:Arial,sans-serif;

  background:#0f0f0f;

  display:flex;
  justify-content:center;
}

.app{
  width:100%;
  max-width:430px;
  min-height:100vh;

  background:#151515;

  display:flex;
  flex-direction:column;

  color:rgba(255, 255, 255, 0.237);
}

/* TOP */

.top-section{
  padding:20px;
}

.title-box{
  text-align:center;
  margin-bottom:20px;
}

.title-box h1{
  font-size:32px;
  margin-bottom:5px;
}

.title-box p{
  color:#9c9c9c6b;
  font-size:14px;
}

/* IMAGE */

.player-image{
  width:100%;
  height:240px;

  border-radius:30px;

  overflow:hidden;

  position:relative;

  margin-bottom:20px;
}

.player-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.overlay{
  position:absolute;
  inset:0;

  background:linear-gradient(
    to top,
    rgba(0,0,0,0.5),
    transparent
  );
}

/* CONTROLS */

.controls{
  display:flex;
  justify-content:center;
  gap:20px;

  margin-bottom:20px;
}

.controls button{
  width:75px;
  height:75px;

  border:none;
  border-radius:50%;

  background:#ffffff3c;
  color:#0b0b0b;

  font-size:25px;

  cursor:pointer;

  transition:0.2s;
}

.controls button:active{
  transform:scale(0.92);
}

/* BOX */

.box{
  background:#1f1f1f;

  border-radius:20px;

  padding:16px;

  margin-bottom:16px;
}

.label-row{
  display:flex;
  justify-content:space-between;

  margin-bottom:14px;

  font-size:14px;
}

#volume{
  width:100%;
}

#timerSelect{
  width:100%;

  height:50px;

  border:none;
  outline:none;

  border-radius:14px;

  background:#0b0b0b;

  color:rgba(255, 255, 255, 0.237);

  padding:0 15px;

  margin-bottom:12px;

  font-size:15px;
}

#startTimer{
  width:100%;
  height:50px;

  border:none;
  border-radius:14px;

  background:rgba(255, 255, 255, 0.265);
  color:black;

  font-size:15px;
  font-weight:bold;

  cursor:pointer;
}

#countdown{
  text-align:center;

  margin-top:12px;

  color:#9e9e9e;

  font-size:14px;
}

/* DARK */

.dark-box{
  display:flex;
  justify-content:space-between;
  align-items:center;

  background:#1f1f1f;

  border-radius:20px;

  padding:16px;
}

#darkToggle{
  width:50px;
  height:50px;

  border:none;
  border-radius:50%;

  background:rgba(255, 255, 255, 0.256);

  font-size:20px;

  cursor:pointer;
}

/* PLAYLIST */

.playlist-section{
  padding:0 20px 30px;
}

.playlist-title{
  font-size:22px;
  font-weight:bold;

  margin-bottom:15px;
}

.playlist{
  display:flex;
  flex-direction:column;

  gap:15px;

  padding-bottom:100px;
}

/* CARD */

.music-card{
  background:#1f1f1f;

  border-radius:22px;

  padding:12px;

  display:flex;
  align-items:center;

  gap:14px;

  cursor:pointer;

  transition:0.2s;
}

.music-card:active{
  transform:scale(0.98);
}

.music-card img{
  width:72px;
  height:72px;

  border-radius:18px;

  object-fit:cover;
}

.music-info{
  flex:1;
}

.music-info h3{
  font-size:16px;
  margin-bottom:5px;
}

.music-info p{
  color:#9a9a9a;
  font-size:13px;
}

/* CHECK */

.check{
  width:30px;
  height:30px;

  border-radius:10px;

  background:#2ecc71;

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:16px;

  opacity:0;

  transition:0.2s;
}

.music-card.active .check{
  opacity:1;
}

/* LIGHT MODE */

body.light{
  background:#f1f1f14b;
}

body.light .app{
  background:rgba(255, 255, 255, 0.221);
  color:black;
}

body.light .box,
body.light .dark-box,
body.light .music-card{
  background:#ececec29;
}

body.light #timerSelect{
  background:#dcdcdc3f;
  color:black;
}

body.light .music-info p,
body.light .title-box p,
body.light #countdown{
  color:#666;
}

body.light .controls button,
body.light #darkToggle,
body.light #startTimer{
  background:#111;
  color:rgba(255, 255, 255, 0.479);
}