@font-face {
  font-family: "Vanessa";
  src: url("/assets/VanessaRegular-VKVw.ttf") format("truetype");
 }
 
 .band-name {
  font-family: "Vanessa";
  font-size: 6rem;
 }
 /* Using flex with the column direction to
   align items in a vertical direction */
 .player {
   /*height: 95vh;*/
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   max-width: 512px;
   margin-left: auto;
   margin-right: auto;
 }

 .details {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
 }

 .track-art {
   margin-top: 25px;
   height: 250px;
   width: 250px;
   background-image: URL("/assets/music/nr-logo.png");
   background-size: cover;
   background-position: center;
   /*border-radius: 15%;*/
 }

 /* Changing the font sizes to suitable ones */
 .now-playing {
   font-size: 1rem;
 }

 .track-name {
   font-size: 2rem;
   text-align: center;
   color: lightblue;
   padding-top: 25px;
 }

 .track-artist {
   font-size: 1.5rem;
 }

 .copyright {
  font-size: 1rem;
 }

 /* Using flex with the row direction to
     align items in a horizontal direction */
 .buttons {
   display: flex;
   flex-direction: row;
   align-items: center;
 }

 .playpause-track,
 .prev-track,
 .next-track {
   padding: 25px;
   opacity: 0.8;

   /* Smoothly transition the opacity */
   transition: opacity .2s;
 }

 /* Change the opacity when mouse is hovered */
 .playpause-track:hover,
 .prev-track:hover,
 .next-track:hover {
   opacity: 1.0;
 }

 /* Define the slider width so that it scales properly */
 .slider_container {
   width: 75%;
   max-width: 400px;
   min-width: 300px;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 /* Modify the appearance of the slider */
 .seek_slider,
 .volume_slider {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   /*height: 5px;*/
   background: black;
   opacity: 0.7;
   -webkit-transition: .2s;
   transition: opacity .2s;

   height: 1px;
   border-style: dashed;
   border-width: 1px;
   border-color: white;
 }

 /* Modify the appearance of the slider thumb */
 .seek_slider::-webkit-slider-thumb,
 .volume_slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   width: 15px;
   height: 15px;
   background: var(--color-primary);
   cursor: pointer;
   border-radius: 50%;
 }

 /* Change the opacity when mouse is hovered */
 .seek_slider:hover,
 .volume_slider:hover {
   opacity: 1.0;
 }

 .seek_slider {
   width: 60%;
 }

 .volume_slider {
   width: 30%;
 }

 .current-time,
 .total-duration {
   padding: 10px;
 }

 i.fa-volume-down,
 i.fa-volume-up {
   padding: 10px;
 }

 /* Change the mouse cursor to a pointer
     when hovered over */
 i.fa-play-circle,
 i.fa-pause-circle,
 i.fa-step-forward,
 i.fa-step-backward,
 i.fa-download {
   cursor: pointer;
 }

 .track-list {
  border-style: groove;
  border-width: 1px;
  border-color: var(--color-primary);
  overflow-y: scroll;
  min-height: 150px;
  background-color: none;
  width: 100%;
  min-width: 360px;
 }

 .track-list-elems {
  list-style-type: none;
  margin: auto;
  padding: 24px;
 }

 .track-list-elems > li {
  margin-bottom: 18px;
  border-bottom-color: var(--color-primary);
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  padding-bottom: 5px;
 }

.track-list-elems > li:last-child {
  margin-bottom: 0;
}

.track-list-elems li:hover {
  background-color: #093512;
}

 .track-list-elem-cover, .track-list-elem-info {
  display: inline-block;
  vertical-align: middle;
 }

 .track-list-elem-cover {
  margin-right: 9px;
  width: 39px;
  height: auto;
  /*border-radius: 100%;*/
 }

 .track-list-elem-info .track-list-elem-info-title {
  margin-bottom: 3px;
  font-size: 12px;
  color: gray;
 }

 .track-list-elem-info .track-list-elem-info-artist {
  font-size: 10px;
  color: lightgray;
 }