:root {
  --main-bg: #511723;
  --gold: #b28649;
}


html {
  height: 100%;
}

body {
  background-color: #000;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  scrollbar-color: transparent transparent;
}

img {
  max-width: 100%;
}

h1 {
  font-family: Winthorpe-Bold;
  margin: 0;
  margin-bottom: .25em;
  text-shadow: 2px 2px 0px var(--main-bg), 3px 3px 0px #a99050, -1px -1px 0px black;;
  color: #a99050;
}

h2 {
  margin: 0;
  font-family: "Libre Baskerville", serif;
  font-size: 1.25em;
  color: var(--gold);
  text-shadow: 2px 2px 0px rgb(0, 0, 0);
}

.border {
  pointer-events: none;
  user-select: none;
}

#hi {
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: column;
}

.main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 97%;
  margin-top: -4em;
}

.side1 {
  width: 25%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-right: 3em;
  margin-top: -4.5em;
}

.side2 {
  width: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-right: 3em;
  position: relative;
}

.side3 {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: -4.5em;
}

.box {
  background: var(--main-bg);
  font-family: Bell MT;
  font-size: 1.125em;
  color: #ffffff;
}

.box div p:first-of-type {
  margin-top: 0;
}

.rank {
  background-image: url('../img/fob/bg.png');
  background-size:contain;
  background-color: transparent;
  height: 700px;
  width: 508px;
  user-select: none;
}

.rank div {
  margin: auto;
  margin-top:5em;
  width: 70%;
  height: 510px;
  overflow: auto;
}

.rank ol {
  text-align: left;
  padding-inline-start: 20px;
  cursor: pointer;
}

.rank ol li {
  margin-bottom: 1em;
}

.rank ol li ul {
  padding-inline-start: 10px;
  list-style-type: "↳";
  transition: all .2s ease;
  height: 0px;
  overflow: hidden;
}

.rank ul li {
  padding-left:5px;
  margin-top: .25em;
  margin-bottom: 1em;
  transition: all .2s ease;
}

.show {
  height: 200px !important;
  overflow: auto !important;
}


.lore {
  padding-top: .5em;
  position: relative;
  margin: auto;
  margin-bottom: 3em;
  border: 1px dashed #937B51;
  padding-bottom: 5px;
  width: 95%;
}

.lore div {
  height: 300px;
  width: 95%;
  margin: auto;
  overflow: auto;
}

.live {
  position: relative;
  padding-top: .5em;
  border: 1px dashed #937B51;
  padding-bottom: 5px;
  margin: auto;
  width: 95%;
}

.live > .text {
  height: 450px;
  width: 95%;
  margin: auto;
  overflow: auto;
}

.text h2 {
  margin-top: 1em;
  margin-bottom: .75em;
}

.text p {
  margin: auto;
  margin-top: .75em !important;
  /* margin-bottom: 1.5em; */
  /* width: 95%; */

}

.yay {
  height: 50px;
  width: 75%;
  position: absolute;
  left: 9em;
  top: 6px;
  /* background: white; */
}

.songrank {
  margin-bottom: 1em;
}

li::marker {
  color: var(--gold);
}

.songrank ul {
  padding-inline-start: 5px;
  list-style-type: "↳";
}

.songrank ul li {
  padding-left:5px;
  margin-top: .25em;
  margin-bottom: 1em;
}


.band {
  width: 1194px;
  position: fixed; 
  bottom: 0;
  transition: all .2s ease;
  user-select: none;
}

.band:hover {
  opacity: 0;
}

.pics {
  margin-top: 1.5em;
  position: relative;
  height: 450px;
  width: 95%;
}

.pics img {
  border: 2px dotted white;
  /* transition: all .2s ease; */
}

.pics img:hover {
  z-index: 4 !important;
}

.container {
  position: relative;
  width: 65em;
  height: 65em;
  display: flex;
  align-items: center;
  justify-content: center;
}


.list li {
  padding-bottom: 4px;
}

.list a {
  text-decoration: none;
  color: #8d774e;
}

@font-face {
  font-family: Bell MT;
  src: url("../font/BELL.TTF");
}

@font-face {
  font-family: slimsansserif-bold;
  src: url("../font/slimsansserif-bold.ttf");
}

@font-face {
  font-family: Winthorpe-Bold;
  src: url("../font/Winthorpe Rg Bold.ttf");
}

@media screen and (max-width: 1920px) {

  .banner {
    width: 650px;
  }

  .main {
    width: 90%;
  }

  .side1 {
    width: 20%;
    margin-right: 4em;
    margin-top: -3.75em;
  }

  .pics {
    height: 300px;
  }

  .group1 {
    width: 220px;
    left: -2.5em !important;
    top: -.5em !important;
  }

  .group2 {
    width: 250px;
    bottom: 0em !important;
    right: 4em !important;
  }

  .peterick {
    width: 200px;
    right: -2.5em !important;
  }

  .side2 {
    width: 60%;
    margin-right: 4em;
  }

  .lore {
    margin-bottom: 2em;
  }

  .lore div {
    height: 230px;
  }

  .live > .text {
    height: 350px;
  }

  .side3 {
    width: 20%;
    margin-top: -3.75em;
  }

  .rank {
    height: 552px;
    width: 400px;
  }

  .patrick1 {
    width: 270px;
    bottom: 0em !important;
  }

  .patrick2 {
    width: 180px;
    right: 0 !important;
    top: 0 !important;
  }

  .patrick3 {
    width: 180px;
    bottom: initial !important;
    top: 0em;
    left: -1em !important;
  }

  .band {
    width: 750px;
  }

}