/* THEME */
:root {
  --ui-bg:  rgba(7,7,97,.75);
  --ui-bg-hover: #4444DD;
  --ui-border: rgba(255,255,255,.6);
  --ui-input-bg: #5555bb;
  --ui-font-shadow: -2px -2px 0px #000000, 2px 2px 0px #000000, -2px 2px 0px #000000, 2px -2px 0px #000000;
  --ui-choice-bg: #77f;
  --ui-choice-bg-hover: rgb(68,68,221);
  --ui-disabled-text: #555;
}

body * {
  font-family: 'Josefin Sans', 'Material Icons', sans-serif;
}

.default-button,
.input-submit-button {
  font-size: 39px;
  background-color: var(--ui-bg);
  border-radius: 12px;
  border: 4px solid var(--ui-border);
  padding: 20px;
}

.default-button:hover,
.input-submit-button:hover {
  background: var(--ui-bg-hover);
}

.default-button.disabled {
  color: var(--ui-disabled-text);
}

.main-hud-button {
  padding: 2px;
}

.dialogue-box {
  bottom: 10px;
  left: 0;
  background-color: var(--ui-bg);
  border-radius: 12px;
  border: 4px solid var(--ui-border);
  height: 162px;
}

.dialogue-text {
  top: 20px;
  width: 1540px;
  text-shadow: var(--ui-font-shadow);
}

.portrait-body {
  left: 0;
  bottom: 0;
  width: 215px;
  height: 283px;
  border-top-right-radius: 77px;
  border-bottom-right-radius: 10px;
  z-index: 200;
  background-color: #555;
}

.portrait-picture {
  width: 215px;
  margin-top: 30px;
}

.portrait-name-body {
  bottom: 176px;
  left: 0;
  width: 708px;
  height: 57px;
  background-color: var(--ui-bg);
  border-radius: 12px;
  border: 4px solid var(--ui-border);
}

.portrait-name-text {
  font-size: 38px;
  margin: 2px 0 0 250px;
  text-shadow: var(--ui-font-shadow);
}

.pick-name {
  background: none;
  top: 270px;
  left: 58px;
  width: 768px;
  height: 255px;
  padding: 0;
}

.pick-name input {
  background: var(--ui-input-bg);
  border-radius: 12px;
  border: 4px solid var(--ui-border);
  margin: 30px 15px 44px 15px;
  padding: 5px 23px;
  font-size: 35px;
  height: 65px;
  width: 734px;
  line-height: 160px;
}

.pick-name .input-title {
  font-size: 41px;
}
 
.pick-name .input-submit-button {
  right: 20px;
  height: 70px;
  padding-top: 16px;
}

.option-body {
  top: 108px;
  width: 1535px;
  left: 192px;
  background-color: var(--ui-bg);
  border: 3px solid var(--ui-border);
  border-radius: 12px;
}

.option-body ul {
  padding: 0 31px 15px 31px;
}

.option-body li {
  font-size: 46px;
  padding: 10px;
  margin: 30px 0;
  border-radius: 14px;
  background: var(--ui-choice-bg);
}
.option-body li:hover {
  background: var(--ui-choice-bg-hover);
}

.option-title {
  font-size: 39px;
  margin: 39px 31px 0 31px;
}

.gallery {
  background: none;
}

.gallery-navigation {
  bottom: 185px;
  width: 400px;
  height: 87px;
  text-align: center;
}

.gallery-navigation.prev {
  left: 200px;
}
.gallery-navigation.next {
  right: 200px;
}

.dialogue-layer.wait-for-click::after {
  font-size: 27px;
  content: "\e892";
  animation-name: blink;
  animation-duration: .5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  right: 55px;
  bottom: 15px;
}

.help .dialogue-box,
.credits .dialogue-box {
  bottom: auto;
  top: 100px;
  left: 165px;
  width: 1590px;
  height: 840px;
}

.credits .dialogue-box {
  top: 210px;
  left: 635px;
  width: 790px;
  height: 630px;
}

.help .dialogue-text ,
.credits .dialogue-text {
  left: 24px;
  top: 20px;
}

.help .portrait-body,
.help .portrait-name-body,
.credits .portrait-body,
.credits .portrait-name-body  {
  display: none;
}

.computer-trans-block {
  border: solid white 4px;
  border-radius: 21px;
  padding-top: 30px;
  text-align: center;
  white-space: pre-line;
}

/* Animations */
@keyframes blink {
  from {opacity: 0;}
  to {opacity: 1;}
}



/* Int fix */
.plPL .portrait-name-body {
  width: 928px;
}
.itIT .portrait-name-body {
  width: 838px;
}
.nbNO .portrait-name-body {
  width: 750px;
}

.koKO .portrait-name-body,
.zhHANS .portrait-name-body,
.zhCN .portrait-name-body,
.zhTW .portrait-name-body,
.jaJA .portrait-name-body {
  height: 75px;
}

.koKO .help .dialogue-text,
.zhHANS .help .dialogue-text,
.zhCN .help .dialogue-text,
.zhTW .help .dialogue-text,
.jaJA .help .dialogue-text {
  top: 10px;
  font-size: 1.7rem;
}

.koKO .input-submit-button,
.zhCN .input-submit-button,
.zhTW .input-submit-button,
.zhHANS .input-submit-button {
  height: 90px;
}

.koKO .option-body li,
.zhHANS .option-body li,
.zhCN .option-body li,
.zhTW .option-body li,
.jaJA .option-body li {
  white-space: pre-line;
}

.koKO .dialogue-text,
.zhHANS .dialogue-text,
.zhCN .dialogue-text,
.zhTW .dialogue-text,
.jaJA .dialogue-text {
  font-size: 1.7rem;
  top: 10px;
}

.jaJA .help .dialogue-box {
  height: 900px;
}

.ptBR .portrait-name-body {
  width: 760px;
}

.deDE .portrait-name-body {
  width: 850;
}