@import url('https://fonts.googleapis.com/css2?family=Mali&display=swap');
@keyframes lively {
  0% { transform: rotate(-2deg) scale(1.005); }
  20% { transform: rotate(1deg) scale(0.99); }
  40% { transform: rotate(2deg) scale(1.01); }
  60% { transform: rotate(0deg) scale(0.98); }
  80% { transform: rotate(-1deg) scale(1.02); }
  100% { transform: rotate(-2deg) scale(1.005); }
}
*{
  /* border:1px solid red; */
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: #fff;
}
::-webkit-scrollbar-thumb {
  background: #b6d9ff;
}
.page1{
  height: 1200px;
  padding-top: 50px;
  margin-left: -22px;
  margin-right: -25px;
  box-sizing: border-box;
}
.page2{
  height: 800px;
  margin-left: -22px;
  margin-right: -25px;
  box-sizing: border-box;
}
.page3{
  height: 400px;
  padding-top: 50px;
  margin-left: -22px;
  margin-right: -25px;
  box-sizing: border-box;
}
.page4{
  height: 1200px;
  padding-top: 50px;
  margin-left: -22px;
  margin-right: -25px;
  box-sizing: border-box;
}
.img-center{
  display: block;
  margin: 0 auto;
}
.texthead{
  font-size: 24px;
}
body.limit {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.containerImage {
  position: relative;
  text-align: center;
  color: white;
}
.bottom-left {
  position: absolute;
  top: 620px;
  left: 16px;
}
.bottom-left2 {
  position: absolute;
  top: 740px;
  left: 16px;
}
.animate-lively {
  animation-name: lively;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
     -ms-user-select: none; /* Internet Explorer/Edge */
         user-select: none;
}
.animate-slower {
  animation-duration: 5s;
}
#body_with_head > svg{
  animation-name: lively;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
body {
    font-family: 'Mali', cursive;
    background-color: rgb(255, 255, 255);
    color: black;
}
#text_6,
.text_6 .title,
.text_6 .subtitle {
  pointer-events: none;
}
#text_6 #submit_color, .story {
  pointer-events: auto;
}
.click {
    width: 100vw;
    height: 100vh;
}
.main {
    min-height: 30rem;
    position: relative;
    width: 100vw;
    height: 100vh;
}
.title {
  font-size: 4em;
  user-select: none;
}
.subtitle {
  font-size: 3em;
  user-select: none;
}
.jingjing_head_container {
  position: fixed;
  width: 100vw;
  height: 40vh;
  bottom: -50px;
  transform-origin: center bottom;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  pointer-events: none;
  z-index: 1030;
}
.jinjin {
  position: absolute;
  left: 50%;
  z-index: 1030;
  height: 40vh;
  transform: translateX(-50%);
}
.jinjin-eye {
  position: absolute;
  width: 6vh;
  height: 6vh;
  left: 50%;
  top: 44%;
  border-radius: 100px;
  transform: translateX(-50%);
  background-color: black;
}
.preorder {
    background-image: url(../img/bg-pr-desktop.png);
    background-attachment: scroll;
    margin: 0px;
    background-repeat: no-repeat;
}
h4, h5{
    font-family: Mali;
    line-height: 43px;
}

.container {
    max-width: 1466px;
}

.schoolBtn {
    font-family: Mali;
}

.body_selector_container {
  height: 30vh;
  width: 100vw;
  overflow-x: scroll;
  overflow-y: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
}
#body_list {
  height: 30vh;
  width: 1100px;
  display: block;
  transition-duration: 0.3s;
  margin: 0 auto;
}
#body_list .body {
  display: block;
  clear: none;
  float: left;
  position: relative;
  transform: translateY(-50%) scale(0.6);
  margin: 0 -20px;
  top: 70%;
  transition-duration: 0.25s;
}
#body_list .body.active {
  top: 50%;
  transform: translateY(-50%) scale(1);
  margin: 0 7px;
}
#body_with_head {
  position: relative;
}
#body_selector_l {
  position: absolute;
  top: 50%;
  left: 3vw;
  transform: translateY(-50%) scale(0.4);
}
#body_selector_r {
  position: absolute;
  top: 50%;
  right: 3vw;
  transform: translateY(-50%) scale(0.4);
}
#text_7 {
  padding-bottom: 200px;
}
#feel_list {
  background-color: #ccc;
  border-radius: 40px;
  padding: 20px;
  min-width: 480px;
  max-width: 560px;
  margin: 0 auto;
}
.feel {
  margin: 20px 0;
}
.selection_list img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.jkjj_display {
  width: 20vw;
}
.selection_list {
  position: fixed;
  background-color: #ddd;
  border-radius: 20px;
  padding: 60px 20px 20px 20px;
  min-width: 480px;
  max-width: 560px;
  margin: 30px auto 10px;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.clothing_navigation {
  position: absolute;
  top: 20px;
  background-color: none;
  border: none;
}
.clothing_navigation.clothing_back {
  left: 20px;
  color: #777;
  background: none;
  color: #aaa;
}
.clothing_navigation.clothing_next {
  right: 20px;
  color: #333;
  background-color: white;
  border-radius: 7px;
  box-shadow: 1px 1px 3px #ccc;
}
.clothing_navigation.clothing_next.clothing_finish {
  background-color: rgb(161, 210, 255);
}
#text_9 {
  padding-bottom: 340px;
}
.rando_container {
  opacity: 0.5;
  position: fixed;
  z-index: -1;
}
.jkjj_randommove {
  position: fixed;
  z-index: -1;
  transform: translate(-50%,-50%);
  transition-timing-function: linear;
}
@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(4deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}
@keyframes shake_scale {
  0% { transform: rotate(0deg) scale(1.05) translateY(7); }
  25% { transform: rotate(4deg) scale(0.98) translateY(0); }
  50% { transform: rotate(0deg) scale(1.02) translateY(4); }
  75% { transform: rotate(-4deg) scale(1) translateY(1); }
  100% { transform: rotate(0deg) scale(1.05) translateY(7); }
}
.jkjj_randommove svg #foot {
  animation-name: shake;
  animation-timing-function: linear;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  transform-origin: center;
}
.jkjj_randommove svg #under {
  animation-name: shake;
  animation-timing-function: linear;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  transform-origin: center;
}
.jkjj_randommove svg #hand {
  animation-name: shake;
  animation-timing-function: linear;
  animation-duration: 1.8s;
  animation-iteration-count: infinite;
  transform-origin: center;
}
.jkjj_randommove svg #hat {
  animation-name: shake_scale;
  animation-timing-function: linear;
  animation-duration: 2.2s;
  animation-iteration-count: infinite;
  transform-origin: center;
}
.jkjj_randommove svg #chest {
  animation-name: shake_scale;
  animation-timing-function: linear;
  animation-duration: 2.2s;
  animation-iteration-count: infinite;
  transform-origin: center;
}
#text_9 .alt{
  display: none;
}
.share, .share:hover {
  border: none;
  text-decoration: none !important;
  color: black;
  background-color: white;
  border-radius: 3px;
  box-shadow: 1px 1px 3px #ccc;
  padding: 3px 20px;
  min-width: 100px;
  box-sizing: border-box;
  height: 30px;
  display: inline-block;
  -webkit-appearance: none;
  user-select: none;
}
#sharefb, #sharefb:hover  {
  background-color: #4267b2;
  color: white;
}
.share_page #result {
    padding: 0 30px;
    margin: 20px auto;
    width: 400px;
    max-width: 80%;
    display: block;
}
.share_page #text_1 {
    max-width: 470px;
    padding: 0 30px;
    margin: 20px auto;
}
.shared_box {
  text-align: center;
}

.about, .funding {
  height: 100vh;
  width: 100vw;
}