:root {
  --background-color: linear-gradient(45deg, rgb(13 47 74), rgb(0 126 255 / 14%));
  --background-color-tp: linear-gradient(45deg, rgb(50 59 66), rgb(0 126 255 / 14%));
  --background-color-dg: linear-gradient(45deg, rgb(13 47 74), rgb(0 126 255 / 14%));
  --credits-link: #6fffbd;
  --title-banner: linear-gradient(45deg, rgb(13 47 74), rgb(0 126 255 / 14%) 45%, transparent 60%);
  --background-hover: rgb(46 77 119);
  --border-shadow: rgb(0 9 21);
  --border-highlight: rgb(129 168 220);
  --text-color: rgb(236 247 236);
  --text-color-hover: #ffffff;
  --text-color-shadow: rgb(0 9 21);
  --text-dark-shadow: rgb(0 9 21);
  --text-drop-shadow: 4px 4px var(--text-color-shadow);
  --text-drop-shadow-name: 3px 3px var(--text-dark-shadow);
  --text-drop-shadow-dg: 5px 3px var(--text-color-shadow);
  --game-font: 'Girassol',  "Trebuchet MS", "Helvetica", "Arial", "Material Icons", "sans-serif";
  --text-font: 'Philosopher',  "Trebuchet MS", "Helvetica", "Arial", "Material Icons", "sans-serif";
}

.input-submit-button,
.option-body li,
.base-button {
  font-family: var(--game-font);
  line-height: 1;
  background: var(--background-color);
  border: 4px solid var(--border-shadow);
  border-top-color: var(--border-highlight);
  border-left-color: var(--border-highlight);
  color: var(--text-color);
  text-shadow: var(--text-drop-shadow);
  font-size: 3rem;
  border-radius: 45px;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  padding: 10px;
}

.main-hud-button {
  border-width: 3px;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  padding: 5px;
}

.language-button::before {
  content: "\e8e2";
  position: absolute;
  left: 15px;
  top: 16px;
}

.input-submit-button {
  height: 74px;
  margin-top: 20px;
}
.input-submit-button:hover,
.option-body li:hover,
.base-button:hover {
  background: var(--background-hover);
  color: var(--text-color-hover);
}

.base-button.locked,
.base-button.locked:hover {
  cursor: auto;
  background: var(--background-color-tp);
  color: var(--background-color);
}

.option-title {
  font-family: var(--game-font);
  color: var(--text-color);
  text-shadow: var(--text-drop-shadow);
  font-size: 4rem;
}


.button-description {
  left: 0;
  font-size: 2rem;
  width: 300px;
  text-align: left;
  text-shadow:  0px 2px var(--text-color-shadow),
                2px 0px var(--text-color-shadow),
                0px -2px var(--text-color-shadow),
                -2px 0px var(--text-color-shadow),
                3px 3px var(--text-color-shadow);
}

.border-description .button-description {
left: auto;
right: 0;
text-align: right;
}

.portrait-body {
  left: 0;
  bottom: 0;
}

.portrait-picture {
  height: 425px;
  width: 348px;
}

.dialogue-box {
  width: 1640px;
  left: 290px;
  height: 240px;
  bottom: 10px;
  background: var(--background-color-dg);
  border: 4px solid var(--border-shadow);
  border-top-color: var(--border-highlight);
  border-left-color: var(--border-highlight);
  color: var(--text-color);
  text-shadow: var(--text-drop-shadow);
}

.dialogue-text {
  left: 60px;
  font-size: 2.5rem;
  width: 1480px;
  top: 85px;
  font-family: var(--text-font);
  text-shadow: var(--text-drop-shadow-dg);
}

.dialogue-layer.narrator .dialogue-box {
  width: 1930px;
  left: -5px;
}
.dialogue-layer.narrator .dialogue-text {
  left: 120px;
}

.dialogue-layer.system .dialogue-box {
  bottom: 90px;
  height: 940px;
  left: -10px;
  width: 1940px;
  border: none;
  background: linear-gradient(
    180deg
    , transparent 30%, rgb(13 47 74 / 90%) 45%,rgb(13 47 74 / 90%) 55%, transparent 70%);
}

.dialogue-layer.system .dialogue-text {
  left: 40px;
  top: 440px;
  width: 1790px;
  font-size: 3rem;
}

.dialogue-layer.system.wait-for-click::after {
  bottom: 535px;
}

.portrait-name-body {
  left: 310px;
  bottom: 155px;
  font-size: 4rem;
  font-family: var(--game-font);
  color: var(--text-color);
  text-shadow: var(--text-drop-shadow-name);
}

.input-title {
  font-size: 4rem;
  font-family: var(--game-font);
  color: var(--text-color);
  text-shadow: var(--text-drop-shadow);
}
.input-box input {
  font-family: var(--game-font);
  font-size: 4rem;
  background: var(--background-color);
  border: 4px solid var(--border-shadow);
  border-bottom-color: var(--border-highlight);
  border-right-color: var(--border-highlight);
  color: var(--text-color);
  cursor: text;
  padding: 0 30px;
  height: 110px;
  margin-left: 300px;
}

.base-label {
  font-family: var(--text-font);
  background: var(--background-color-tp);
  border: 4px solid var(--border-shadow);
  border-top-color: var(--border-highlight);
  border-left-color: var(--border-highlight);
  color: var(--text-color);
  text-shadow: var(--text-drop-shadow);
}
.credits-title {
  padding: 20px;
  white-space: pre;
  text-align: center;
}

.credits-title a {
  pointer-events: initial;
  cursor: pointer;
  color: var(--credits-link);
  text-decoration: none;
}


.credits-body {
  background: none;
  border: none;
  white-space: break-spaces;
  text-align: center;
  overflow-y: auto;
  pointer-events: auto;
}
.warning-title {
  white-space: pre;
  border: none;
  background: none;
}

.warning-text {
  border: none;
  background: none;
  white-space: pre-wrap;
}

.locked.base-button,
.character-button {
  border-top-left-radius: 0px;
  text-align: left;
  padding-left: 100px;
}

.opponent-button,
.gallery-button {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 0;
  border-bottom-color: #162841;
  border-right-color: #162841;
}

.locked.character-button {
  border-color: black;
}

.opponent-button:hover,
.gallery-button:hover {
  background-color: rgb(0 255 90);
}

.opponent-button:hover .button-description {
  bottom: -30px;
  text-align: center;
  left: -85px;
}

.gallery-button:hover .button-description {
  top: 147px;
  width: 300px;
  text-align: center;
  left: -85px;
}

.character-button::before {
  content: ' ';
  position: absolute;
  /* height: 80px;
  width: 80px; */
  left: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  /* background-position: -70px -30px; */
  height: 93px;
  width: 77px;
}

.locked.character-button::before {
  filter: brightness(0);
}

.opponent-button::before,
.gallery-button::before {
  height: 175px;
  width: 143px;
}

.gallery-title {
  background: none;
  border: none;
  font-family: var(--game-font);
  font-size: 7rem;
  padding: 0;
  line-height: 1;
  z-index: 1;
}
.gallery-title.base-label::before,
.gallery-score.base-label::before {
  content: ' ';
  background: var(--title-banner);
  position: absolute;
  top: 46px;
  left: -40px;
  height: 40px;
  width: 1920px;
  z-index: -1;
}

.gallery-score {
  font-family: var(--game-font);
  font-size: 3rem;
  background: none;
  border:none;
  z-index: 1;
}

.gallery-score.base-label::before {
  top: 32px;
  height: 20px;
  width: 1000px;
}

.gallery-navigation {
  font-size: 4rem;
}

.gallery-creator {
  padding-left: 60px;
}


.gallery-source,
.gallery-creator {
  background: none;
  border: none;
  text-shadow:  0px 2px var(--text-color-shadow),
                2px 0px var(--text-color-shadow),
                0px -2px var(--text-color-shadow),
                -2px 0px var(--text-color-shadow),
                3px 3px var(--text-color-shadow);
  font-size: 2rem;
  font-family: var(--text-font);
  text-align: left;
}

.gallery-creator:hover,
.gallery-source:hover {
  color: var(--credits-link);
  background: none;
}

.dialogue-layer.wait-for-click::after {
  content: "\e1ac";
  font-family: var(--game-font);
  font-size: 2.8rem;
  bottom: 31px;
  right: 20px;
  animation: clickything 5s infinite linear;
  transform-origin: center;
  width: 50px;
  height: 50px;
  text-align: center;
  text-shadow: var(--text-drop-shadow);
}


.input-box,
.option-body {
  top: auto;
  bottom: 0;
  left: 50px;
  width: 850px;
  background: var(--background-color-tp);
  border: 4px solid var( --border-highlight);
  border-bottom: none;
  border-right-color: var(--border-shadow);
}

.input-box {
  left: auto;
  right: 20px;
  height: 430px;
  width: 1880px;
}

.base-button.icon-button {
  font-size: 5rem;
}

@keyframes clickything {
  0% {
    /* transform: rotate(0deg); */
    color: var(--text-color);
  }
  50% {color: yellow;}
  100% {
    /* transform: rotate(360deg); */
    color: var(--text-color);
  }
}

.social-link:hover,
.social-link {
  background-repeat: no-repeat;
  border: none;
  background-position: 12px;
  background-size: 58%;
  border-radius: 100%;
}

.social-link .button-description {
  bottom: -40px;
  font-family: var(--text-font);
  width: 700px;
}

.social-link.twitter {
  background-image:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="twitter-color" fill="white"><path opacity="0" d="M0 0h24v24H0z"></path><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></svg>');
  background-color: rgb(29, 161, 242);
}

.social-link.regular-site {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="72" viewBox="0 0 56 72" class="twtr-icon  twtr-color-fill--blue-dark  has-hover"><path d="M29.518 12.25l-8.705 8.704a13.624 13.624 0 0 0-2.881 4.26 13.617 13.617 0 0 0-1.128 5.377c0 5.48 3.076 8.778 4.01 9.77 2.346 2.494 7.014 3.983 7.416 3.674.637-.49 2.665-3.002.174-5.764-.452-.502-3.605-.852-5.154-4.667-.836-2.059-.753-4.129.076-6.055a7.8 7.8 0 0 1 1.647-2.434l8.705-8.704c3.057-3.057 8.032-3.057 11.089 0 3.057 3.057 3.057 8.032 0 11.089l-4.175 4.174a17.549 17.549 0 0 1 2.37 5.947l5.963-5.962c5.35-5.351 5.35-14.057 0-19.408C43.574 6.9 34.869 6.9 29.518 12.25z"></path><path d="M26.357 59.768l9.01-9.01a13.624 13.624 0 0 0 2.881-4.26 13.617 13.617 0 0 0 1.128-5.377c0-5.48-3.076-8.778-4.01-9.77-2.346-2.494-7.014-3.983-7.416-3.674-.637.49-2.665 3.002-.174 5.764.452.502 3.605.852 5.154 4.667.836 2.059.753 4.129-.076 6.055a7.8 7.8 0 0 1-1.647 2.434l-9.01 9.01c-3.057 3.057-8.032 3.057-11.089 0-3.057-3.057-3.057-8.032 0-11.089l4.479-4.479a17.549 17.549 0 0 1-2.37-5.947L6.95 40.36c-5.35 5.351-5.35 14.057 0 19.408 5.351 5.35 14.057 5.35 19.407 0z"></path></svg>');
}

.social-link.instagram {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="169.063px" height="169.063px" viewBox="0 0 169.063 169.063" style="enable-background:new 0 0 169.063 169.063;" xml:space="preserve" fill="white">    <g>      <path d="M122.406,0H46.654C20.929,0,0,20.93,0,46.655v75.752c0,25.726,20.929,46.655,46.654,46.655h75.752   c25.727,0,46.656-20.93,46.656-46.655V46.655C169.063,20.93,148.133,0,122.406,0z M154.063,122.407   c0,17.455-14.201,31.655-31.656,31.655H46.654C29.2,154.063,15,139.862,15,122.407V46.655C15,29.201,29.2,15,46.654,15h75.752   c17.455,0,31.656,14.201,31.656,31.655V122.407z"/>      <path d="M84.531,40.97c-24.021,0-43.563,19.542-43.563,43.563c0,24.02,19.542,43.561,43.563,43.561s43.563-19.541,43.563-43.561   C128.094,60.512,108.552,40.97,84.531,40.97z M84.531,113.093c-15.749,0-28.563-12.812-28.563-28.561   c0-15.75,12.813-28.563,28.563-28.563s28.563,12.813,28.563,28.563C113.094,100.281,100.28,113.093,84.531,113.093z"/>      <path d="M129.921,28.251c-2.89,0-5.729,1.17-7.77,3.22c-2.051,2.04-3.23,4.88-3.23,7.78c0,2.891,1.18,5.73,3.23,7.78   c2.04,2.04,4.88,3.22,7.77,3.22c2.9,0,5.73-1.18,7.78-3.22c2.05-2.05,3.22-4.89,3.22-7.78c0-2.9-1.17-5.74-3.22-7.78   C135.661,29.421,132.821,28.251,129.921,28.251z"/>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    <g>    </g>    </svg>');
  background-size: 63%;
  background-position: 9px;
  background-color: #de2162;
}

.social-link.patreon {
  background-image:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" role="img" fill="white"><title>Patreon icon</title><path d="M15.386.524c-4.764 0-8.64 3.876-8.64 8.64 0 4.75 3.876 8.613 8.64 8.613 4.75 0 8.614-3.864 8.614-8.613C24 4.4 20.136.524 15.386.524M.003 23.537h4.22V.524H.003"/></svg>');
  background-color: #d64b00;
}


::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background: var(--text-dark-shadow);
  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  */
}

::-webkit-scrollbar-thumb {
  background: var(--background-color);
  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);  */
}
::-webkit-scrollbar-thumb:hover {
  background: var(--background-hover);
}