@charset "utf-8";

body {
    background-image: url("invertberries.png");
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: top;
    background-color: hsl(188, 20%, 3%);
}

/* @media screen and (min-width: 1000px) {
  div.container {
      
  }
}

@media screen and (max-width: 1000px) {
  div.container {
      
  }
} */

img.bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  object-fit: cover;
  display: inline;
  z-index: -4;
}

header {
  display: inline-block;
  position: fixed;
  z-index: 2;
  right: calc(12px + 0.36vw);
  top: -0.1vh;
}

p.name2{
  z-index: 2;
  font: 15px "Montserrat";
  font-size: calc(12px + 0.36vw);
  position: relative;
  display: inline;
  color: hsl(124, 73%, 98%);
}

p.name{
  z-index: 2;
  font: 25px "News Cycle";
  font-size: calc(25px + 0.36vw);
  position: relative;
  display: inline;
  color: hsl(124, 73%, 98%);
}


div.container {
  top: 5vh;
  width: 100%;
  height: 85vh;
 
  border-style: solid;
  border-width: 0px;
  border-color:hsl(120, 32%, 6%);
  display: flex; 
  flex-flow: column wrap;

  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  align-items: normal;
  align-content: center;
  object-fit: contain;

}

div.playlist {
  display: block;
  margin-top: 1vh;
  padding: 0.75vw;
  width: 66%;
  height: 300px;
  border-style: solid;
  border-radius: 1px;
  border-width: 1px;
  border-color:hsl(10, 32%, 56%);
  overflow-x: hidden;
  overflow-y: scroll;
  /* outline-style: solid;
  outline-width: 1px;
  outline-color:hsl(10, 32%, 86%); */

}


div.player_container {
  
  width: 60%;


  /* border-style: solid;
  border-radius: 1px;
  border-width: 1px;
  border-color:hsl(10, 32%, 56%); */
/* 
  outline-style: solid;
  outline-width: 1px;
  outline-color:hsl(10, 32%, 86%); */



}


#boop {
  border-left-color: hsl(10, 70%, 70%);
  border-left-width: 1.5vw;
  border-left-style: solid;
  outline-color:hsl(10, 90%, 70%);
  outline-width: 2px;
 
}

#boop2 {
  border-left-color: hsl(60, 70%, 70%);
  border-left-width: 1.5vw;
  border-left-style: solid;
  outline-color:hsl(60, 70%, 70%);
  outline-width: 2px;
}

#boop3 {
  border-left-width: 1.5vw;
  border-left-style: solid;
  border-left-color: hsl(160, 70%, 70%);
  outline-color:hsl(160, 70%, 70%);
  outline-width: 2px;
}

#boop4 {
  border-left-width: 1.5vw;
  border-left-style: solid;
  border-left-color: hsl(230, 70%, 70%);
  outline-color:hsl(230, 70%, 70%);
  outline-width: 2px;
}



#boop:hover, #boop:focus {
  border-color: hsl(10, 90%, 70%);
  outline-color:hsl(10, 90%, 70%);
}
#boop2:hover, #boop2:focus {
  border-color: hsl(60, 90%, 70%);
  outline-color: hsl(60, 90%, 70%);
}
#boop3:hover, #boop3:focus {
  border-color: hsl(160, 90%, 70%);
  outline-color: hsl(160, 90%, 70%);
}
#boop4:hover, #boop4:focus {
  border-color: hsl(230, 90%, 70%);
  outline-color: hsl(230, 90%, 70%);
}

::selection {
  color: hsl(20, 20%, 50%);
  background: hsl(20, 20%, 80%);
}

div.newtext1 {
  display: inline-block;
  font: 10px "Inconsolata";
  font-size: calc(12px + 0.56vw);
  padding-left: 4vw;
  position: relative;
  width: 82vw;
  color: hsl(180, 15%, 66%);
  outline: none;
}

p.playlist_entry {
  font: 10px "Inconsolata";
  display: inline;
  top: 0.1vh;
  font-size: calc(12px + 0.56vw);
  
  /* color: hsl(180, 15%, 66%); */

}
p.playlist_info {
  font: 10px "Inconsolata";
  display: inline;
  right: 200px;
  top: 0.1vh;
  font-size: calc(10px + 0.56vw);
  /* color: hsl(180, 15%, 66%); */

}

#filename {
  display: inline;
  font: 6px "Inconsolata";
  font-size: calc(6px + 0.56vw);
  margin-left: 4vw;
  position: relative;
  z-index: 2;
  left: 1vw;
  top: 2vh;
  width: 60vw;
  color: hsl(180, 15%, 66%);
  outline: none;
}

div.blop {
  font: 10px "Inconsolata";
  font-size: calc(14px + 0.45vw);

}

p.norbal {
  display: inline;
  position: relative;
  display: contents;
}

h1.newtext2 {
  display: block;
  position: relative;
  font: 10px "News Cycle";
  font-size: calc(16px + 0.45vw);
  padding-left: 6vw;
  top: -0.4vh;
  color: hsl(180, 15%, 86%);
  cursor: pointer;
  outline: none;
}

div.item1 {
  min-height: 10px;
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color:hsl(180, 12%, 6%);
  flex-grow: 10;
  flex-basis: 0;
  flex-shrink: 1;
  width: 100%;
  


}

@supports (-moz-appearance:none) {
  div.item1 {
    width: 98%;
  } 
  #boop {
    scrollbar-width: thin;
    scrollbar-color: hsl(10, 90%, 70%) hsl(180, 12%, 12%);
  }
  #boop2 {
    scrollbar-width: thin;
    scrollbar-color: hsl(60, 90%, 70%) hsl(180, 12%, 12%);
  }
  #boop3 {
    scrollbar-width: thin;
    scrollbar-color: hsl(160, 90%, 70%) hsl(180, 12%, 12%);
  }
  #boop4 {
    scrollbar-width: thin;
    scrollbar-color: hsl(230, 90%, 70%) hsl(180, 12%, 12%);
  }
  .playlist {
    scrollbar-width: thin;
    scrollbar-color: hsl(230, 90%, 70%) hsl(180, 12%, 12%);
  }
}


#boop::-webkit-scrollbar {
  width: 1.66vw;
}
#boop::-webkit-scrollbar-track {
  background: hsl(180, 12%, 12%);
}
#boop::-webkit-scrollbar-thumb {
  background: hsl(10, 90%, 70%);
}
#boop::-webkit-scrollbar-thumb:hover {
  background: hsl(10, 90%, 80%);
}

.playlist::-webkit-scrollbar {
  width: 1.66vw;
}
.playlist::-webkit-scrollbar-track {
  background: hsl(180, 12%, 12%);
}
.playlist::-webkit-scrollbar-thumb {
  background: hsl(10, 90%, 70%);
}
.playlist::-webkit-scrollbar-thumb:hover {
  background: hsl(10, 90%, 80%);
}







#boop2::-webkit-scrollbar {
  width: 1.66vw;
}
#boop2::-webkit-scrollbar-track {
  background: hsl(180, 12%, 12%);
}
#boop2::-webkit-scrollbar-thumb {
  background: hsl(60, 90%, 70%);
}
#boop2::-webkit-scrollbar-thumb:hover {
  background: hsl(60, 90%, 80%);
}


#boop3::-webkit-scrollbar {
  width: 1.66vw;
}
#boop3::-webkit-scrollbar-track {
  background: hsl(180, 12%, 12%);
}
#boop3::-webkit-scrollbar-thumb {
  background: hsl(160, 90%, 70%);
}
#boop3::-webkit-scrollbar-thumb:hover {
  background: hsl(160, 90%, 80%);
}

#boop4::-webkit-scrollbar {
  width: 1.66vw;
}
#boop4::-webkit-scrollbar-track {
  background: hsl(180, 12%, 12%);
}
#boop4::-webkit-scrollbar-thumb {
  background: hsl(230, 90%, 70%);
}
#boop4::-webkit-scrollbar-thumb:hover {
  background: hsl(230, 90%, 80%);
}

/* div.item1:focus-visible {
  border-color: hsl(10, 90%, 70%);
  border-style: solid;
  border-width: 5px;
} */

/* 
#boop:focus-within {
  border-color: hsl(10, 90%, 70%);
  border-style: solid;
  border-width: 1px;
} */




footer {
  position: static;
  display: block;
  bottom: 10px;
  left: 23vw;
  font: 12px "Lato";
  color: hsl(124, 33%, 20%);
}

a {
  display: inline;
  cursor: pointer;
  color: hsl(174, 43%, 40%);
  text-decoration: underline;
}

.underline {
  text-decoration: none;
}

a:visited {
  color: hsl(190, 43%, 37%);
}

a:active {
  color: hsl(188, 38%, 70%);
}

a:focus,
a:hover {
 
  color: hsl(111, 22%, 50%);
}