.pet_container {

    border-radius: 5%;
    display: flex;
    flex-direction: column; 
    justify-content: flex-end; 
    
    padding: 10px;

    position: relative;
    margin: auto;
    height: 600px;
    width: 600px;
    max-height: 100vh;
    max-width: 100vh;

    /* BACKGROUND IMAGE */
    background-image: url("https://jakechirak.com/gaichuchi/gaichu-bg.png");
    background-position: center;
    background-size: 100%;
    /* BACKGROUND COLOR (this is going to be when image is not loading) */
    background-color: black;

}

.pet_container::after{
    position: absolute;
    top: -0.6rem; 
    bottom: -0.6rem;
    left: -0.6rem; 
    right: -0.6rem;
    /* BORDER COLOR */
    background: linear-gradient(90deg,rgba(88, 118, 252, 1) 0%, rgba(0, 26, 233, 1) 50%, rgba(0, 15, 137, 1) 100%);
    content: '';
    z-index: -1;
    border-radius: 5.5%;
}

.page_fill {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;

    /* PAGE BACKGROUND COLOR */
    background-color: #0d0642;
    height: 100%;
    width: 100%;
}

.pet_bar {
    text-align: center;
}

.pet_bar img {
    margin: auto;
    width: 100%;

}

body {
    margin: 0;
    padding: 0;
}

#pet_jump {
    display: block;
    margin: auto;
    animation: 4s ease 0s infinite alternate sun-rise;
}

#pet_jump_fast {
    display: block;
    margin: auto;
    animation: 100ms ease 0s infinite alternate jump-fast ;
}

#pet_walk {
    display: block;
    margin: auto;
    animation: 5s linear 0s infinite alternate walk;
}

#pet_walk_slow {
    display: block;
    margin: auto;
    animation: 20s linear 0s infinite alternate walk_slow;
}

#pet_shake {
    display: block;
    animation: 1s linear 0s infinite alternate shake;
}

#pet_dead {
    display: block;
}

#pet_dead_flies {
  
  display: block;
  background-image: url('./ouhchi-flies.gif');
  background-repeat: no-repeat;
  background-position: 0px -2em;
}

#pet_shake_small {
    display: block;
    animation: 200ms linear 0s infinite alternate shake;
}

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

.size1 img {
  margin: auto;
  margin-top: 12em;
  min-width: 30em;
  min-height: 30em;
  aspect-ratio: 1 / 1;
}

.pet {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
    display: none;
}

.pet img {

    max-width: 50vh;
    max-height: 50vh;
}


@keyframes sun-rise {
  0% {
    /* pushes the sun down past the viewport */
    transform: translateY(-10rem);
  }
  10% {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
    20% {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
    30% {
    /* returns the sun to its default position */
    transform: translateY(-1rem);
  }
    40% {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
    50% {
    /* returns the sun to its default position */
    transform: translateY(-1rem);
  }
    60% {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
    70% {
    /* returns the sun to its default position */
    transform: translateY(-1rem);
  }
}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

#pet_vibrate {
    display: block;
    animation: vibrate 200ms ease 0s infinite normal none;
}

@keyframes walk {
  0% {
    transform: rotateY(0deg);
  }
  6% {
    transform: translateX(0rem);
  }
  50% {
    transform: translateX(10rem);
  }
  55% {
    transform: rotateY(180deg);
  }
  60% {
    transform: translateX(-10rem);
  }
  100% {
    transform: translateX(0rem); 
  }
}



@keyframes walk_slow {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70% { transform: translateX(-20px); }
    20%, 40%, 60% { transform: translateX(20px); }
    80% { transform: translateX(20px); }
    90% { transform: translateX(-20px);} 
}

.shake-horizontal-normal { 
    animation: shake-horizontal-normal 10s linear 0s infinite normal none; 
}

@keyframes jump-fast {
    0% { transform: translateY(0); }
  100% { transform: translateY(-100px);}
}

.slide-top-normal { 
    animation: slide-top-normal 200ms ease 0s infinite normal none; 
}