html, body, main {
  font-family: "Lexend", "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 1vw;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #303132;
  overscroll-behavior-x: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow:hidden;
    height: 90vh;
    margin-top: 2vh;
}
#carousel {
  position: relative;
  height: 55vh;
  width: 100%;
  padding-top:2em;
  -webkit-user-select: none;
 -khtml-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
     -o-user-select: none;
        user-select: none;
}
#carousel > div {
  position: absolute;
   transition: transform 300ms cubic-bezier(0.17, 0.99, 0.67, 0.97), left 300ms cubic-bezier(0.23, 0.87, 0.51, 1.05) , margin 300ms cubic-bezier(0.15, 0.88, 0.51, 1), z-index 0ms;
}
#carousel .selected.open > img {
    box-shadow: -0.5em 0 1em #0007, 0.5em 0 1em #0007;
}
#carousel > div > img {
  width: 30vw;
  transition: width 300ms cubic-bezier(0,.3,.25,.97), margin 300ms cubic-bezier(0,.3,.25,.97), z-index 300ms; 
   -webkit-user-drag: none;
   position: relative;
   z-index: 9999;
}
#carousel > div.selected > img {
   box-shadow: 1em 0px 1.5em #0007, -1em 0px 1.5em #0007;
   position: relative;
   z-index: 999;
}
#carousel div.hideLeft {
  left: -42vw;
  opacity: 0;
}
#carousel div.hideRight {
  left: 97vw;
  opacity: 0;
}

#carousel div.hideLeft .title, #carousel div.hideRight .title {
    display: none;
    font-size: 8px;
}

#carousel div.hideLeft img, #carousel div.hideRight img {
  width: 12vw;
  z-index: 1;
}
#carousel div.next-0 {
  z-index: 5;
  left: 68vw;
  width: 23vw;
  transform: translateY(50px) translateX(-50%) scale(1);
}
#carousel div.prev-0 {
  z-index: 5;
  left: 26vw;
  width: 23vw;
  transform: translateY(50px) translateX(-50%);
}
#carousel div.next-1 {
  z-index: 4;
  left: 77vw;
  width: 21vw;
  transform: translateY(6vh) translateX(-50%) scale(0.8);
}
#carousel div.prev-1 {
  z-index: 4;
  left: 12vw;
  width: 20vw;
  transform: translateY(6vh) translateX(-50%) scale(0.8);
}
#carousel div.next-2 {
  z-index: 3;
  left: 86vw;
  width: 20vw;
  transform: translateY(7vh) translateX(-50%) scale(0.7);
}
#carousel div.prev-2 {
  z-index: 3;
  left: 0vw;
  width: 18vw;
  transform: translateY(7vh) translateX(-50%) scale(0.7);
}

#carousel div.next-3 {
  z-index: 2;
  left: 87vw;
  width: 18vw;
  transform: translateY(9vh) translateX(-50%);
}
#carousel div.prev-3 {
  z-index: 2;
  left: 5vw;
  width: 15vw;
  transform: translateY(9vh) translateX(-50%);
}
#carousel div.next-0 img, #carousel div.prev-0 img {
  width: 23vw;
}
#carousel div.next-1 img, #carousel div.prev-1 img {
  width: 21vw;
}
#carousel div.next-2 img, #carousel div.prev-2 img {
  width: 20vw;
}
#carousel div.next-3 img, #carousel div.prev-3 img {
  width: 18vw;
}
#carousel div.selected {
  z-index: 10;
  left: 45vw;
  width: 30vw;
  transform: translateY(0px) translateX(-50%) scale(1.1);
  overflow: visible;
}
#carousel .title {
    font-family: "Lexend", "Helvetica Neue", sans-serif;
    font-weight: 400;
    font-size: 2vw;
    position: relative;
    text-align: right;
    color: #fff;
    text-shadow: 2px 2px 3px #0009, -1px -1px 1px #0009, 0px -1px 1px #0009, -1px 0px 1px #0009, 0px 1px 1px #0009, 1px 0px 1px #0009;
}

#carousel .next-0 .title, #carousel .prev-0 .title {
    font-size: 1.5vw;
    font-weight: 300;
    color: #fffc;
}

#carousel .next-1 .title, #carousel .prev-1 .title {
    font-size: 1.25vw;
    font-weight: 300;
    color: #fffa;
}

#carousel .next-2 .title, #carousel .prev-2 .title {
    font-size: 0.75vw;
    font-weight: 200;
    color: #fff9;
}

#carousel .next-3 .title, #carousel .prev-3 .title {
    font-size: 0.5vw;
    font-weight: 200;
    color: #fff6;
}
#carousel div.prev-0 div.title, #carousel div.prev-1 div.title, #carousel div.prev-2 div.title, #carousel div.prev-3 div.title {
    align-items: flex-start;
}
#carousel .album .title {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-content: flex-end;
    padding: .25em;
}
#carousel .selected .title {
    display: flex;
    width: 29vw;
    flex-direction: column;
    padding:.25em;
    align-items: flex-end;
    align-content: flex-end;
}
.buttons {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
}
.nav {
    height: 2em;
    width: 2.2em;
    top:40%;
    font-size: 50px;
    color:#000;
    position: relative;
    z-index: 999;
    background-color: #fff9;
    border: none;
    border-radius: 50%;
    box-shadow: -4px 0px 4px #0006;
}
#prevBtn {
    transform: rotate(180deg);
    display: inline-block;
}
#carousel .record {
    position: absolute;
    top:0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
}
#carousel .sleeve {
    position: absolute;
    top:5px;
    left:0px;
    height: 29.5vw;
    width: 0vw;
    background-image: url("img/sleeve.png");
    background-position: 0px 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: margin 500ms cubic-bezier(0,.3,.25,.97), width 500ms cubic-bezier(0,.3,.25,.97), z-index 100ms, transform 500ms cubic-bezier(0,.3,.25,.97);
    box-sizing: border-box;
}
.album {
    width: 25vw;
    position: relative;
    overflow: visible;
}
#carousel .selected.open .sleeve {
    margin-left: 20vw;
    width: 38vw;
}
#carousel .selected.open > img {
    margin-left: -10em;
}
#carousel .selected.open .title {
    margin-left: -7em;
}
.wiki {
    height: 21.5vw;
    font-size: 0.9vw;
    overflow-y: auto;
    overflow-x: hidden;
    width: 28vw;
    font-weight: 200;
}
.stats:before {
  display: block;
  height: 1vw;
  width: 30vw;
  text-align: center;
  content: "▾";
  position: absolute;
  bottom: 3.5vw;
}
.track-length {
    font-weight: 200;
    font-family: Lexend, "Helvetica Nueue", sans-serif;
    font-style: italic;
    font-size: .8em;
    color: #999;
}
#carousel .album .tracks {
    font-family: Lexend, "Helvetica Nueue", sans-serif;
    font-size: 0.8vw;
    font-weight: 300;
    display: none;
}
#carousel .selected.open .tracks {
    display: block;
}

h1, h2, h3, h4, h5 {
    margin:0;
    padding:0;
    font-family: Lexend, "Helvetica Nueue", sans-serif;
}
#carousel .sleeve h1,
#carousel .sleeve h2 {
    font-size: 1.5vw;
}
#carousel .tabinfo .sleeve .card-albums {
    position: absolute;
    left: 0px;
    display: none;
}
#carousel .tabinfo .sleeve .card-similar {
    position: absolute;
    left: 0px;
    display: none;
}
#carousel .tabinfo .sleeve .card-liner {
    position: absolute;
    left: 0px;
    display: none;
}
#carousel .tabalbums .sleeve .card-albums {
    position: absolute;
    left: 0px;
    height: 21vw;
    width: 26vw;
    overflow: scroll;
    display: flex;
    padding: 1em 1em 1em 0em;
    margin-left: 1em;
    border-top: 1px solid #333;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
}
#carousel .tabinfo .sleeve .card-info {
    position: absolute;
    left: 0px;
    height: 22vw;
    width: 28vw;
    overflow: hidden;
    display: flex;
    padding: 1em 1em 1em 0em;
    margin-left: 1vw;
    flex-direction: column;
    border-top: 1px solid #333;
}
#carousel .tabsimilar .sleeve .card-liner { display: none; }
#carousel .tabsimilar .sleeve .card-info { display: none; }
#carousel .tabsimilar .sleeve .card-albums { display: none; }
#carousel .tabsimilar .sleeve .card-similar {
    position: absolute;
    left: 0px;
    display: flex;
    padding: 0px 0px 1em 1em;
    border-top: 1px solid #333;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    overflow: scroll;
    width:28vw;
}
#carousel .tabtracks .sleeve .card-info { display: none; }
#carousel .tabtracks .sleeve .card-similar { display: none; }
#carousel .tabtracks .sleeve .card-albums { display: none; }
#carousel .tabtracks .sleeve .card-liner {
    position: absolute;
    left: 0px;
    display: block;
    padding: 0em 0px 1em 1em;
    border-top: 1px solid #333;
    width: 30vw;
}
#carousel .card-liner, #carousel .card-similar, #carousel .card-info, #carousel .card-albums {
    display: none;
    height:23vw;
    overflow:auto;
}
.tabbar {
  background-color: #0006;
  margin-right: 2em;
  padding: .5em 0.5em 0 0.5em;
  height:2em;
  overflow: hidden;
  display:flex;
  flex-direction: row;
  align-items: flex-end;
  width: 29.5vw;
  box-sizing: border-box;
}

.open .tabbar {
  width: 31.5vw;
}

#carousel .sleeve a.tab {
  padding: 0.25em 2em;
  background-color: #eaded299;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  text-decoration: none;
  top: 3px;
  position: relative;
  color: #000;
  cursor: pointer;
  border-left: #000c;
  border-left: 1px solid #000a;
}

#carousel .sleeve a.tabselected {
    background-color: #eaded2;
    top: 0px;
}

.card a div {
    width:100px;
    text-align:center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
form {
    color:#ddd;
    position: relative; 
    z-index: 99999;
    height: 10vh;
}
#carousel a, #carousel a:visited {
    text-decoration: none;
    color:#333;
}
#carousel .card {
    margin-bottom: 0.25em;
    margin-left: 1em;
    font-size: 0.8em;
}
#carousel .album.open .infohead {
    width: 29vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1vw;
    opacity:0.8;
}
#carousel .album .stats {
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
    border-top: 1px solid #0006;
    position: absolute;
    bottom: 1em;
    width: 26vw;
    font-size: .9em;
    padding-top: 4px;
    top: 27vw;
}
#carousel .debug {
    position: absolute;
    bottom:0px;
    right: 0px;
    font-size: 0.7em;
    color:#0009;
}
.infohead h1, .infohead h2 {
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
  font-family: "Rubik Dirt", "Lexend";
}

fieldset {
  box-shadow: 0px 0.5vh 0.5vh #0005;
}