#viewport {
    width: 100%;
    height: 294px;
    padding: 1px;
    overflow: hidden;
}

#viewport.holding {
    cursor: grabbing;
}

#fuck-css {
    position: absolute;
    height: 27px;
    width: 100%;
    background-color: var(--purple);
    top: 0px;
    z-index: 0;
}

.sona > .topbar {
    z-index: 1;
}

#vp-background {
    background-image: url("/res/asset/about/virtualpet/background.png");
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-position-x: center;
}

#sky {
    position: absolute;
    overflow: hidden;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: url("/res/asset/about/virtualpet/sky.GIF");
    animation: a 150s infinite reverse;
    animation-timing-function: steps(1150);
}

@keyframes a {
    from {background-position: 0% 0%}
    to {background-position: 2800% 2800%}
}

.box {
    width: 95%;
    display: block;
    margin: auto;
    margin-top: 2px;
}

.box.shake {
    animation: textbox-shake 0.1s 2;
}

.box label {
    display: block;
    margin-left: 3px;
    filter: drop-shadow(2px 2px 1px var(--black));
}

#pet-textbox {
    background-color: var(--black);
    resize: none;
    border: solid 1px var(--purple);
    border-radius: 5px;
    color: var(--yellow);
    height: 20px;
    width: 80%;
    font-family: "perfectdos", monospace;
}

#pet-textbox:focus, #pet-textbox:hover {
    border-color: var(--yellow);
    outline: none;
}

#send {
    position: absolute;
    right: 10px;
    height: 27px;
    line-height: 10px;
    border-width: 1px;
    border-radius: 5px;
}

#send:hover, #send:focus {
    letter-spacing: normal;
    outline: none;
    border-color: var(--yellow);
}

#mainbuttons {
    display: none;
    bottom: 0px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#mainbuttons > div {
    height: 85px;
    width: 85px;
    margin: 5px;
    cursor: pointer;
    background-image: url("/res/asset/about/virtualpet/bubble.gif");
    background-size: 100%;
    position: relative;
    filter: drop-shadow(0px 0px 8px var(--black));
}

#mainbuttons > div:hover {
    transform: scale(1.1);
}

#foodbutton > div, #batbutton > div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
}

#foodbutton > div {
    background-image: url("/res/asset/about/virtualpet/button_food.png");
    width: 74px;
    height: 32px;
}

#foodbutton > div.hover {
    background-position: 74px 0px;
    animation: float infinite 1.3s linear;
}

#batbutton > div {
    background-image: url("/res/asset/about/virtualpet/button_bat.png");
    width: 55px;
    height: 68px;
}

#batbutton > div.hover {
    background-position: 55px 0px;
    animation: float infinite 1.3s linear;
}

@keyframes float {
    0%, 100% {translate: 0px 1px}
    50% {translate: 0px -1px}
}

#mainbuttons.visible {
    display: flex;
}

#backbutton {
    width: 56px;
    height: 52px;
    margin: 6px;
    display: none;
    z-index: 200;
    position: relative;
    background-image: url("/res/asset/about/virtualpet/button_back.png");
    cursor: pointer;
}

#backbutton:hover {
    animation: backbutton-hover infinite 0.5s;
    animation-timing-function: steps(1);
}

@keyframes backbutton-hover {
    0%, 100% {background-position: 56px 0px}
    50% {background-position: 112px 0px}
}

#backbutton.visible {
    display: block;
}

#foodmenu.opening {
    animation: foodmenu-open 0.15s 1;
    animation-timing-function: steps(1);
    display: flex;
}

#foodmenu.closing {
    animation: foodmenu-open 0.2s 1;
    animation-timing-function: steps(1);
    display: flex;
    animation-direction: reverse;
}

#foodmenu.opening > div, #foodmenu.closing > div {display: none;}

#foodmenu {
    position: absolute;
    width: 225px;
    height: 94px;
    background-image: url("/res/asset/about/virtualpet/foodmenu.png");
    animation: foodmenu infinite 0.6s;
    animation-timing-function: steps(1);
    background-position: 0px 94px;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%);
    display: none;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0px 0px 8px var(--black));
}

#foodmenu.open {
    display: flex;
}

@keyframes foodmenu {
    0% {background-position: left center}
    33% {background-position: right center}
    66% {background-position: left bottom}
}

@keyframes foodmenu-open {
    0% {background-position: top left}
    50% {background-position: top right}
}

#foodmenu > div {
    height: 55px;
    width: 55px;
    margin: 5px;
    cursor: pointer;
    background-image: url("/res/asset/about/virtualpet/food.png");
}

#foodmenu > div:hover {
    transform: scale(1.2);
}

#foodmenu > div.opening {
    animation: food-fadein 0.1s 1;
    animation-timing-function: steps(2);
}

@keyframes food-fadein {
    from {filter: opacity(0)}
    to {filter: opacity(1)}
}

#cake:hover {background-position: right top;}
#banana {background-position: center left;}
#banana:hover {background-position: center right;}
#fish {background-position: bottom left;}
#fish:hover {background-position: bottom right;}

#item {
    cursor: grabbing;
    position: absolute;
    z-index: 99;
    pointer-events: none;
    display: none;
}

#item.visible {
    display: block;
}

#item.food {
    height: 55px;
    width: 55px;
    background: url("/res/asset/about/virtualpet/food.png") top right;
}

#item.bat {
    background: url("/res/asset/about/virtualpet/bat.png") top left;
    height: 261px;
    width: 168px;
}

#item.bat.hit {
    background-position: bottom left;
}

#item.bat.hit.blood {
    background-position: bottom right;
}

#item.bat.blood {
    background-position: top right;
}

#soup-can {
    width: 180px;
    height: 280px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-54%, -42%);
}

#soup {
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-image: url("/res/asset/about/virtualpet/soup.png");
    background-size: 1500%;
    position: absolute;
}

#viewport.holding #soup {
    cursor: grabbing !important;
}

#textbubble {
    width: 242px;
    height: 125px;
    background: url("/res/asset/about/virtualpet/textbox.png") bottom left;
    z-index: 100;
    position: absolute;
    left: 50%;
    top: -55px;
    transform: translate(-50%);
    display: none;
}

#textbubble.opening {
    display: block !important;
    animation: textbubble-open 0.3s 1;
    animation-timing-function: steps(1);
}

#textbubble.open {display: block !important;}

#textbubble.close {
    display: block !important;
    animation: textbubble-open 0.3s 1;
    animation-timing-function: steps(1);
    animation-direction: reverse;
}

#textbubble.close > p {display: none;}

@keyframes textbubble-open {
    0% {background-position: top left}
    25% {background-position: top right}
    50% {background-position: center left}
    75% {background-position: center right}
    100% {background-position: bottom left}
}

#textbubble p {
    margin: 0px;
    width: 80%;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    text-align: center;
    user-select: none;
}

@keyframes textbox-shake {
    0% {transform: translateX(-2px)}
    50% {transform: translateX(2px)}
    100% {transform: translateX(0px)}
}

/* SOUP ANIMS */
.gone-start {
    animation: gone 1.6s 1 !important;
    animation-timing-function: steps(1) !important;
}

.gone {
    /*display: none !important;*/
    background-position: -1158px -274px;
}

.gone-end {
    animation: gone-end 1.6s 1 steps(1) !important;
}

.idle-stand {
    animation: idle-stand 3s infinite;
    animation-timing-function: steps(1);
}

.attentive-start {
    animation: attentive-start 0.25s 1;
    animation-timing-function: steps(1);
}

.attentive {
    animation: attentive 3s infinite;
    animation-timing-function: steps(1);
}

.attentive-end {
    animation: attentive-end 0.25s 1;
    animation-timing-function: steps(1); 
}

.sitting-start {
    animation: sit-start 0.25s 1;
    animation-timing-function: steps(1);
}

.sitting {
    animation: sitting 3s infinite;
    animation-timing-function: steps(1);
}

.sitting-end {
    animation: sit-end 0.25s 1;
    animation-timing-function: steps(1); 
}

.talking-normal-start {
    animation: talking-normal-start 0.25s 1;
    animation-timing-function: steps(1); 
}

.talking-normal {
    animation: talking-normal 3s infinite;
    animation-timing-function: steps(1);
}

.talking-normal-end {
    animation: talking-normal-end 0.25s 1;
    animation-timing-function: steps(1); 
}

.talking-happy-start {
    animation: talking-happy-start 0.25s 1;
    animation-timing-function: steps(1); 
}

.talking-happy {
    animation: talking-happy 10s 1;
    animation-timing-function: steps(1);
}

.talking-happy-end {
    animation: talking-happy-end 0.25s 1;
    animation-timing-function: steps(1); 
}

.talking-sick-start {
    animation: talking-sick-start 0.25s 1;
    animation-timing-function: steps(1); 
}

.talking-sick {
    animation: talking-sick 3s infinite;
    animation-timing-function: steps(1);
}

.talking-sick-end {
    animation: talking-sick-end 0.25s 1;
    animation-timing-function: steps(1); 
}

.talking-angry-start {
    animation: talking-angry-start 0.25s 1;
    animation-timing-function: steps(1); 
}

.talking-angry {
    animation: talking-angry 3s infinite;
    animation-timing-function: steps(1);
}

.talking-angry-end {
    animation: talking-angry-end 0.25s 1;
    animation-timing-function: steps(1); 
}

.talking-sad-start {
    animation: talking-sad-start 0.25s 1;
    animation-timing-function: steps(1); 
}

.talking-sad {
    animation: talking-sad 3s infinite;
    animation-timing-function: steps(1);
}

.talking-sad-end {
    animation: talking-sad-end 0.25s 1;
    animation-timing-function: steps(1); 
}

.eating {
    animation: eat 1s 1;
    animation-timing-function: steps(1);
}

.talking-eviltransform-start {
    animation: evil-transform 1.2s 1;
    animation-timing-function: steps(1);
}

.evil {
    animation: evil-stand 1.5s infinite steps(1);
}

.talking-eviltransform {
    animation: evil-stand 1.5s infinite steps(1);
}

.talking-evil-start {
    animation: talking-evil-start 0.25s 1;
    animation-timing-function: steps(1); 
}

.talking-evil {
    animation: talking-evil 0.3s infinite;
    animation-timing-function: steps(1);
}

.talking-evil-end {
    animation: talking-evil-end 0.25s 1;
    animation-timing-function: steps(1); 
}

.cowering-start {
    animation: cowering-start 0.25s 1;
    animation-timing-function: steps(1); 
}

.cowering {
    animation: cowering 0.4s infinite;
    animation-timing-function: steps(1);
}

.cowering-end {
    animation: cowering-end 0.25s 1;
    animation-timing-function: steps(1); 
}

.spinning {
    animation: spin 0.7s 1;
    animation-timing-function: steps(1);
}

.hitting {
    background-position: -762px -1335px !important;
    width: 175px !important;
    transform: translate(15%, 3%);
}

.snapped-start {
    animation: snapped-start 0.25s 1 steps(1);
}

.snapped {
    animation: snapped 0.4s infinite steps(1);
}

.shake {
    animation: soup-shake 0.2s 1;
}

@keyframes idle-stand {
    0%, 85%, 100% {background-position: 0px 0px}
    88%, 97% {background-position: -193px 0px}
    91% {background-position: -385.5px 0px}
}

@keyframes talking-normal-start {
    0% {background-position: -1351px 0px}
    50% {background-position: -1544px 0px}
}

@keyframes talking-normal {
    0%, 85%, 100% {background-position: -1544px 0px}
    88%, 97% {background-position: -1737px 0px}
    91% {background-position: -1930px 0px}
}

@keyframes talking-normal-end {
    0% {background-position: -1351px 0px}
    50% {background-position: 0px 0px}
}

@keyframes talking-angry-start {
    0% {background-position: -193px -548px}
    50% {background-position: -386px -548px}
}

@keyframes talking-angry {
    0%, 85%, 100% {background-position: -386px -548px}
    88%, 97% {background-position: -579px -548px}
    91% {background-position: -772px -548px}
}

@keyframes talking-angry-end {
    0% {background-position: -386px -548px}
    50% {background-position: -193px -548px}
}

@keyframes talking-sad-start {
    0% {background-position: -965px -548px}
    50% {background-position: -1158px -548px}
}

@keyframes talking-sad {
    0%, 85%, 100% {background-position: -1158px -548px}
    88%, 97% {background-position: -1351px -548px}
    91% {background-position: -1544px -548px}
}

@keyframes talking-sad-end {
    0% {background-position: -1158px -548px}
    50% {background-position: -965px -548px}
}

@keyframes talking-happy-start {
    0% {background-position: -2509px -548px}
    50% {background-position: 0px -822px}
}

@keyframes talking-happy {
    0% {background-position: -193px -822px}
    20% {background-position: -386px -822px}
    21% {background-position: -579px -822px}
    22% {background-position: -772px -822px}
}

@keyframes talking-happy-end {
    0% {background-position: -965px -822px}
    50% {background-position: -1158px -822px}
}

@keyframes talking-sick-start {
    0% {background-position: -1351px -822px}
    50% {background-position: -1544px -822px}
}

@keyframes talking-sick {
    0%, 30%, 60% {background-position: -1737px -822px}
    10%, 40%, 70% {background-position: -1930px -822px}
    20%, 50%, 80% {background-position: -2123px -822px}
    90%, 98% {background-position: -2316px -822px}
    94% {background-position: -2509px -822px}
}

@keyframes talking-sick-end {
    0% {background-position: -1544px -822px}
    50% {background-position: -1351px -822px}
}

@keyframes attentive-start {
    0% {background-position: -579px 0px}
    50% {background-position: -772px 0px}
}

@keyframes attentive {
    0%, 85%, 100% {background-position: -772px 0px}
    88%, 97% {background-position: -965px 0px}
    91% {background-position: -1158px 0px}
}

@keyframes attentive-end {
    0% {background-position: -579px 0px}
    50% {background-position: 0px 0px}
}

@keyframes gone {
    0% {background-position: -2123px 0px}
    10% {background-position: -2316px 0px}
    20% {background-position: 0px -274px}
    30% {background-position: -193px -274px}
    40% {background-position: -386px -274px}
    50% {background-position: -579px -274px}
    60% {background-position: -772px -274px}
    70% {background-position: -965px -274px}
    80% {background-position: -1158px -274px}
}

@keyframes gone-end {
    80% {background-position: -2123px 0px}
    70% {background-position: -2316px 0px}
    60% {background-position: 0px -274px}
    50% {background-position: -193px -274px}
    40% {background-position: -386px -274px}
    30% {background-position: -579px -274px}
    20% {background-position: -772px -274px}
    10% {background-position: -965px -274px}
    0% {background-position: -1158px -274px}
}

@keyframes sit-start {
    0% {background-position: -1351px -274px}
    50% {background-position: -1544px -274px}
}

@keyframes sitting {
    0%, 85%, 100% {background-position: -1737px -274px}
    88%, 97% {background-position: -1930px -274px}
    91% {background-position: -2123px -274px}
}

@keyframes sit-end {
    0% {background-position: -1544px -274px}
    50% {background-position: -1351px -274px}
}

@keyframes eat {
    0% {background-position: -2316px -274px}
    10% {background-position: -2509px -274px}
    20% {background-position: 0px -548px}
}

@keyframes cowering-start {
    0% {background-position: -1737px -548px}
    50% {background-position: -1930px -548px}
}

@keyframes cowering {
    0% {background-position: -1930px -548px}
    33% {background-position: -2123px -548px}
    66% {background-position: -2316px -548px}
}

@keyframes cowering-end {
    0% {background-position: -1930px -548px}
    50% {background-position: -1737px -548px}
}

@keyframes spin {
    0% {background-position: -386px -1096px}
    6.25% {background-position: -579px -1096px}
    12.5% {background-position: -772px -1096px}
    18.75% {background-position: -965px -1096px}
    25% {background-position: -1158px -1096px}
    31.25% {background-position: -1351px -1096px}
    37.5% {background-position: -1544px -1096px}
    43.75% {background-position: -1737px -1096px}
    50% {background-position: -1930px -1096px}
    56.25% {background-position: -2123px -1096px}
    62.5% {background-position: -2316px -1096px}
    68.75% {background-position: -2509px -1096px}
    75% {background-position: 0px -1370px}
    81.25% {background-position: -193px -1370px}
    87.5% {background-position: -386px -1370px}
    93.75% {background-position: -579px -1370px}
    100% {background-position: -386px -1096px}
}

@keyframes evil-transform {
    0% {background-position: -965px -1370px}
    14% {background-position: -1158px -1370px}
    28% {background-position: -1351px -1370px}
    42% {background-position: -1544px -1370px}
    56% {background-position: -1737px -1370px}
    70% {background-position: -1930px -1370px}
    84% {background-position: -2509px -1370px}
    98% {background-position: -386px -1644px}
}

@keyframes evil-stand {
    0% {background-position: -386px -1644px;}
    8% {background-position: -579px -1644px}
    16% {background-position: -772px -1644px}
    24%, 72% {background-position: -2509px -1370px}
    32%, 80% {background-position: 0px -1644px}
    40%, 88% {background-position: -193px -1644px}
    48% {background-position: -1930px -1370px}
    46% {background-position: -2123px -1370px}
    64% {background-position: -2316px -1370px}
}

@keyframes talking-evil-start {
    0% {background-position: -965px -1644px}
    33% {background-position: -1158px -1644px}
    66% {background-position: -1351px -1644px}
}

@keyframes talking-evil {
    0% {background-position: -1544px -1644px}
    33% {background-position: -1737px -1644px}
    66% {background-position: -1930px -1644px}
}

@keyframes talking-evil-end {
    0% {background-position: -1351px -1644px}
    33% {background-position: -1158px -1644px}
    66% {background-position: -965px -1644px}
}

@keyframes snapped-start {
    0% {background-position: -2123px -1644px}
    50% {background-position: -2316px -1644px}
}

@keyframes snapped {
    0% {background-position: -2509px -1644px}
    33% {background-position: -2px -1918px}
    66% {background-position: -195px -1918px}
}

@keyframes soup-shake {
    0% {translate: -4px 0px}
    33% {translate: 4px 0px}
    66% {translate: 0px 0px}
}