body{
  background: rgb(20,220,181);
  background: -moz-linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
  background: -webkit-linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
  background: linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#14dcb5",endColorstr="#edf501",GradientType=1);
}




    #ui-container{
      display: none;
    }
    #ui-container.is-visible{
      display: block;
    }
    #kraki-main--wrapper{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgb(20,220,181);
      background: -moz-linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
      background: -webkit-linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
      background: linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#14dcb5",endColorstr="#edf501",GradientType=1);
    }
    #kraki-main--wrapper p{
      line-height: inherit;
      font-weight: inherit;
      font-size: inherit;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
    }

html,body{
  overscroll-behavior: none;
}

html,body,#lights-off--overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#animation_container{
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}



body{
    font-family: "TeleNeo Web", Arial, Helvetica, sans-serif;
    background: rgb(20,220,181);
    background: -moz-linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
    background: -webkit-linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
    background: linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#14dcb5",endColorstr="#edf501",GradientType=1);
  }
  html,body{
    overscroll-behavior: none;
  }
  
  html,body,#lights-off--overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  
  /* variables */
:root {
    --magenta-bright: #e20074;
    --magenta-mid: #cc0070;
    --magenta-dark: #8d004c;

/*    --magenta-text: #bb0861;*/
    --magenta-text: #e20074;
    --background-yellow: #edf600;
    --background-green: #14dcb4;
  
  --light-gradient--width: 20em;
  --light-gradient--height: 10em;
  --light-gradient--offset: 2em;
}

.thin{
  font-weight: 100
}
.medium{
  font-weight: 500
}
.bold{
  font-weight: bold;
}
.extra-bold{
  font-weight: 800
}

.itallic{
  font-style: italic;
  font-weight: normal
}

  .webapp-wrapper{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      /* background-image: url("/dummy.jpg"); */
      background-size: contain;
      background-repeat: no-repeat;
      justify-content: center;
      align-items: center;
  }

#lights-off--overlay,
#kraki-background-wrapper,
#ui-container{
  font-size: 0.5625vh;
}
  #ui-container{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      margin: auto;
      pointer-events: none;
  }
  #ui-container *{
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      /* font-size: inherit; */
      /* font-weight: inherit; */
      /* line-height: inherit; */
  }

  /* ACTIVITY BUTTONS */

  .gameplay-buttons-container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      position: absolute;
      bottom: 9.5em;
      display: none;
  }
  .gameplay-buttons-container.is-active{
      display: flex;
  }


  .button-magenta{
      position: relative;
      width: 41em;
      height: 10em;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: .6em;
      opacity: 0;
      animation: button-animate-in .25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: all;
  }
  #activity-button-2{
    animation-delay: .05s;
  }
  #activity-button-3{
    animation-delay: .1s;
  }
  .button-magenta.is-hidden{
      display: none;
  }
  
@keyframes button-animate-in{
    0%{
        opacity: 0;
        transform: scale(.8,0.2) translateY(20%);
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}

  .button-magenta:active .button-magenta-svg{
      /* transform: scaleY(-1); */
      /* stroke: #fff; */
  }
  
  .button-magenta:active .button-magenta-svg .button-magenta-rect{
      fill: var(--magenta-dark);
      stroke: var(--magenta-bright);
  }
  
  .button-magenta:active .button-magenta-svg .button-magenta-line{
      /* stroke: var(--magenta-bright); */
  }
  
  .button-magenta svg{
      width: 100%;
      height: auto;
  }
  
  .button-magenta-svg .button-magenta-line,
  .button-magenta-svg .button-magenta-rect{
      stroke-linecap:round;
      stroke-miterlimit:10;
      stroke-width:7.558px;
  }
  
  .button-magenta-svg .button-magenta-rect{
      fill: var(--magenta-bright);
      stroke: var(--magenta-dark);
      stroke-linecap:round;
      stroke-miterlimit:10;
      stroke-width:7.558px;
  }
  .button-magenta-svg .button-magenta-line{
      fill:none;
      stroke:#fff;
  }
  
  .button-magenta-text{
      color: white;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 5em;
      text-transform: uppercase;
  }
#home-overlay-body,
#home-overlay-naming,
#home-overlay-sick,
#home-overlay-sleeping,
#success-overlay--body,
#prizes-overlay--body{
/* background: red; */
position: absolute;
width: 100%;
min-height: 30em;
justify-content: start;
align-items: center;
display: flex;
flex-direction: column;
top: 32em;
text-align: center;
}

#home-overlay-sick{
  top: 15em;
}
#home-overlay-sick--1,
#home-overlay-sick--2,
#home-overlay-sleeping--1,
#home-overlay-sleeping--2{
  color: white;
  text-transform: uppercase;
  transition-delay: 0.2s;
}
#home-overlay-sick--2{
  color: white;
    text-transform: uppercase;
    margin-top: 1.2em;
  transition-delay: 0.3s;
}

#home-overlay-sleeping{
  top: 24em;
}
#home-overlay-sleeping--1{
  font-weight: 800 !important;
}
#home-overlay-sleeping--2{
  margin-top: 1.2em;
}

#home-overlay--container.is-healing #home-overlay-sick--1,
#home-overlay--container.is-healing #home-overlay-sick--2{
  transition-delay: 0s;
}

.home-overlay-body--text{
/*    font-size: 4.5em;*/
    font-size: 4.8em;
    opacity: 0;
    -webkit-transform: translateY(2em) scale(0.1,0.5);
    transform: translateY(2em) scale(0.1,0.5);
    -webkit-transition: all .2s cubic-bezier(0,0,0.5,1.4);
    transition: all .2s cubic-bezier(0,0,0.5,1.4);
    font-weight: bold;
    font-style: italic;
}
#ui-container:not(.activity-active) .menu-overlay--container:not(.is-sick):not(.is-sleeping) .home-overlay-body--text.is-visible,
#home-overlay--container.is-sick #home-overlay-sick .home-overlay-body--text,
#home-overlay--container.is-playing.is-sleeping #home-overlay-sleeping .home-overlay-body--text
{
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

#home-overlay-days{
  color: var(--magenta-text);
  font-weight: 800;
  font-style: normal;
}
#home-overlay-text.is-visible{
  transition-delay: 0.5s;
}
#home-overlay-text,
#success-overlay--text,
#afterplay-overlay--text{
    line-height: 1.2;
    color: white;
    text-transform: uppercase;
    max-width: 17em;
}
#home-overlay-text{
    margin-top: .66em;
}
#home-overlay-naming{
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    z-index: 99999;
    text-transform: uppercase;
}
#home-overlay-naming--input--field{
    font-size: 5em;
    text-align: center;
    border: none;
    padding: 0;
    line-height: 3;
    color: var(--magenta-dark);
    text-transform: uppercase;
    max-width: 20em;
  z-index: 99;
  margin: 0 0 .25em 0;
}

#button-ui-create--back{
    bottom: 3.6em;
    position: absolute;
}

    
#button-ui-create{
    width: 91%;
    margin-bottom: 0.5em;
    background: transparent;
    color: white;
    border: 0.1em solid var(--magenta-dark);
}
#ui-container:not(.naming) #home-overlay-naming{
    display: none;
}
#ui-container.naming .menu-home--text--container{
    display: none;
  }


.menu-overlay--container,
.menu-overlay--body,
.menu-overlay--backdrop,
.text-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.menu-overlay--container{
    height: 100%;
    pointer-events: none;
}
.menu-overlay--backdrop{
    z-index: -1;
    height: 60em;
    background: rgb(33,221,169);
    background: -moz-linear-gradient(0deg, rgba(33,221,169,1) 0%, rgba(111,231,105,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(33,221,169,1) 0%, rgba(111,231,105,1) 100%);
    background: linear-gradient(0deg, rgba(33,221,169,1) 0%, rgba(111,231,105,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#21dda9",endColorstr="#6fe769",GradientType=1);
    opacity: 0;
    transition: opacity .4s ease-in-out;
}
.menu-overlay--backdrop::after{
    content: '';
    position: fixed;
    height: calc(100% - 60em);
    width: 100%;
    bottom: 0;
    left: 0;
    background: rgb(33, 221, 168);

}
.menu-overlay--curve{
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 14em;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
.menu-overlay--curve path{
    fill: var(--background-yellow);
}

#menu-overlay--umbrella{
    position: absolute;
    top: 0;
    left: 50%;
    height: 40em;
    width: auto;
    -webkit-transform: scaleX(-1) translate(142%,-87%);
    transform: scaleX(-1) translate(142%,-87%);
    z-index: -1;
}
#menu-overlay--chair{
    position: absolute;
    top: 0;
    left: 50%;
    height: 28em;
    width: auto;
    -webkit-transform: scaleX(-1) translateX(48%) translateY(-77%);
    transform: scaleX(-1) translateX(48%) translateY(-77%);
}

.menu-overlay--header{
    position: absolute;
    left: 0;
    right: 0;
    top: 5em;
    width: 89em;
    margin: auto;
    -webkit-transform: translateY(-150%);
    transform: translateY(-150%);
    transition: all .2s ease-out;
    z-index: 2;
}
.home-overlay--header{
    width: 94em;
    top: 0.5em;
}
.menu-overlay--body{
    top: 60em;
    bottom: 0;
    background: rgb(20,220,181);
    background: -moz-linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
    background: -webkit-linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
    background: linear-gradient(0deg, rgba(20,220,181,1) 20%, rgba(237,245,1,1) 95%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#14dcb5",endColorstr="#edf501",GradientType=1);
    -webkit-transform: translateY(150%);
    transform: translateY(150%);
    -webkit-transition: transform 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: transform 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.text-container{
    top: 39%;
    top: 10.5em;
    bottom: 26em;
    overflow-y: auto;
    color: var(--magenta-text);
    padding-left: 15em;
    padding-right: 15em;
    padding-left: 10em;
    padding-right: 10em;
    text-align: center;
    line-height: 1.2;
    font-weight: bold;
}
.text-container > *{
    font-size: 3.35em !important;
}

.button-ui-white{
    width: 12em;
    height: 1.8em;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--magenta-text);
    margin: auto;
    margin-top: 2em;
    font-size: 4.4em;
    cursor: pointer;
    z-index: 2;
    -webkit-transition: margin-top .6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: margin-top .6s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: all;
    font-weight: bold;
} 
.button-ui-text{
    color: var(--magenta-text);
    font-size: 2em;
    margin-top: 1.5em;
}

.menu-home--text--container{
    width: 69em;
    height: 32em;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    top: 52em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.18;
    -webkit-transform: translateY(10em);
    transform: translateY(10em);
    opacity: 0;
    transition: all .4s ease-in-out;
}
#kraki-main--wrapper .menu-home--text--container > *,
.menu-home--text--container > *{
    font-size: 4.1em;
    color: white;
    text-transform: uppercase;
    text-align: center;
}
#home-overlay-body,
#home-overlay-naming,
#home-overlay-sick,
.menu-home--text--container{
  font-weight: bold;
}
#text-welcome--pet{
    margin-top: -.75em;
}
#text-welcome--pet span,
#text-welcome--sleeping span:not(#sleep-time-left){
    color: var(--magenta-bright);
  line-height: inherit;
}
.menu-buttons--container{
    bottom: 10.56em;
    position: absolute;
    width: 100%;
    left: 0;
    -webkit-transform: translateY(10em);
    transform: translateY(10em);
    opacity: 0;
    -webkit-transition: opacity .2s ease-in-out, transform .4s ease-in-out;
    transition: opacity .2s ease-in-out, transform .4s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-header-bg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 71em;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: opacity .2s ease-in-out, transform .2s ease-in-out;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}

/* GAMEPLAY */
#kraki-state--container {
    position: absolute;
    top: 4em;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 65.625vh;
    padding: 0 4em;
    height: 18em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-transform: translateX(15%);
    transform: translateX(15%);
    opacity: 0;
    margin: auto;
    overflow: hidden;
}
.kraki-state--line{
    width: 100%;
    height: 5em;
    display: flex;
    align-items: center;
    justify-content: end;
    opacity: 0;
}
#kraki-state--happiness{
    transform: translateX(20%);
}
#kraki-state--hunger{
    transition-delay: .2s;
    transform: translateX(40%);
}
#kraki-state--energy{
    transition-delay: .4s;
    transform: translateX(60%);
}

.kraki-state--indicator{
    width: 3.8em;
    height: 3.8em;
    margin-left: .8em;
    border-radius: 50%;
  overflow: hidden;
}
.kraki-state--indicator .status-fill{
    width: 100%;
    height: 100%;
  transform-origin: 0 50%;
  margin-left: -5%;
}

.kraki-state--indicator---1{
    border: 2px solid var(--magenta-bright);
}
.kraki-state--indicator---2{
    border: 2px solid var(--magenta-mid);
}
.kraki-state--indicator---3{
    border: 2px solid var(--magenta-dark);
}
.kraki-state--indicator---1 .status-fill{
    background: var(--magenta-bright);
}
.kraki-state--indicator---2 .status-fill{
    background: var(--magenta-mid);
}
.kraki-state--indicator---3 .status-fill{
    background: var(--magenta-dark);
}

.kraki-state--icon{
    width: 6em;
    height: 4em;
    display: flex;
    justify-content: start;
    align-items: center;
    position: absolute;
    right: 12.5em;
}
.kraki-state--icon svg{
    height: 100%;
    width: auto;
}


/* ANIMATIONS */

.menu-overlay--container.is-active{
    pointer-events: all;
}

.menu-overlay--container.is-active .menu-overlay--body{
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.menu-overlay--container.is-active .menu-overlay--backdrop{
    opacity: 1;
}

#ui-container:not(.naming) .menu-overlay--container.is-active:not(.is-prizes) .menu-overlay--header{
    transition-delay: 0.1s;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

/*.menu-overlay--container.is-active:not(.is-prizes):not(.is-sleeping) .menu-home--text--container{*/
.menu-overlay--container.is-active:not(.is-prizes) .menu-home--text--container{
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
.menu-overlay--container.is-playing .menu-overlay--header{
    pointer-events: none;
    
}
.menu-overlay--container.is-playing:not(.is-sick):not(.is-sleeping) .menu-overlay--header{
    transition-delay: 0.1s;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    width: 58em;
    top: 3.5em;
    
}
#ui-container.activity-active .home-overlay--header{
    -webkit-transform: translateY(-100%) !important;
    transform: translateY(-100%) !important;    
}

.menu-overlay--container.is-playing .hide-when--playing{
    opacity: 0;
}

.menu-overlay--container.is-playing .kraki-state--line{
    -webkit-transition: all .8s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: all .8s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
    opacity: 1;
}

.menu-overlay--container.is-playing #kraki-state--container{
    -webkit-transition: transform .6s ease-out, opacity .6s ease-out;
    transition: all .6s ease-out;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}
.menu-overlay--header g{
    transform: translateY(-1em);
    animation: textFloatAnimation 20s ease-in-out infinite;
}

#ui-container:not(.naming) .menu-overlay--container.is-active .menu-buttons--container{
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
.menu-overlay--container.is-active .button-ui-white{
    margin-top: .6em;
}
#ui-container:not(.naming) .menu-overlay--container.is-active:not(.is-prizes) .home-header-bg{
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.menu-overlay--header g:nth-child(4n+1){
    animation-duration: 3.1s;
    animation-delay: .2s;
}
.menu-overlay--header g:nth-child(4n+2){
    animation-duration: 3.2s;
    animation-delay: .3s;
}
.menu-overlay--header g:nth-child(4n+3){
    animation-duration: 3.1s;
    animation-delay: .4s;
}
.menu-overlay--header g:nth-child(4n+4){
    animation-duration: 3.2s;
    animation-delay: .5s;
}
@keyframes textFloatAnimation {
    0% {
        transform: translateY(-1em);
    }
    50% {
        transform: translateY(1em);
    }
    100% {
        transform: translateY(-1em);
    }
}


/* STATES */

#ui-container:not(.no-pet) #text-welcome--nopet{
    display: none;
}

#ui-container.no-pet #text-welcome--pet,
#ui-container #home-overlay--container.is-sleeping  #text-welcome--pet{
    display: none;
}
.menu-overlay--container:not(.is-sleeping) #text-welcome--sleeping{
  display: none;
}
/*BACKGROUND*/

#kraki-background-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/*
#kraki-background-front--container{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 600%;
    transform-origin: 0 100%;
    -webkit-transition: transform 2s ease-in-out;
    transition: transform 2s ease-in-out;
    -webkit-transform: translateX(-40%) scaleY(0.8);
    transform: translateX(-40%) scaleY(0.8);
}
#kraki-background-front--container[data-activity="food"]{
  -webkit-transform: translateX(-18%) scaleY(0.3);
  transform: translateX(-18%) scaleY(0.3);
}
#kraki-background-front--container[data-activity="play"]{
  -webkit-transition: transform 1.5s ease-in-out;
  transition: transform 1.5s ease-in-out;
  -webkit-transform: translateX(-20%) scaleY(0.5);
  transform: translateX(-20%) scaleY(0.5);
}
#kraki-background-front--container[data-activity="clean"]{
  -webkit-transform: translateX(-80%) scaleY(0.7);
  transform: translateX(-80%) scaleY(0.7);
}

#kraki-background-front--container[data-activity="pet"]{
  -webkit-transform: translateX(-45%) scaleY(0.9);
  transform: translateX(-45%) scaleY(0.9);
}
*/

#kraki-background-front--container{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 600%;
    transform-origin: 0 100%;
    -webkit-transition: transform 2s ease-in-out;
    transition: transform 2s ease-in-out;
    -webkit-transform: translateX(-40%);
    transform: translateX(-40%);
}
#kraki-background-front--container[data-activity="food"]{
  -webkit-transform: translateX(-18%);
  transform: translateX(-18%);
}
#kraki-background-front--container[data-activity="play"]{
  -webkit-transition: transform 1.5s ease-in-out;
  transition: transform 1.5s ease-in-out;
  -webkit-transform: translateX(-20%);
  transform: translateX(-20%);
}
#kraki-background-front--container[data-activity="clean"]{
  -webkit-transform: translateX(-80%);
  transform: translateX(-80%);
}

#kraki-background-front--container[data-activity="pet"]{
  -webkit-transform: translateX(-45%);
  transform: translateX(-45%);
}

#kraki-background--big{
    transform-origin: 0 100%;
    -webkit-transition: transform 2s ease-in-out;
    transition: transform 2s ease-in-out;
    -webkit-transform: scaleY(0.8);
    transform:scaleY(0.8);
}
#kraki-background-front--container[data-activity="food"] #kraki-background--big{
  -webkit-transform: scaleY(0.3);
  transform: scaleY(0.3);
}
#kraki-background-front--container[data-activity="play"] #kraki-background--big{
  -webkit-transition: transform 1.5s ease-in-out;
  transition: transform 1.5s ease-in-out;
  -webkit-transform:scaleY(0.5);
  transform: scaleY(0.5);
}
#kraki-background-front--container[data-activity="clean"] #kraki-background--big{
  -webkit-transform: scaleY(0.7);
  transform: scaleY(0.7);
}

#kraki-background-front--container[data-activity="pet"] #kraki-background--big{
  -webkit-transform: scaleY(0.9);
  transform: scaleY(0.9);
}




#kraki-background--big{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}



#animation_container::before,
#animation_container::after{
    content: '';
    position: absolute;
    background: var(--magenta-dark);
    top: 0;
    width: .5vh;
    height: 100%;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
#animation_container::before{
    left: -5vh;
  
  }
#animation_container::after {
    right: -5vh;
}

#animation_container.show-border::before,
#animation_container.show-border::after{
  opacity: 1;
}

#animation_container.show-border::before{
  left: -.5vh;
}
#animation_container.show-border::after{
  right: -.5vh
}

#lights-off--overlay{
  display: none;
}
#lights-off--overlay.is-visible{
  display: block;
}

.lights-off--side,
.lights-off--vertical{
    position: absolute;
    background: black;
  background: #0F3525;
}
.lights-off--side{
    height: 100%;
    top: 0;
    width: calc(50% - 32.8125vh);
/*    width: calc( 50% - 28.3125vh );*/
}
.lights-off--vertical{
  display: none;
    width: 100%;
    height: calc( 50% - 76vw );
}
#lights-off-left{
    left: 0;
}
#lights-off-right{
    right: 0;
}
#lights-off-top{
    top: 0;
}
#lights-off-bot{
    bottom: 0;
}
#lights-off-left::after,
#lights-off-right::after,
#lights-off-top::after,
#lights-off-bot::after{
  content: '';
  position: absolute;
  z-index:-1;
}
.lights-off--side::after{
  background: rgb(64,213,145);
background: -moz-linear-gradient(90deg, rgba(64,213,145,1) 5%, rgba(64,213,145,0) 95%);
background: -webkit-linear-gradient(90deg, rgba(64,213,145,1) 5%, rgba(64,213,145,0) 95%);
background: linear-gradient(90deg, rgba(64,213,145,1) 5%, rgba(64,213,145,0) 95%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#40d591",endColorstr="#40d591",GradientType=1);
  height: 100%;
  width: var(--light-gradient--width);
}
.lights-off--vertical::after{
  background: rgb(64,213,145);
background: -moz-linear-gradient(0deg, rgba(64,213,145,1) 5%, rgba(64,213,145,0) 95%);
background: -webkit-linear-gradient(0deg, rgba(64,213,145,1) 5%, rgba(64,213,145,0) 95%);
background: linear-gradient(0deg, rgba(64,213,145,1) 5%, rgba(64,213,145,0) 95%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#40d591",endColorstr="#40d591",GradientType=1);
  width: 100%;
  height: var(--light-gradient--height);
}

#lights-off-left::after{
  right: var(--light-gradient--offset);
  transform: translateX(100%);
}
#lights-off-right::after{
  left: var(--light-gradient--offset);
  transform-origin: 0 0;
  transform: scaleX(-1);
}
#lights-off-bot::after{
  top: var(--light-gradient--offset);
  transform: translateY(-100%);
}
#lights-off-top::after{
  bottom: var(--light-gradient--offset);
  transform-origin: 0 100%;
  transform: scaleY(-1);
}


#lights-off--overlay.is-sick{
  background: var(--magenta-dark);
  opacity: 0.75;
  display: block;
  animation: isSickanimation 0.5s forwards;
}
#lights-off--overlay.is-sick.is-healing{
  animation: isHealinganimation 0.5s forwards;
}
@keyframes isSickanimation{
  0%{opacity: 0}
  100%{opacity: 0.7}
}
@keyframes isHealinganimation{
  0%{opacity: 0.7}
  100%{opacity: 0}
}

#lights-off--overlay.is-sick > div{
  display: none;
}

#success-overlay--garland{
  position: absolute;
  top: -5vh;
  left: calc(50% - 59.25vh);
  height: auto;
  width: 56.25vh;
  transform-origin: 0 0;
  transform: scale(2.1);
}

#garland-svg{
  opacity: 0;
  -webkit-transform: translateY(-100%) scaleY(0.5);
  transform: translateY(-100%) scaleY(0.5);
  -webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
  transition: all .5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
  
}
#success-overlay--garland.is-active  #garland-svg{
  opacity: 1;
  -webkit-transform: translateY(0) scaleY(1);
  transform: translateY(0) scaleY(1);
}
#success-overlay--body{
    top: 9em;
}
#success-overlay--text,
#afterplay-overlay--text,
#home-overlay-naming--text{
  font-weight: 500;
  color: var(--magenta-bright);
  font-style: normal;
  font-size: 5.0em !important;
  line-height: 1.1 !important;
}

#success-overlay--text span,
#afterplay-overlay--text span,
#home-overlay-naming--text span{
  color: var(--magenta-bright);
  font-style: italic;
  font-weight: 800;
  line-height: inherit;
}
#home-overlay-naming--text{
  margin-top: 2em;
}

#home-overlay--container.is-prizes{
  pointer-events: none;
}

#home-overlay--container.is-prizes #button-ui-prizes{
  display: none;
}
#home-overlay--container:not(.is-prizes) #button-ui-prizes-home{
  display: none;
}
.gameplay-buttons-container:not(.is-active) .button-magenta,
#home-overlay--container.is-playing .button-ui-white,
.menu-overlay--container:not(.is-active) .button-ui-white,
.menu-overlay--container:not(.is-active) .button-magenta,
.button-magenta.is-hidden{
  pointer-events: none !important;
}

.prize-container{
    position: absolute;
    width: 100em;
    height: 88em;
    top: -14em;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: none;
    justify-content: center;
    align-items: center;
    color: black;
    opacity: 0;
  
}
.prize-container span{
  font-size: 5em;
  line-height: inherit;
}
.prize-container--header{
  position: absolute;
    top: 0;
    font-size: 6em !important;
    font-weight: 800 !important;
    color: var(--magenta-text);
}
.prize-container img{
  position: absolute;
    width: 61%;
    height: auto;
    bottom: 0;
}
.prize-left,
.prize-center,
.prize-right{
  display: flex;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  
}
.prize-left{
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.prize-center{
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

.prize-right{
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}


#prizes-overlay--body{
  top: 9em;
  color: var(--magenta-bright);
}

#prizes-overlay--header{
  font-weight: 800;
  font-size: 3em;
  line-height: 0.8;
}

#prizes-overlay--body p{
  font-size: .9em;
  line-height: 1.2;
  margin-top: 1.6em;
}
#prizes-overlay--body p span{
  font-weight: 800;
  line-height: inherit;
}

#prizes-overlay--copy{
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#prizes-overlay--copy.is-left{
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}

@media (max-aspect-ratio: 9/16) {
  #lights-off--overlay,
  #kraki-background-wrapper,
  #ui-container{
    font-size: 1vw;
  }

/*
  #background-wrapper{
    font-size: 1vw;
  }
*/
  #kraki-background-front--container{
    bottom: 0;
    top: 0;
    margin: auto;
    height: 177.777vw;
  }

  #success-overlay--garland{
    position: absolute;
    top: calc(50% - 88vw);
    left: 0;
    width: 100%;
    transform-origin: 50% 0;
    transform: scale(1.9);
  }
}

@media (max-aspect-ratio: 21/32) {
    .lights-off--side{
    display: none;
  }
  .lights-off--vertical{
    display: block;
  }
}

#resetButton,
#formButton,
#advanceDayButton,
#advanceHourButton{
  position: absolute;
  z-index: 999;
}

#resetButton{
  top: 0;
  left: 0;
}
#formButton{
  top: 0;
  right: 0;
}
#advanceDayButton{
  bottom: 0;
  right: 0;
}
#advanceHourButton{
  bottom: 0;
  left: 0;
}

.instructions-header{
  font-weight: 500 !important;
  font-size: 4.6em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.instructions-header span{
  font-weight: 800;
  line-height: inherit;
}
#prizes-list{
    font-size: 4.3em !important;
    max-width: 16.5em !important;
    margin: auto !important;
    font-weight: 500 !important;
}
#prizes-list ul{
    text-align: start !important;
    margin: auto !important;
    padding-left: 2em;
}
#prizes-list li{
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

#prizes-list ul li span{
    font-weight: 800;
    color: var(--magenta-dark);
    line-height: inherit;
}

.instructions-body span{
  font-weight: 800;
  line-height: inherit;
}

#palme-1,
#palme-2{
  width: auto;
  position: absolute;
  left: 0;
  right: 0;
  height: 100em;
  margin: auto;
  bottom: 53em;
  -webkit-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  transform-origin: 50% 100%;
  -webkit-transform: translate(-100em,0) scale(0.5);
  transform: translate(-100em,0) scale(0.5);
  opacity: 0.5;
}
#palme-2{
  -webkit-transform: translate(80em,-15em) scale(-0.35,0.35);
  transform: translate(80em,-15em) scale(-0.35,0.35);
  opacity: 0.5;
}
#kraki-background-front--container[data-activity="home"] #palme-1{
  -webkit-transform: translate(-44em,0) scale(0.75);
  transform: translate(-44em,0) scale(0.75);
  opacity: 0.5;
}
#kraki-background-front--container[data-activity="home"] #palme-2{
  -webkit-transform: translate(180em,-15em) scale(-0.35,0.35);
  transform: translate(180em,-15em) scale(-0.35,0.35);
  opacity: 0.5;
}

#kraki-background-front--container[data-activity="food"] #palme-1{
  -webkit-transform: translate(-40em,50em) scale(0.75);
  transform: translate(-40em,50em) scale(0.75);
  opacity: 0.5;
}

#kraki-background-front--container[data-activity="play"] #palme-1{
  -webkit-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
  -webkit-transform: translate(-300em,20em) scale(0.25);
  transform: translate(-300em,20em) scale(0.25);
  opacity: 0.5;
}

#kraki-background-front--container[data-activity="clean"] #palme-2{
  -webkit-transform: translate(270em,-10em) scale(-0.75,0.75);
  transform: translate(270em,-10em) scale(-0.75,0.75);
  opacity: 0.5;
}

#kraki-background-front--container[data-activity="pet"] #palme-2{
  -webkit-transform: translate(60em,-35em) scale(-0.5,0.5);
  transform: translate(60em,-35em) scale(-0.5,0.5);
  opacity: 0.5;
}


.prizes-overlay--arrows{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 10em;
  width: 90em;
  display: flex;
  align-items: center;
  justify-content: space-between;
/*  display: none;*/
}

.prizes-overlay--arrow{
  font-size: 6em;
  font-weight: 800;
  color: var(--magenta-bright);
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  
  pointer-events: all;
}

.prizes-overlay--arrow.is-hidden{
  opacity: 0;
  pointer-events: none;
}

#home-overlay--container.is-prizes .prizes-overlay--arrows{
/*  display: flex;*/
}

#prizes-overlay--container{
  display: none;
}
#prizes-overlay--container.is-visible{
  display: block;
}

#overlay-naming-card{
  background: var(--magenta-bright);
  border-radius: 3em;
  border: 1.5em solid var(--magenta-dark);
  margin-top: 8em;
  overflow: hidden;
  animation: namingCardAnimation .2s forwards;
}

@keyframes namingCardAnimation{
  0%{transform: scale(0.5) rotate(45deg)}
  50%{transform: scale(1.1) rotate(-5deg)}
  100%{transform: scale(1) rotate(0deg)}
}

#overlay-naming-card--text{
  color: white;
  font-size: 5.2em !important;
  line-height: 2.5em !important;
}

.kraki-shutter{
    position: absolute;
    width: 190%;
    height: 110%;
  -webkit-transition: all .5s ease-in;
  transition: all .8s ease-in;
}
#kraki-shutter-left{
    bottom: 0;
    left: 0;
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}
#kraki-shutter-right{
  -webkit-transform: rotate(180deg) translateX(20%);
  transform: rotate(180deg) translateX(20%);
}
#kraki-shutter-logo{
    max-height: 48%;
    max-width: 56%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  opacity: 1;
  transition: opacity .5s ease-in;
}
#preloading-container{
  background: transparent !important;
}

#preloading-container.is-hidden{
  pointer-events: none;
  display: none;
}

#preloading-container.animate-out #kraki-shutter-left{
  -webkit-transform: translate(-60%, 60%);
  transform: translate(-60%, 60%);
}

#preloading-container.animate-out #kraki-shutter-right{
  -webkit-transform: rotate(180deg) translate(-30%,30%);
  transform: rotate(180deg) translate(-30%,30%);
}

#preloading-container.animate-out #kraki-shutter-logo{
  opacity: 0;
}

#success-overlay--body.after-play #success-overlay--text,
#success-overlay--body:not(.after-play) #afterplay-overlay--text{
  display: none;
}
#afterplay-overlay--text{
  white-space: nowrap;
}

#basketball-score-container{
  position: absolute;
  top: 1.2em;
  font-size: 8em;
  width: 100%;
  display: flex;
  justify-content: center;
  font-weight: 800;
  font-style: italic;
  color: var(--magenta-bright);
  opacity: 0;
  -webkit-transform: scale(0.4,0.1);
  transform: scale(0.4,0.1);
  transition: all .2s ease-in-out; 
}
#basketball-score-container.is-visible{
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

#button-aftergame--form{
  position: fixed;
    bottom: 46em;
    left: 3em;
    width: 22em;
    height: 22em;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    display: none;
}

#home-overlay--container.is-playing #button-aftergame--form.is-visible{
  display: block;
  pointer-events: all;
  z-index: 9999;
  animation: aftergameButtonIn .5s forwards ease-in-out;
}
#ui-container.activity-active #button-aftergame--form.is-visible{
  animation: aftergameButtonOut .5s forwards ease-in-out;
}

@-webkit-keyframes aftergameButtonIn{
  0%{-webkit-transform: translateX(-200%)}
  100%{-webkit-transform: translateX(0%)}
}
@keyframes aftergameButtonIn{
  0%{transform: translateX(-200%)}
  100%{transform: translateX(0%)}
}

@-webkit-keyframes aftergameButtonOut{
  0%{-webkit-transform: translateX(0%)}
  100%{-webkit-transform: translateX(-200%)}
}
@keyframes aftergameButtonOut{
  0%{transform: translateX(0%)}
  100%{transform: translateX(-200%)}
}

#text-welcome--pet,
#text-welcome--sleeping{
  margin-top: 0 !important;
}

#animation_container {
  position:absolute;
  margin:auto;
  left:0;right:0;
}