/*
  Colours
  Gray: #353537;
  White: #FFFFFF;

  TTRPG - BLUE

  Blue: #172C6B;
  Orange: #E98A15; (#EFAB57;)

  LANG - PURPLE
  Purple: #6C4694;
  Yellow: #F5B800; (#FFCC33)
*/


/*
  Fonts
  Headers - Cinzel Decorative (serif)
  Body - Raleway (sans-serif)
*/


/* BASE */

@font-face { font-family: Sonora; src: url('/resources/sonora/Sonora_Basic.woff2'); }

html {
  scroll-behavior: smooth;
  background: #FFFFFF;
}

* {
  color: #353537;
  margin: 0;
  font-family: 'Raleway', sans-serif;
  line-height: 1.3;
  font-size: 1em;
}
.white {
  color: #FFFFFF;
}

/* COMPONENTS */

h1 {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2.8em;
  text-align: center;
}

h2 {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2.2em;
}
  h1 .drop-cap, h2 .drop-cap {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.3em;
  }

h3 {
  margin: 10px 0 5px 0;
  font-family: 'Cardo', serif;
  font-size: 1.6em;
  font-weight: normal;
  border-bottom: 1px solid;
}
h4 {
  font-size: 1.3em;
  font-family: 'Cardo', serif;
  font-style: italic;
  margin: 10px 0 5px 0;
}

.sub-title {
  font-family: "Cardo", serif;
  font-style: italic;
  text-align: center;
  font-size: 1.2em;
  margin-bottom: -10px;
}

p {
  text-indent: 8px;
}
  .italic {
    font-style: italic;
  }

.small-caps {
  font-size: .8em;
}
sup {
  font-size: 0.6em;
}

a {
  color: #353537;
  text-decoration: underline;
}
  a:hover {
    color: #E98A15;
  }
  .main-title-link {
    text-decoration: none;
    display: block;
    width: 330px;
    margin: 0 auto;
  }
  .button {
    display: block;
    margin: 10px auto;
    padding: 10px;
    color: #FFFFFF;
    background: #353537;
    width: 200px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
  }
    .button:hover {
      color: #353537;
      background: #E98A15;
    }
  .button-dark {
    border: 3px solid #353537;
    color: #ffffff;
    background: #353537;
    padding: 7px;
  }
    .button-dark:hover {
      background: #353537;
    }
  .pointer {
    cursor: pointer;
  }
  .secret-link {
    color: inherit;
    text-decoration: none;
  }

.quote {
  text-align: center;
  font-family: "Cardo", sans-serif;
  font-style: italic;
  font-size: 1.15em;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 15px;
  text-indent: 0px;
}
  .centered {
    text-align: center;
  }

.spoiler-text {
  color: #000;
  background: #000;
  display: inline-block;
  padding: 0 15px;
}
  .spoiler-text:hover, .spoiler-text:focus, .spoiler-text:active {
    background: inherit;
    color: #000;
  }
  .spoiler-text-white {
    color: #000;
    background: #000;
    display: inline-block;
    padding: 0 15px;
  }
    .spoiler-text-white:hover, .spoiler-text:focus, .spoiler-text:active {
      background: inherit;
      color: #fff;
    }

.letter-list {
  list-style-type: lower-alpha;
}

.altered_wrap {
  display: inline;
  align-items: center;
}
  .altered_fan {
    width: 150px;
  }
  .altered_white {
    filter: invert(100%);
  }
.inline_social {
  width: 48px;
  display: inline;
  filter: brightness(0) saturate(100%) invert(18%) sepia(8%) saturate(189%) hue-rotate(201deg) brightness(90%) contrast(86%);
}
  .inline_social:hover {
    filter: brightness(0);
  }

.sonora {
  overflow: hidden;
  writing-mode: vertical-lr;
  font-family: "Sonora";
  font-size: 1.2em;
  height: 50vh;
  text-indent: 0px;
}
  .sonora-horizontal {
    font-family: "Sonora";
  }
  .sonora-scroll {
    overflow-x: scroll;
  }
  .sonora-center {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .sonora-short {
    height: 100px;
  }

ul {
  list-style-type: "-";
}
  li {
    padding-left: 5px;
  }

.votes {
  list-style-type: upper-alpha;
}

.pdf-viewer {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 70vh;
}

.image-link {
  border: 3px solid #353537;
}
  .image-link:hover {
    border: 3px solid #353537;
  }

audio {
  border-radius: 15px;
  width: 90%;
  display: block;
  margin: 0 auto;
}

.input-container {
  display: flex;
  flex-wrap: wrap;
}
  .input-text {
    min-width: 300px;
    flex: 1;
    margin: 0 20px 10px 20px;
  }
  .input-inner {
    margin: 0 10px 10px 20px;
    min-width: 120px;
  }
.lexicon-entry {
  margin-top: 10px;
}
.lexicon-hidden {
display: none;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 0 0;
}
  .stats-table th {
  }
  .stats-table td {
    text-align: center;
  }

.calendar {
  border-collapse: collapse;
  width: 100%;
}
  .calendar td {
    border: 1px solid #353537;
    height: 42px;
    vertical-align: top;
    padding: 2px 5px;
    width: 20%;
  }
    .calendar-spacer {
      border: 1px solid #FFFFFF !important;
    }

  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #353537;
  }
    .tooltip .tooltip-text {
      visibility: hidden;
      width: 140px;
      background-color: #353537;
      color: #FFFFFF;
      text-align: center;
      border-radius: 6px;
      padding: 5px 10px;
      position: absolute;
      z-index: 1;
      top: 150%;
      left: 50%;
      margin-left: -80px;
    }
    .tooltip .tooltip-text::after {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent #353537 transparent;
    }
  .tooltip:hover .tooltip-text, .tooltip:focus .tooltip-text, .tooltip:active .tooltip-text {
    visibility: visible;
  }

/* LAYOUT - HEADER */
header {
  text-align: center;
  width: 90%;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 3px solid #353537;
}

.title-anchor-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  margin: 0 auto;
  margin-top: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}
  .tal-item {
    flex: 10;
    max-width: 150px;
    min-width: 150px;
    padding: 0px;
  }
    .tal-link {
      text-decoration: none;
      font-weight: bold;
      display: inline-block;
      color: #353537;
    }
      .tal-link:hover {
        color: #353537;
      }
      .tal-link:after {
        display:block;
        content: '';
        border-bottom: solid 2px #353537;
        transform: scaleX(0);
        transition: transform 250ms ease-in-out;
        transform-origin:  100% 50%;
      }
      .tal-link:hover:after {
        transform: scaleX(1);
        transform-origin: 0% 50%;
      }
  .tal-divider {
    flex: 1;
    max-width: 10px;
    min-width: 10px;
  }

.sub-header {
  width: 65%;
  margin: 0 auto;
  margin-top: -25px;
  padding: 15px;
  text-align: center;
}

/* LAYOUT - FOOTER */
footer {
  width: 80%;
  margin: 10px auto;
  text-align: center;
  font-size: 0.8em;
}


/* LAYOUT - SET PIECES */

.main-contain {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 15px;
}

  .half-br {
    margin-top: 10px;
  }

.flex-container {
  margin: 0 auto;
  width: 90%;
}
  .flex-image {
    width: 100%;
    border: 4px solid #353537;
    border-radius: 15px;
  }
  .flex-v-center {
    align-items: center;
  }

.yt-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
  .yt-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

.sonora-ortho {
  width: 100%;
  max-width: 220px;
  display: block;
  margin: 0 auto;
}

.dark-back {
  background-color: #353537;
  border-radius: 15px;
  padding: 20px;
}

.hex-display {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 20px;
  background: rgb(32,70,90);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 48vw, #353537 10%, #353537 100%);
}
  .hex-img {
    width: calc(100% - 10px);
    border: 5px solid #353537;
    border-radius: 100%;
    margin: 0 auto;
    display: block;
    cursor: pointer;
  }
    .hex-img:hover {
      border: 3px solid #E98A15;
    }
  .hex-text {
    padding: 15px;
  }
    .hex-text h2, .hex-text p {
      color: #FFFFFF;
    }

.showcase-wrapper {
  display: flex;
  align-items: center;
  max-height: 350px;
  overflow: hidden;
}
  .showcase-img {
    min-width: 100%;
    min-height: 100%;
    text-align: center;
    object-fit: cover;
  }
  .showcase-text-wrap {
    background: #353537;
    align-items: center;
    display: flex;
    padding: 20px;
  }
    .showcase-text {
      margin: 20px;
      width: 100%;
    }

.card-container {
  width: 90%;
  margin: 0 auto;
}
  .card {
    border-left: 3px solid #353537;
    border-bottom: 3px solid #353537;
    border-radius: 15px;
    padding: 0px 15px 15px 15px;
    margin: 10px;
    margin-bottom: 20px;
  }
    .card img {
      max-width: 100%;
    }
  .card-img img {
    width: 100%;
  }

.mini-gallery-container {
  margin: 10px;
  text-align: center;
}
  .mini-gallery-container a {
    text-decoration: none;
  }
  .mini-gallery-img {
    max-height: 200px;
  }

.side-gallery {
  padding: 10px 20px 10px 20px;
}
  .side-gallery-img {
    height: 220px;
    width: 220px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 100%;
    border: 4px solid #353537;
    text-align: center;
    position: relative;
  }
    .side-gallery-small {
      height: 100px;
      width: 100px;
      margin-bottom: 0px;
    }
    .right-zag {
      margin-left: auto;
    }
    .side-gallery-img:hover {
      border: 4px solid #E98A15;
    }
  .side-gallery-landscape {
    position: absolute;
    right: -30px;
    max-height: 100%;
  }
  .side-gallery-portrait {
    position: absolute;
    left: 0;
    bottom: -30px;
    max-width: 100%;
  }

#card-display {
  top: 20px;
  position: -webkit-sticky;
  position: sticky;
}
.display-card {
  width: 300px;
}
  .mouse-over {
    cursor: default;
  }


.bubble-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
  .bubble {
    display: block;
    flex: 1;
    background-size: cover;
    max-width: 140px;
    min-width: 140px;
    min-height: 140px;
    max-height: 140px;
    border-radius: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 140px;
    border: 4px solid #353537;
    margin: 10px 10px 0 0;
  }
    .bubble span {
      background-color: rgba(0,0,0,0.6);
      color: #FFFFFF;
      width: 90%;
      border-radius: 15px;
      display: inline-block;
      vertical-align: middle;
      line-height: normal;
      padding: 3px;
    }
      .bubble:hover {
        border: 4px solid #E98A15;
      }
    .bubble-deities {
      background-image: url("/resources/images/tellura/deities-bubble.jpg");
    }
    .bubble-planes {
      background-image: url("/resources/images/tellura/planes-bubble.jpeg");
    }
    .bubble-calendar {
      background-image: url("/resources/images/tellura/calendar-bubble.jpg");
    }
    .bubble-timeless {
      background-image: url("/resources/images/tellura/deities/timeless.png");
    }
    .bubble-ancients {
      background-image: url("/resources/images/tellura/deities/ancients.png");
    }
    .bubble-elders {
      background-image: url("/resources/images/tellura/deities/elders.png");
    }
    .bubble-proteans {
      background-image: url("/resources/images/tellura/deities/proteans.png");
    }
    .bubble-peripheral {
      background-image: url("/resources/images/tellura/planes/peripheral.png");
    }
    .bubble-supernal {
      background-image: url("/resources/images/tellura/planes/supernal.png");
    }
    .bubble-primordial {
      background-image: url("/resources/images/tellura/planes/primordial.png");
    }
    .bubble-echo {
      background-image: url("/resources/images/tellura/planes/echo.png");
    }
    .bubble-material {
      background-image: url("/resources/images/tellura/planes/material.png");
    }
    .bubble-transitive {
      background-image: url("/resources/images/tellura/planes/transitive.png");
    }
    .bubble-asterian-avatars {
      background-image: url("/resources/images/haven/bestiary/asterian-avatar.png");
    }
    .bubble-aberrations {
      background-image: url("/resources/images/haven/bestiary/aberration.png");
    }
    .bubble-beasts {
      background-image: url("/resources/images/haven/bestiary/beast.png");
    }
    .bubble-celestials {
      background-image: url("/resources/images/haven/bestiary/celestial.png");
    }
    .bubble-constructs {
      background-image: url("/resources/images/haven/bestiary/construct.png");
    }
    .bubble-dragons {
      background-image: url("/resources/images/haven/bestiary/dragon.png");
    }
    .bubble-elementals {
      background-image: url("/resources/images/haven/bestiary/elemental.png");
    }
    .bubble-fey {
      background-image: url("/resources/images/haven/bestiary/fey.png");
    }
    .bubble-fiends {
      background-image: url("/resources/images/haven/bestiary/fiend.png");
    }
    .bubble-giants {
      background-image: url("/resources/images/haven/bestiary/giant.png");
    }
    .bubble-humanoids {
      background-image: url("/resources/images/haven/bestiary/humanoid.png");
    }
    .bubble-monstrosities {
      background-image: url("/resources/images/haven/bestiary/monstrosity.png");
    }
    .bubble-ooze {
      background-image: url("/resources/images/haven/bestiary/ooze.png");
    }
    .bubble-plants {
      background-image: url("/resources/images/haven/bestiary/plant.png");
    }
    .bubble-undead {
      background-image: url("/resources/images/haven/bestiary/undead.png");
    }
    .bubble-missions {
      background-image: url("/resources/images/haven/archive/missions.jpg");
    }
    .bubble-hunts {
      background-image: url("/resources/images/haven/archive/hunts.jpg");
    }
    .bubble-mines {
      background-image: url("/resources/images/haven/archive/mines.jpg");
    }
    .bubble-votes {
      background-image: url("/resources/images/haven/archive/votes.jpg");
    }
    .bubble-deliveries {
      background-image: url("/resources/images/haven/archive/deliveries.jpg");
    }
    .bubble-finbury {
      background-image: url("/resources/images/ancient_rift/finbury-bubble.png");
    }
    .bubble-angrath {
      background-image: url("/resources/images/ancient_rift/angrath-bubble.png");
    }
    .bubble-vesper {
      background-image: url("/resources/images/ancient_rift/vesper-bubble.png");
    }
    .bubble-vol1 {
      background-image: url("/resources/haven/chronicle/1-1.png");
    }
    .bubble-entree-1 {
      background-image: url("/resources/images/ystride/e1-1.png");
    }
    .bubble-entree-2 {
      background-image: url("/resources/images/ystride/e2-1.png");
    }
    .bubble-article-1 {
      background-image: url("/resources/images/sonora/article-1.png");
    }
    .bubble-north-wind {
      background-image: url("/resources/images/sonora/north-wind-and-sun.png");
    }
    .bubble-tower-of-babel {
      background-image: url("/resources/images/sonora/tower-of-babel.png");
    }
    .bubble-unit0-1 {
      background-image: url("/resources/images/sonora/lesson-images/0-1.png");
    }
    .bubble-unit0-2 {
      background-image: url("/resources/images/sonora/lesson-images/0-2.png");
    }
    .bubble-unit0-3 {
      background-image: url("/resources/images/sonora/lesson-images/0-3.png");
    }
    .bubble-unit0-4 {
      background-image: url("/resources/images/sonora/lesson-images/0-4.png");
    }
    .bubble-unit0-5 {
      background-image: url("/resources/images/sonora/lesson-images/0-5.png");
    }

    .bubble-mizzet {
      background-image: url("/resources/images/cards/gates.jpg");
    }
    .bubble-rats {
      background-image: url("/resources/images/cards/rats.jpg");
    }
    .bubble-knights {
      background-image: url("/resources/images/cards/knights.jpg");
    }
    .bubble-starfall {
      background-image: url("/resources/images/cards/starfall.jpg");
    }
    .bubble-vanilla {
      background-image: url("/resources/images/cards/vanilla.jpeg");
    }
    .bubble-azalea {
      background-image: url("/resources/images/cards/azalea.jpg");
    }
    .bubble-melody {
      background-image: url("/resources/images/cards/melody.jpg");
    }
    .bubble-dromai-pve {
      background-image: url("/resources/images/cards/dromai.jpg");
    }
    .bubble-atsadi {
      background-image: url("/resources/images/cards/atsadi.webp");
    }
    .bubble-bodyguards {
      background-image: url("/resources/images/cards/bodyguards.jpg");
    }
    .bubble-top-card {
      background-image: url("/resources/images/cards/top-card.jpg");
    }

    .bubble-ca-cards {
      background-image: url("/resources/images/codex-astronomica/cards-bubble.png");
    }
    .bubble-ca-rules {
      background-image: url("/resources/images/codex-astronomica/rules-bubble.png");
    }
    .bubble-ca-scenarios {
      background-image: url("/resources/images/codex-astronomica/scenarios-bubble.png");
    }

    .bubble-flood {
      background-image: url("/resources/images/altered-confluence/flood-bubble.jpg");
    }

.recording-player {
  width: 40px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.hide-me {
  display: none;
}

@media (min-width:801px) and (min-height:520px)  {

  header {
    width: 80%;
  }

  .main-contain {
    width: 80%;
    margin: 0 auto;
  }

  .flex-container {
    display: flex;
    width: 80%;
  }
    .flex-1 {
      flex: 1;
      margin: 10px;
    }
    .flex-2 {
      flex: 2;
      margin: 10px;
    }
    .flex-3 {
      flex: 3;
      margin: 10px;
    }
    .flex-4 {
      flex: 4;
      margin: 10px;
    }
    .flex-5 {
      flex: 5;
      margin: 10px;
    }

  .card-container {
    width: calc(80% - 60px);
    display: grid;
    justify-content: left;
    gap: 10px 40px;
  }
    .cc-4 {
      grid-template-columns: repeat(auto-fit, minmax(320px, max-content));
    }
    .card-4 {
      width: 640px;
      max-width: 100%;
      margin: 0;
    }
    .cc-6 {
      grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
    }
    .card-6 {
      width: 400px;
      max-width: 100%;
      margin: 0;
    }

  .hex-container {
    width: 80%;
    margin: 0 auto;
  }
  .hex-display {
    display: flex;
    align-items: center;
    width: 90%;
  }
    .hex-left {
      flex-direction: row;
      margin-right: 10.75%;
      background: rgb(32,70,90);
      background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12%, #353537 12%, #353537 100%);
    }
      .hex-right {
        flex-direction: row-reverse;
        margin-left: 10.75%;
        background: rgb(32,70,90);
        background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12%, #353537 12%, #353537 100%);
      }
    .hex {
      flex: 1;
    }
      .hex-img {
        margin: 0;
      }
    .hex-text {
      padding: 15px 0;
      flex: 3;
      margin: 0 15px 0 3%;
    }

  .showcase-wrapper {
    margin: 0;
  }
    .showcase-img {
      margin: 0;
    }
    .showcase-text-wrap {
      margin: 0;
    }
      .showcase-right {
        flex-direction: row-reverse;
      }

  .bubble-container {
    justify-content: flex-start;
  }

  .altered_wrap {
    display: flex;
    align-items: center;
  }

}


/* MAIN PAGE COLOUR HIJACKS */
.main-button-ttrpg {
  color: #172C6B;
  background: #EFAB57;
}
.main-button-ttrpg:hover {
  color: #172C6B;
  background: #E98A15;
}
  .main-hex-ttrpg {
    border: 5px solid #EFAB57;
  }
    .main-hex-ttrpg:hover {
      border: 5px solid #E98A15;
    }

  .hex-main-ttrpg {
    background: #172C6B;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 48vw, #172C6B 10%, #172C6B 100%);
  }
  @media (min-width:801px) and (min-height:520px)  {
    .hex-main-ttrpg-left {
      background: #172C6B;
      background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12%, #172C6B 12%, #172C6B 100%);
    }
    .hex-main-ttrpg-right {
      background: #172C6B;
      background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12%, #172C6B 12%, #172C6B 100%);
    }
  }

.main-button-lang {
  color: #6C4694;
  background: #FFCC33;
}
.main-button-lang:hover {
  color: #6C4694;
  background: #F5B800;
}
  .main-hex-lang {
    border: 5px solid #FFCC33;
  }
    .main-hex-lang:hover {
      border: 5px solid #F5B800;
    }

  .hex-main-lang {
    background: #6C4694;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 48vw, #6C4694 10%, #6C4694 100%);
  }
  @media (min-width:801px) and (min-height:520px)  {
    .hex-main-lang-left {
      background: #6C4694;
      background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12%, #6C4694 12%, #6C4694 100%);
    }
    .hex-main-lang-right {
      background: #6C4694;
      background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12%, #6C4694 12%, #6C4694 100%);
    }
  }

  .main-button-design {
    color: #770815;
    background: #f9cf67;
  }
  .main-button-design:hover {
    color: #770815;
    background: #f7ba1f;
  }
    .main-hex-design {
      border: 5px solid #f9cf67;
    }
      .main-hex-design:hover {
        border: 5px solid #f7ba1f;
      }

    .hex-main-design {
      background: #770815;
      background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 48vw, #770815 10%, #770815 100%);
    }
    @media (min-width:801px) and (min-height:520px)  {
      .hex-main-design-left {
        background: #770815;
        background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12%, #770815 12%, #770815 100%);
      }
      .hex-main-design-right {
        background: #770815;
        background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12%, #770815 12%, #770815 100%);
      }
    }

  /* MARKET STUFF */
  #items_table {
    margin: 0 auto;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
  }
    #items_table th, #items_table td{
      border: 1px solid #172C6B;
      padding: 5px 10px;
    }
    #items_table th {
      cursor: pointer;
    }

  input, select, button {
    font-size: 1em;
  }
  .flex-me {
    display: flex;
  }
  h3 {
    margin-bottom: 5px;
  }
  input[type=checkbox] {
    margin: 0 2px 0 0;
  }

    #search_input {
      display: block;
      margin: 0 auto;
      width: 460px;
    }
      #s_search_input, #e_search_input {
        width: 45%;
        margin-top: 8px;
        margin-right: 3%;
      }
    .mobile-flex {
      display: flex;
      margin: 0 auto;
      width: 468px;
    }
      #presets {
        flex: 6;
        margin: 5px 5px 0 0;
      }
      #full_reset {
        flex: 4;
        margin: 5px 0 0 5px;
      }

    .pc-flex {
      display: flex;
      flex-wrap: wrap;
    }
      .pc-flex div {
        margin: 5px 10px;
      }
        .pc-flex h3, .pc-flex p {
          text-align: center;
        }
      .professions-div {
        flex: 2;
        min-width: 58%;
      }
      .rarity-div {
        flex: 1;
        min-width: 28%;
      }
      .supply-div {
        flex: 1;
      }
      .demand-div {
        flex: 1;
      }
        .flex-labels {
          margin-top: 2px;
          display: flex;
          flex-wrap: wrap;
        }
          .flex-labels label {
            flex: 1;
            min-width: 160px;
            margin-top: 5px;
          }
        .flex-ratings {
          margin-top: 2px;
          align-items: center;
          display: flex;
          flex-wrap: wrap;
        }
          .flex-rating-1 {
            flex: 1;
            min-width: 140px;
            margin-top: 5px;
            text-align: center;
          }
            .flex-rating-1 input {
              margin: 7px 3px 0px 3px;
            }

  #show_all_professions, #show_all_rarity, #reset_supply, #reset_demand {
    display: block;
    min-width: 120px;
    margin: 10px auto;
  }

  .mobile-hide {
    display: none;
  }
    .options {
    display: block;
    width: 200px;
    max-width: 464px;
    margin: 10px auto;
    border: 2px solid #172C6B;
    background: #172C6B;
    color: #ffffff;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    }
      .options:hover {
        color: #172C6B;
        background-color: #E98A15;
      }

  /* MOON PHASE STUFF */
  .centered-input {
    width: 40%;
    display: block;
    margin: 10px 10%;
  }
  .moon_phase_table {
    width: 100%;
  }
    .moon_phase_table th, .moon_phase_table td {
      padding: 5px 0px;
    }
    .moon_phase_table th {
      width: 20%;
    }
      .moon_phase_table input, .moon_phase_table select {
        width: 30%;
      }


  @media (max-width:800px) {

    h1 {
      font-size: 46px;
    }

    .pc-flex {
      display: inline;
    }

    .table-container {
      width: 100% !important;
      overflow-x: scroll;
    }
      #items_table {
        min-width: 900px;
      }

    .mobile-flex {
      display: flex;
      width: 100%;
    }
    #search_input {
      width: 97%;
      margin: 0px 5px 10px 5px;
    }
      #s_search_input, #e_search_input {
        display: block;
        margin: 0 auto;
        width: 90%;
        margin-top: 8px;
      }
      #presets {
        flex: 6;
        margin: 0 5px;
      }
      #full_reset {
        flex: 4;
        margin: 0 5px;
      }
    #show_all_professions, #show_all_rarity, #reset_supply, #reset_demand {
      display: block;
      min-width: 120px;
      margin: 10px auto;
    }
      .flex-labels {
        margin-top: 2px;
        display: flex;
        flex-wrap: wrap;
      }
        .flex-labels label {
          flex: 1;
          min-width: 160px;
          margin-top: 5px;
        }
      .flex-ratings {
        margin-top: 2px;
        display: flex;
        flex-wrap: wrap;
      }
        .flex-rating-1 {
          flex: 1;
          min-width: 160px;
          margin-top: 5px;
          text-align: center;
        }
          .flex-rating-1 input {
            margin: 7px 3px 0px 3px;
          }

    /* MOON PHASE STUFF */
    .centered-input {
      width: 80%;
      display: block;
      margin: 10px auto;
    }
    .moon_phase_table {
      width: 100%;
    }
      .moon_phase_table th, .moon_phase_table td {
        padding: 5px 0px;
      }
      .moon_phase_table th {
        width: 20%;
      }
        .moon_phase_table input, .moon_phase_table select {
          width: 90%;
        }

  }