button,
a,
input,
textarea,
select,
div {
  outline: none !important;
  box-shadow: none !important;
}

/* حالت فوکوس کیبورد و کلیک */
button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
input:focus,
input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* حذف افکت لمس موبایل */
* {
  -webkit-tap-highlight-color: transparent;
}



















audio {
  height: 45px;
}

audio::-webkit-media-controls-panel {
  -webkit-justify-content: center;
  height: 45px;
}

/* Removes the timeline */
audio::-webkit-media-controls-timeline {
  display: inline-block !important;
}

/* Removes the time stamp */
audio::-webkit-media-controls-current-time-display {
  display: none;
}
audio::-webkit-media-controls-time-remaining-display {
  display: none;
}



audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}


body{
  margin:0;
  font-family: 'Vazirmatn', sans-serif;
  background:#111;
  color:white;
}
audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}

audio::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}
.header{
 position: fixed;
  top:0;
  width:100%;
  height:50px;
  display: flex;
  align-items:center;
  padding: 0px 16px;
  justify-content:space-between;
  background:rgba(0,0,0,0.6);
  z-index:100;
  box-shadow:0 2px 6px rgba(0,0,0,0.5);
}

.header button{
  background:transparent;
  border:none;
  color:white;
  font-size:24px;
  cursor:pointer;
  display: flex;
}





















.artist-cover{
  position:relative;
  width:100%;
  height:50vh;
  overflow:hidden;
}

.artist-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}
@media only screen and (min-width: 600px) {
    .artist-cover{
      max-width: 500px;
      margin: 0 auto;
      background-color:#111;
    }
    .artist-cover img{
      max-width: 500px;
      border-radius: 50px;
    }
    .header{
      display: none;
    }
  body {
   width:90%; 
   margin: 0 auto; 
  }

  .content{
    max-width: 500px;
    margin: 0 auto;
  }
}


.artist-name{
  position:absolute;
  bottom:0;
  width:100%;
  padding:16px;
  background:linear-gradient(to top, rgba(5, 3, 3, 0.7), rgba(0, 0, 0, 0.822));
  font-size:28px;
  font-weight:bold;
  text-align:center;
  color:white;
  border-top-left-radius:100%;
  border-top-right-radius:100%;
}


@media only screen and (min-width: 600px) {
  .artist-name{
    place-content: center;
  }
}

.content{
  padding:25px;
}
.content h3{
    text-align: right;
}
.like-btn{
  background:#ff3b5c;
  border:none;
  padding:5px 5px;
  border-radius:12px;
  font-size:16px;
  color:white;
  cursor:pointer;
  transition:0.3s;
  margin-right: 33px;
}

.like-btn:hover{
  background:#d42b47;
}

#backbtn:hover{
    cursor: pointer;
}
.song-list{
  margin-top:20px;
  text-align:center;
  place-content: center;
}
.song-list span{
    display: flex;
    text-align: center;
    place-content: center;
    margin-bottom: 5px;
}
.song-list div{
  padding:12px;
  border-bottom:1px solid #333;
  cursor:pointer;
}

.song-list div:hover{
  background:#222;
}
a {
    color:inherit;
    text-decoration: none;
}

a:hover {
    color:inherit; 
    text-decoration:none; 
    cursor:pointer;  
}
@media (max-width:600px){
  .artist-name{ font-size:22px; padding:12px; }
}