@font-face {
  font-family: ft88;
  src: url(../fonts/FT88-Bold.woff);
}

body {
  background-color: black;
  margin: auto;
  overflow: hidden;
  font-family: ft88;
}

img {
  user-drag: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  draggable: "false";
}

.text_wrapper {
  display: none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: space-between;
  height: 100vh;
  right: 0;
  color: white;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 0%;
  font-size: 2vh;
}

.invisible_control {
  display: none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0);
  justify-content: space-between;
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
  width: 0%;
}
.invisible_control.show {
  display: flex;
  width: 50%;
}

.text_wrapper_senku {
  display: none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: space-between;
  height: 100vh;
  right: 0;
  color: white;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 0%;
  font-size: 2vh;
}

.text_wrapper.show {
  display: flex;
  -webkit-animation: show_text_wrapper 0.65s;
          animation: show_text_wrapper 0.65s;
  width: 50%;
}
.text_wrapper.show p {
  align-self: flex-start;
}
.text_wrapper.hide {
  display: flex;
  -webkit-animation: hide_text_wrapper 0.65s;
          animation: hide_text_wrapper 0.65s;
  width: 0%;
}

.text_wrapper_senku.show {
  display: flex;
  -webkit-animation: show_text_wrapper 0.65s;
          animation: show_text_wrapper 0.65s;
  width: 50%;
}
.text_wrapper_senku.show p {
  align-self: flex-start;
}
.text_wrapper_senku.hide {
  display: flex;
  -webkit-animation: hide_text_wrapper 0.65s;
          animation: hide_text_wrapper 0.65s;
  width: 0%;
}

@-webkit-keyframes show_text_wrapper {
  from {
    width: 0%;
  }
  to {
    width: 50%;
  }
}

@keyframes show_text_wrapper {
  from {
    width: 0%;
  }
  to {
    width: 50%;
  }
}

@-webkit-keyframes hide_text_wrapper {
  from {
    width: 50%;
  }
  to {
    width: 0%;
  }
}

@keyframes hide_text_wrapper {
  from {
    width: 50%;
  }
  to {
    width: 0%;
  }
}

.text {
  display: flex;
  flex-direction: column;
  margin: 4em 7em;
  align-items: center;
  opacity: 0%;
}
.text h2 {
  font-size: 3vh;
  margin-bottom: 5vh;
}
.text.show {
  display: flex;
  -webkit-animation: show_text 0.65s;
          animation: show_text 0.65s;
  opacity: 100%;
  font-size: 1.8vh;
}
.text.hide {
  display: flex;
  -webkit-animation: hide_text 0.65s;
          animation: hide_text 0.65s;
  font-size: 1.8vh;
  opacity: 0%;
}

.text_senku {
  display: flex;
  flex-direction: column;
  margin: 4em 7em;
  align-items: center;
  opacity: 0%;
}
.text_senku h2 {
  font-size: 3vh;
}
.text_senku.show {
  display: flex;
  -webkit-animation: show_text 0.65s;
          animation: show_text 0.65s;
  opacity: 100%;
}
.text_senku.hide {
  display: flex;
  -webkit-animation: hide_text 0.65s;
          animation: hide_text 0.65s;
  opacity: 0%;
}

@-webkit-keyframes show_text {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@keyframes show_text {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@-webkit-keyframes hide_text {
  from {
    opacity: 100%;
  }
  to {
    opacity: 0%;
  }
}

@keyframes hide_text {
  from {
    opacity: 100%;
  }
  to {
    opacity: 0%;
  }
}

.footer {
  display: flex;
  -webkit-transform: translateY(10vh);
          transform: translateY(10vh);
}

.footer img {
  height: 6vh;
  margin-bottom: 3vh;
}
.footer div {
  border: 2px solid white;
  width: 0vh;
  margin: 0 3vh 3vh 3vh;
}

.footer.show {
  display: flex;
  -webkit-animation: show_footer 0.5s;
          animation: show_footer 0.5s;
  -webkit-transform: translateY(0vh);
          transform: translateY(0vh);
}

.footer.hide {
  display: flex;
  -webkit-animation: hide_footer 0.5s;
          animation: hide_footer 0.5s;
  -webkit-transform: translateY(10vh);
          transform: translateY(10vh);
}

@-webkit-keyframes show_footer {
  from {
    -webkit-transform: translateY(10vh);
            transform: translateY(10vh);
  }
  to {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
}

@keyframes show_footer {
  from {
    -webkit-transform: translateY(10vh);
            transform: translateY(10vh);
  }
  to {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
}

@-webkit-keyframes hide_footer {
  from {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
  to {
    -webkit-transform: translateY(10vh);
            transform: translateY(10vh);
  }
}

@keyframes hide_footer {
  from {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
  to {
    -webkit-transform: translateY(10vh);
            transform: translateY(10vh);
  }
}

.incompatible {
  display: none;
}

#app {
  width: 100%;
  height: 100vh;
  background-color: white;
  display: flex;
}

.bg {
  height: 100%;
}

.bg_extend {
  height: 100%;
  width: 100%;
}

.text {
  color: azure;
}

.shelf {
  position: absolute;
  -webkit-transform: translate(5vh, 30vh);
          transform: translate(5vh, 30vh);
  height: 14vh;
  width: 20vh;
  background-size: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.table {
  position: absolute;
  -webkit-transform: translate(58vh, 62.7vh);
          transform: translate(58vh, 62.7vh);
  height: 20vh;
  width: 40vh;
  background-size: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.painting1 {
  position: absolute;
  -webkit-transform: translate(40vh, 42vh);
          transform: translate(40vh, 42vh);
  height: 20vh;
  width: 40vh;
  background-size: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.painting2 {
  position: absolute;
  -webkit-transform: translate(45vh, 25vh);
          transform: translate(45vh, 25vh);
  height: 20vh;
  width: 21vh;
  background-size: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.painting3 {
  position: absolute;
  -webkit-transform: translate(63vh, 25vh);
          transform: translate(63vh, 25vh);
  height: 20vh;
  width: 21vh;
  background: url("../images/paintings/painting3.png") no-repeat;
  background-size: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.painting4 {
  position: absolute;
  -webkit-transform: translate(81vh, 25vh);
          transform: translate(81vh, 25vh);
  height: 20vh;
  width: 21vh;
  background: url("../images/paintings/painting4.png") no-repeat;
  background-size: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.ini {
  position: absolute;
  height: 39.3vh;
  width: 33.5vh;
  -webkit-transform: translate(1vh, 43.6vh);
          transform: translate(1vh, 43.6vh);
  background-size: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.senku {
  position: absolute;
  -webkit-transform: translate(44vh, 70.8vh);
          transform: translate(44vh, 70.8vh);
  height: 12vh;
  width: 12vh;
  background-size: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* De aqui para abajo las imagenes de pixelcuervo*/
.table_screen {
  display: none;
  flex-direction: column;
  align-items: center;
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #846464; /* Black w/ opacity */
}

.table_screen .content {
  display: flex;
}

.tabletop_title {
  width: 25%;
  position: absolute;
}
.tabletop_showoff {
  width: 100%;
  margin-bottom: 7vh;
}
.column {
  display: flex;
  margin-bottom: 7vh;
  flex-direction: column;
}
.column.left {
  margin-right: 1vh;
}
.cards {
  display: flex;
  margin-bottom: 1vh;
}
.cards .character {
  width: 40vh;
  height: 53.5vh;
  display: flex;
  align-items: center;
}
.column .some_text {
  width: 60.7vh;
  height: 53.5vh;
  background-color: black;
  color: white;
  font-size: 1.7vh;
  margin-bottom: 1vh;
}
.column .some_text p {
  font-size: 2.35vh;
}
.column .card_container {
  display: flex;
  flex-direction: column;
}
.column .card_container img {
  width: 20.65vh;
  height: 26.77vh;
}

.tabletop_back_button {
  position: fixed;
  align-self: flex-start;
  width: 15vh;
  height: 10vh;
}
.column img {
  width: 60.7vh;
  height: 53.75vh;
  background-position: center;
  background-size: contain;
  margin-bottom: 1vh;
}
.column .cards img {
  margin-bottom: 0;
}

.third_row_elements {
  margin-top: 7vh;
  display: flex;
  align-items: center;
  margin-bottom: 7vh;
}

.showoff_footer {
  width: 60.7vh;
  height: 53.5vh;
  background: url("../images/tabletop/showoff2.jpg") no-repeat;
  background-position: center;
  background-size: cover;
  background-position-x: right;
}

.painting2_paints {
  display: none;
  flex-direction: column;
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #846464; /* Black w/ opacity */
}
.painting2_paints img {
  position: fixed;
  width: 15vh;
  height: 10vh;
}
.painting3_paints {
  display: none;
  flex-direction: column;
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #846464; /* Black w/ opacity */
}
.painting3_paints img {
  position: fixed;
  width: 15vh;
  height: 10vh;
}
.painting4_paints {
  display: none;
  flex-direction: column;
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #846464; /* Black w/ opacity */
}
.painting4_paints img {
  position: fixed;
  width: 15vh;
  height: 10vh;
}
/* Filled by javascripts/site.js: three square cells per row that fill the width, each at
   most 63vh (the original size, which fits a cell in the height of the screen). */
.gallery_grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 189vh;
  margin: 0 auto;
}
.gallery_grid.spaced {
  gap: 1vh;
  max-width: 191vh;
}
.gallery_image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  aspect-ratio: 1;
}
/* Text sizes are relative to the cell (cqw), keeping the original 2.7vh text in a 63vh cell. */
.black_gallery_text {
  container-type: inline-size;
  background-color: black;
  color: white;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.black_gallery_text p {
  font-size: 4.3cqw;
  margin: 10.3cqw;
}
.black_gallery_text p.small {
  font-size: 3.8cqw;
}
.some_text p {
  font-size: 2.7vh;
  margin: 6.5vh;
}
@media (max-width: 600px) {
  #app {
    display: none;
  }

  .incompatible {
    display: flex;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .incompatible p {
    margin-bottom: 5vh;
  }

  body {
    background-color: #0827f5;
    color: white;
  }

  /* Smartphone */
  .incompatible ul,
  .incompatible li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .center {
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 90px;
    height: 155px;
  }
  .smartphone {
    width: 80px;
    height: 120px;
    margin: 0 0 5vh 0;
    border: 5px #e1e1e1 solid;
    border-top-width: 15px;
    border-bottom-width: 20px;
    border-radius: 4px;
    -webkit-animation: smartphone 2s ease-in-out infinite;
            animation: smartphone 2s ease-in-out infinite;
  }
  @-webkit-keyframes smartphone {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      opacity: 0;
    }
    25% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      opacity: 1;
    }
    50% {
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
    }
    75% {
      opacity: 1;
    }
    100% {
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
      opacity: 0;
    }
  }
  @keyframes smartphone {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      opacity: 0;
    }
    25% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      opacity: 1;
    }
    50% {
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
    }
    75% {
      opacity: 1;
    }
    100% {
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
      opacity: 0;
    }
  }
  .smartphone:before {
    content: "";
    display: block;
    width: 10px;
    height: 3px;
    margin: -9px auto;
    background: #c8c8c8;
    border-radius: 4px;
  }
  .smartphone:after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 4px auto;
    background: #c8c8c8;
    border-radius: 10px;
  }
  .smartphone .content {
    width: 60px;
    height: 100px;
    margin: 15px 0 0 0;
    padding: 10px;
    background: #81b622;
    color: #81b622;
    font-size: 0.5em;
    overflow: hidden;
  }
  .smartphone ul li {
    height: 6px;
    margin: 0 0 5px 0;
    border-color: #6e912e;
    background: #6e912e;
  }
  .smartphone ul {
    -webkit-animation: screen 2s ease-in-out infinite;
            animation: screen 2s ease-in-out infinite;
  }
  @-webkit-keyframes screen {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      opacity: 0;
    }
    25% {
      opacity: 1;
      -webkit-transform-origin: left;
              transform-origin: left;
      -webkit-transform: rotate(0deg) translateY(0%) translateX(0%) scaleX(1);
              transform: rotate(0deg) translateY(0%) translateX(0%) scaleX(1);
    }
    50% {
      -webkit-transform-origin: left;
              transform-origin: left;
      -webkit-transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);
              transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);
    }
    75% {
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: left;
              transform-origin: left;
      -webkit-transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);
              transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);
      opacity: 0;
    }
  }
  @keyframes screen {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      opacity: 0;
    }
    25% {
      opacity: 1;
      -webkit-transform-origin: left;
              transform-origin: left;
      -webkit-transform: rotate(0deg) translateY(0%) translateX(0%) scaleX(1);
              transform: rotate(0deg) translateY(0%) translateX(0%) scaleX(1);
    }
    50% {
      -webkit-transform-origin: left;
              transform-origin: left;
      -webkit-transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);
              transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);
    }
    75% {
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: left;
              transform-origin: left;
      -webkit-transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);
              transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);
      opacity: 0;
    }
  }
}