:root {
  --bg-color: #621560d9;
  --bg-color-hover: #9b479bcc;
  --bg-color-disabled: #423126;
  --bg-accent: #e08531;
  --bg-dialog-color: #6a2c03d9;
  --bg-dialog-color-hover: #a75f3196;
  /* --bg-color-disabled: #423126; */
  /* --bg-accent: #f9ba00;  */
}

body * {
  font-family: 'Volkhov', 'Material Icons', serif;
}

/* Menu */
.game-menu-bg-intro.base-label {
  background: 
              /* url(./ch/timmy.png),
              url(./ch/basher.png),
              url(./ch/beastr.png),
              url(./ch/villager.png), */
              /* linear-gradient(0deg, #6c166a, transparent 85% ), */
              linear-gradient(0deg, #6c166a, #000000cf 85% ),
              url(./bg/road.jpg);
  /* background: linear-gradient(271deg, #5a2504, transparent); */
  /* background-position: 0 335px, 0 265px, 0 135px, 0 385px, 0 0; */
  background-position: 0 0, -570px 0;
  background-repeat: no-repeat;
  font-size: 5rem;
  text-align: left;
  border-right: double 15px var(--bg-accent);
  padding: 50px 100px;
  color: var(--bg-accent);
  text-shadow: 10px 8px black;
  animation-name: intro;
  animation-duration: 50s;
  animation-iteration-count: infinite;
}

/* @keyframes intro {
   0% {background-position:  -600px  335px, -800px  265px, -1100px  135px, -700px  385px, 0 0;}
   10% {background-position: 1350px  335px, -800px  265px, -1100px  135px, -700px  385px, 0 0;}
   20% {background-position: 1350px -600px, -800px  265px, -1100px  135px, -700px  385px, 0 0;}
   30% {background-position: -600px -600px, 1350px  265px, -1100px  135px, -700px  385px, 0 0;}
   40% {background-position: -600px  335px, 1350px -600px, -1100px  135px, -700px  385px, 0 0;}
   50% {background-position: -600px  335px, -800px -600px,  1350px  135px, -700px  385px, 0 0;}
   60% {background-position: -600px  335px, -800px  265px,  1350px -600px, -700px  385px, 0 0;}
   70% {background-position: -600px  335px, -800px  265px, -1100px -600px, 1350px  385px, 0 0;}
   80% {background-position: -600px  335px, -800px  265px, -1100px  135px, 1350px -600px, 0 0;}
   90% {background-position: -600px  335px, -800px  265px, -1100px  135px, -700px -600px, 0 0;}
  100% {background-position: -600px  335px, -800px  265px, -1100px  135px, -700px  385px, 0 0;}
} */

.game-menu-bg.base-label {
  background: linear-gradient(0deg, #6c166a, transparent 85% );
  /* background: linear-gradient(271deg, #5a2504, transparent); */
  font-size: 5rem;
  text-align: left;
  border-right: double 15px var(--bg-accent);
  padding: 50px 100px;
  color: var(--bg-accent);
  text-shadow: 10px 8px black;
}

.game-menu-bg-secondary.base-label {
  background: linear-gradient(#3e1f09, #30170a);
}


.main-button.menu-button {
  font-size: 4rem;
  border: solid 4px var(--bg-accent);
}

/* Chapter Selection */

.main-button.chapter-button {
  text-align: left;
    font-size: 3.5rem;
    padding-left: 180px;
    padding-top: 30px;
    border: solid 4px var(--bg-accent);
}
.main-button.chapter-button.complete::after {
  content: "\e838";
  position: absolute;
  right: 20px;
  bottom: 25px;
  color: var(--bg-accent);
}

.main-button.chapter-button.complete {
  background: linear-gradient(255deg, var(--bg-color) 10%, var(--bg-dialog-color));
}

.main-button.chapter-button.complete:hover {
  background: linear-gradient(255deg, var(--bg-color-hover) 10%, var(--bg-dialog-color-hover));
}

/* Gallery */

.main-button.gallery-menu {
  border: 4px solid var(--bg-accent);
  text-align: right;
}
.main-button.gallery-menu.disabled {
  cursor: auto;
}

.chapter-button::before,
.main-button.gallery-menu::before {
  content: ' ';
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0
}
.main-button.gallery-menu.disabled::before {
  filter: brightness(0%);
}

.gallery-item {
  margin: 0;
  border: solid 4px var(--bg-accent);
  /* border-radius: 22px; */
}

.gallery-item.locked,
.gallery-item.locked:hover {
  border: solid 4px #000000;
}

.gallery-item:hover {
  border: solid 4px #ffffff;
}

/* Credits */
.credits-label {
  background: transparent;
  font-size: 1.5rem;
  text-align: center;
  white-space: pre-line;
  overflow-x: auto;
  pointer-events: auto;
}
.credits-header-label {
  white-space: pre-line;
  background: transparent;
  text-align: center;
}

/* Scrollbar */
body * {
  scrollbar-color: var(--bg-accent) #2a1504;
}
::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background: #2a1504;
}
::-webkit-scrollbar-thumb {
  background: var(--bg-accent);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bg-accent);
}

/* End Game */
.game-shield.end-game::after {
  content: "The End.";
  font-size: 5rem;
  position: absolute;
  height: 1080px;
  width: 1920px;
  background: linear-gradient(269deg, black, black, transparent);
  top: 0;
  left: 0;
  padding: 901px 1490px;
  text-shadow: 10px 7px black;
  color: var(--bg-accent);
}

/* UI */
.hud-header {
  background-color: var(--bg-dialog-color);
  border-bottom: double var(--bg-accent) 7px;
}

.base-button {
  background-color: var(--bg-color);
}

.base-button:hover {
  background-color: var(--bg-color-hover);
}

.base-button.disabled,
.base-button:hover.disabled {
  background-color: var(--bg-color-disabled);
}

.main-hud-button {
  background-color: var(--bg-dialog-color);
  font-size: 3rem;
}

.main-hud-button.main-menu {
  border: 4px solid var(--bg-accent);
  background-color: var(--bg-color);
  border-top: 0;
  border-right: 0;
  border-bottom-left-radius: 20px;
}

.button-description {
  font-size: 2rem;
  width: 310px;
  right: 10px;
  top: 80px;
  text-align: right;
}

.option-body {
  top: auto;
  bottom: 0;
  width: 100%;
  left: 0;
  background-color: var(--bg-dialog-color);
  border-top: double var(--bg-accent) 7px;
  max-height: 1005px;
}
.option-body::before {
  content: ' ';
  height: 411px;
  width: 468px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.option-body ul {
  padding: 0 0 0 450px;
  max-height: 1000px;
}

.option-body li {
  background-color: var(--bg-dialog-color);
  border: 2px solid var(--bg-accent);
  font-size: 2.5rem;
  text-align: left;
}
.option-body li:hover {
  background-color: var(--bg-dialog-color-hover);
}

.dialogue-box {
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--bg-dialog-color);
  border-top: double var(--bg-accent) 7px;
}

.dialogue-text {
  left: 480px;
  font-size: 2.5rem;
  width: 1370px;
}

.portrait-body {
  bottom: 0;
  left: 0;
}
.portrait-body .portrait-picture {
  height: 100%;
  width: 100%;
}
.portrait-name-body {
  font-size: 2.5rem;
}
/* .portrait-name-text {
  font-family: 'Inknut Antiqua', 'Volkhov', 'Material Icons', serif;
} */

.dialogue-layer.wait-for-click::after {
  font-size: 3rem;
  right: 10px;
  bottom: -5px;
  content: "\eb4c";
  animation-name: blink;
  animation-duration: .75s; /*2s;*/
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}
@keyframes blink {
  from {color: var(--bg-accent);}
  to {color: transparent;}
}

.narrator .dialogue-text {
  top: 29px;
  left: 30px;
  width: 1820px;
}

.timmy .portrait-body {
  height: 411px;
  width: 468px;
}
.timmy .portrait-name-body {
  bottom: 150px;
  left: 310px;
}

.gallant .portrait-body {
  height: 429;
  width: 467px;
}
.gallant .portrait-name-body {
  bottom: 150px;
  left: 360px;
}

.basher .portrait-body {
  height: 415px;
  width: 470px;
}
.basher .portrait-name-body {
  bottom: 150px;
  left: 310px;
}

.beastr .portrait-body {
  height: 416px;
  width: 420px;
}
.beastr .portrait-name-body {
  bottom: 150px;
  left: 360px;
}

.elder .portrait-body {
  height: 401;
  width: 448;
}
.elder .portrait-name-body {
  bottom: 150px;
  left: 350px;
}

.gary .portrait-body {
  height: 464px;
  width: 481px;
}
.gary .portrait-name-body {
  bottom: 150px;
  left: 310px;
}

.evilGuard .portrait-body {
  height: 520px;
  width: 452px;
}
.evilGuard .portrait-name-body {
  bottom: 150px;
  left: 310px;
}

.ravageor .portrait-body {
  height: 486px;
  width: 417px;
}
.ravageor .portrait-name-body {
  bottom: 150px;
  left: 310px;
}

.skitter .portrait-body {
  height: 450px;
  width: 469px;
}
.skitter .portrait-name-body {
  bottom: 150px;
  left: 370px;
}

.fx .dialogue-box {
  background: linear-gradient(351deg, transparent, #1c113cde, #0c0414, transparent);
  border: none;
  bottom: 0;
  height: 1005px;
  width: 1920px;
  left: 0;
}
.fx .dialogue-text {
  font-family: 'Carter One', cursive, sans-serif;
  font-size: 12rem;
  left: 0;
  top: 390px;
  text-align: center;
  width: 1920px;
  text-shadow: 10px 10px #000000cc;
  color: #e1ff3e;
  transform: rotate(354deg);
}