@font-face {
    font-family: w95;
    src: url(w95fa.woff) format("woff");
}

.layout {
    width: 100%;

    display: grid;
    grid:

        "playlist showcase" 100%
        / 1fr 1fr;

}

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

    h1 {
        margin-bottom: 0;
    }

    img {
        float: left;
        aspect-ratio: 1 / 1;
        width: 15%;
        margin-right: 10px;
    }
}

.showcase {
    grid-area: showcase;
    display: flex;
    flex-direction: column;
    height: 100%;
}

html, body {
    background-color: hotpink;
    color: white;
    font-family: w95;
    height : 100%;
    margin: 0;
}

.track {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 5px;
    box-sizing: border-box;
    border: 5px solid white;
}

.track:hover {
    background-color: white;
    color: hotpink;
    cursor: pointer;
}

#container {
      overflow-x: hidden;
      height: 100vh;
      padding: 1rem;
      overflow-y: auto;
      box-sizing: border-box;
}

#container::-webkit-scrollbar {
      width: 16px;
      height: auto;
}

#container::-webkit-scrollbar-track {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
      image-rendering: pixelated;
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
}

#container::-webkit-scrollbar-track:active {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
}

#container::-webkit-scrollbar-thumb {
      border-top: 1px solid #ff3d98;
      border-left: 1px solid #ff3d98;
      border-right: 1px solid #f00070;
      border-bottom: 1px solid #f00070;
      box-shadow: inset 1px 1px 0 0 hotpink, inset -1px -1px 0 0 #ff0b7d;
      width: 16px;
      height: 16px;
      background-color: #ff3d98;
      z-index: 1;
}

#container::-webkit-scrollbar-corner {
      background-color: #cccccc;
}    

#container::-webkit-resizer {
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
      background-position: bottom right;
      background-repeat: no-repeat;
      image-rendering: pixelated;
}

#container::-webkit-scrollbar-button, #container.scroll::-webkit-scrollbar-button {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid #cccccc;
      border-bottom: 1px solid #cccccc;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      display: block;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      image-rendering: pixelated;
      background-repeat: no-repeat;
      background-position: center center;
}

#container::-webkit-scrollbar-button:active,
#container.scroll::-webkit-scrollbar-button:active {
      background-position: 2px 2px;
}

#container::-webkit-scrollbar-button:horizontal:decrement,
#container.scroll::-webkit-scrollbar-button:horizontal:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

#container::-webkit-scrollbar-button:horizontal:increment,
#container.scroll::-webkit-scrollbar-button:horizontal:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

#container::-webkit-scrollbar-button:vertical:decrement,
#container.scroll::-webkit-scrollbar-button:vertical:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

#container::-webkit-scrollbar-button:vertical:increment,
#container.scroll::-webkit-scrollbar-button:vertical:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

#container::-webkit-scrollbar-button:horizontal:increment:start,
#container.scroll::-webkit-scrollbar-button:horizontal:increment:start {
      display: none;
}

#container::-webkit-scrollbar-button:horizontal:decrement:end,
#container.scroll::-webkit-scrollbar-button:horizontal:decrement:end {
      display: none;
}

#container::-webkit-scrollbar-button:vertical:increment:start,
#container.scroll::-webkit-scrollbar-button:vertical:increment:start {
      display: none;
}

#container::-webkit-scrollbar-button:vertical:decrement:end,
#container.scroll::-webkit-scrollbar-button:vertical:decrement:end {
      display: none;
}

#container::-webkit-scrollbar-button:active,
#container.scroll::-webkit-scrollbar-button:active {
      border-top: 1px solid #868a8e;
      border-left: 1px solid #868a8e;
      border-bottom: 1px solid #868a8e;
      border-right: 1px solid #868a8e;
      box-shadow: none;
}

body {
      overflow: hidden;
}

#container::-webkit-scrollbar-track,
#container::-webkit-scrollbar-track:active,
#container::-webkit-scrollbar-track:hover {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
  background-color: transparent;
  filter: grayscale(100%);
}

h2 {
      text-align: center;
      font-size: 2rem;
      border: 5px solid white;
      padding: 0.5rem;
      margin-top: 0px;
      margin-bottom: 15px;
}

.playlist-wrapper {
  display: none;
}

.playlist-wrapper.active {
  display: block;
}

.playlist-tabs {
  display: flex;
  gap: 25px;
  cursor: pointer;

  img{
      width: 120px;
      aspect-ratio: 1 / 1;
  }
}

.tab {
  padding: 4px 10px;
  border: 2px solid white;
}

.tab.active {
  background: white;
  color: hotpink;
}