@font-face {
    font-family: "Onyx W01";
    src: url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.eot");
    src: url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.svg#Onyx W01")format("svg");
}
div {
  box-sizing: border-box;
}
ul {
  padding: 0;
  list-style-type: none;
}
h1 {
  font-size: 52px;
  margin: 5px 0;
}
body {
  background-color: white;
  color: black;
  font-family: 'Onyx W01';
  margin: 0;
  box-sizing: border-box;
  & .main {
    max-width: 1300px;
    min-width: 400px;
    background: #fff;
    margin: 0 auto;
    & #topbar {
      background: #fff;
      border-bottom: 1px solid #000;
      width: 100%;
      height: 200px;
      & #Logo {
        width: 75%;
        height: 100%;
        padding: 25px;
        border: solid #000;
        border-width: 0 1px;
        font-size: 50px;
        text-align: center;
        float: left;
        & span {
          display: inline-block;
          vertical-align: top;
          margin-top: 14px;
          &#MainLogo {
            font-size: 120px;
            font-weight: bold;
            margin: 0;
          }
        }
      }
      & .rightcol {
        background: #000;
        border: solid #000;
        border-left-color: #fff;
        border-width: 0 1px;
        color: #fff;
        font-size: 50px;
        width: 25%;
        height: 100%;
        padding: 12px;
        float: left;
        & span {
          display: inline-block;
          line-height: 88px;
        }
      }
    }
    & #content {
      font-size: 0;
      display: flex;
      & > * {
        float: left;
      }
      & .leftcol {
        display: inline-block;
        width: 20%;
        border: 1px solid #000;
        border-top: 0;
        & ul:not(:last-child) {
          border-bottom: 1px solid #000;
        }
        & ul {
          & .cover {
            color: #fff;
            text-shadow: 0 0 6px #000, 0 1px #000;
            text-align: right;
            font-size: 30px;
            padding: 3px 10px;
            border-bottom: 1px solid #000;
          }
          & li {
            height: 40px;
            width: 100%;
            padding: 8px 10px;
            font-size: 20px;
            color: #000;
            box-sizing: border-box;
            &.selected {
              width: calc(100% + 1px);
            }
          }
        }
        & #bleach, & #blackalbum {
          & .cover {
            background: url(https://ia802804.us.archive.org/8/items/11sifting_202001/71ThvtmT-FL._SL1417_.jpg?cnt=0) #000 no-repeat;
            background-position: 50% 50%;
            background-size: 100%;
            #blackalbum & {
              background-image: url('https://ia800808.us.archive.org/11/items/nirvana-2002/Nirvana%20(2002)/Cover%20Image.png');
              background-position: -64px 50%;
            }
          }
          & li {
            &:not(.cover):hover {
              background: #444;
              color: #fff;
            }
            &.selected {
              background: #000 !important;
              color: #fff;
              &:before {
                border-color: #000;
              }
            }
          } 
        }
        & #nevermind {
          & .cover {
            color: #fff;
            background: url(https://ia800508.us.archive.org/26/items/nirvana_nevermind/Nevermind%20%28FLAC%29/folder.jpg?cnt=0) no-repeat;
            background-position: 0 -29px;
            background-size: 100%;
          }
          & li {
            &:not(.cover):hover {
              background: #0299bd88;
            }
            &.selected {
              background: #0299bd !important;
              &:before {
                border-color: #0299bd;
              }
            }
          }
        }
        & #paramount {
          & .cover {
            background: url(https://upload.wikimedia.org/wikipedia/en/a/a0/Nirvana_Live_at_the_Paramount.jpg) no-repeat;
            background-position: 0 -68px;
            background-size: 100%;
            font-size: 0;
          }
          & li {
            &:not(.cover):hover {
              background: #0c828a88;
            }
            &.selected {
              background: #0c828a !important;
              &:before {
                border-color: #0c828a;
              }
            }
          }
        }
      }
      & #incesticide {
        & .cover {
          color: #000;
          background: url(https://ia800308.us.archive.org/23/items/nirvana-incesticide-1992_202307/Incesticide%20%281992%29/Cover%20Image.jpg?cnt=0) no-repeat;
          background-position: 0 -39px;
          background-size: 100%;
          text-shadow: 0 0 6px #fff, 0 1px #fff;
        }
        & li {
          &:not(.cover):hover {
            background: #dddd9388;
          }
          &.selected {
            background: #dddd93 !important;
            &:before {
              border-color: #dddd93;
            }
          }
        }
      }
      & #inutero {
        & .cover {
          color: #711f37;
          background: url(https://ia800507.us.archive.org/8/items/nirvana_in-utero/In-Utero-820x820.jpg?cnt=0) no-repeat;
          background-position: 0 -59px;
          background-size: 100%;
          text-shadow: 0 0 6px #fff, 0 1px #fff;
          text-align: right;
          font-size: 30px;
          padding: 3px 10px;
          border-bottom: 1px solid #000;
        }
        & li {
          &:nth-child(6) {
            font-size: 19px;
            line-height: 25px;
          }
          &:not(.cover):hover {
            background: #f7f0ba88;
          }
          &.selected {
            background: #f7f0ba !important;
            &:before {
              border-color: #f7f0ba;
            }
          }
        }
      }
      & li.selected {
        position: relative;
        border: solid #000;
        border-width: 1px 0;
        text-shadow: 0 1px 0px #fff7;
        box-shadow: inset 0 -1px #fff, inset 1px 1px #fff;
        width: calc(100% + 1px);
        &:nth-child(2) {
          border-top: 0;
        }
        &:last-child {
          border-bottom: 0;
        }
        &:before {
          content: "";
          border-right: 1px solid;
          right: -1px;
          height: calc(100% - 2px);
          top: 1px;
          position: absolute;
          display: block;
        }
      }
      & .centercol {
        display: inline-block;
        width: 60%;
        border-bottom: 1px solid #000;
        padding: 6px;
        box-shadow: inset 1px -1px #fff, inset -1px 1px #fff;
        &.nevermind {
          background: #0299bd;
        }
        &.paramount {
          background: #0c828a;
        }
        &.inutero {
          background: #f7f0ba;
        }
        &.bleach {
          background: #000;
        }
        &.incesticide {
          background: #dddd93;
        }
        & #textMain {
          border: 1px solid #000;
          background: #fff;
          width: calc(50% + 12px);
          padding: 12px;
          float: left;
          box-shadow: 1px 1px #fff, 1px -1px #fff, -1px -1px #fff, -1px 1px #fff;
          & #copybtn {
            width: 100%;
            margin: 10px 0 0;
            border: 1px solid #aaa;
            background: #0000;
            height: 30px;
            &:hover {
              background: #eee;
            }
          }
          & #menu {
            border-bottom: 1px solid #ccc;
            margin-bottom: 10px;
            padding-bottom: 10px;
            display: inline-block;
            float: left;
            width: 100%;
            & li {
              width: 50%;
              float: left;
              & span {
                font-size: 27px;
                margin-left: 10px;
              }
              & select {
                width: calc(100% - 20px);
                margin: 0 10px;
                height: 25px;
                border: 1px solid #aaa;
                border-radius: 3px;
                font-size: 11px;
              }
            }
          }
          & .spanmain {
            white-space: pre-line;
            font-family: 'Courier New';
            font-size: 18px;
          }
        }
        & #videoHub {
          width: calc(50% - 18px);
          display: block;
          float: right;
          & .video {
            border: 1px solid #000;
            background: #fff;
            padding: 0 6px 6px;
            margin-bottom: 6px;
            width: 100%;
            box-shadow: 1px 1px #fff, 1px -1px #fff, -1px -1px #fff, -1px 1px #fff;
            & h1 {
              margin: 17px 6px 6px;
            }
            & iframe {
               width: 100%;
               border: 1px solid #fff;
               box-shadow: 1px 1px #000, -1px 1px #000, -1px -1px #000, 1px -1px #000;
            }
          }
        }
      }
      & .rightcol {
        display: inline-block;
        width: 20%;
        padding: 6px;
        border: 1px solid #000;
        border-top: 0;
      }
    }
  }
}