@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    font-family: "Press Start 2P";
}

body {
    width: 90vw;
}

p {
    text-align: center;
}

h1 {
    width: 90vw;
    text-align: center;
}

h2 {
    position: absolute;
    top: 50%;
    left: -10000px;
    transition: left 1s;
    z-index: 4;
    color:cornflowerblue;
}

img {
    width: 100px;
}



#player {
    z-index: 2;
    width: 32px;
    height: 32px;
    background-image: url("./sprite/Player\ idle.svg");
    background-position: 0px 43%;
    animation: movement .5s steps(6) infinite;
    transform: scale(2, 2);
    position: relative;

}

#bed {
    width: 58px;
    height: 77px;
    background-image: url("./sprite/bed.png");
    position: relative;
    left: calc(50% - 58px);
    top: 58px;
}

#cat {
    width: 32px;
    height: 32px;
    opacity: 0;
    z-index: 1;
    background: url("./sprite/Idle.png") left center;
    animation: play .5s steps(10) infinite;
    position: relative;
    top: calc(5% - 32px);
    left: calc(50% - 32px);
    transition: opacity 1s;
}

#cat2 {
    opacity: 0;
    z-index: 1;
    width: 32px;
    height: 32px;
    background: url(./sprite/Box3.png) left center;
    animation: play2 .5s steps(4) infinite;
    position: relative;
    top: calc(0% - 32px);
    left: calc(5% - 32px);
    transition: opacity 1s;
}

#cat3 {
    opacity: 0;
    width: 64px;
    height: 64px;
    background: url(./sprite/sleepingcat1.png) left center;
    animation: play3 .8s steps(6) infinite;
    position: relative;
    top: calc(-5% - 64px);
    left: calc(91% - 64px);
    transition: opacity 1s;
}

#scene {
    z-index: 1;
    background-image:url(./sprite/wallpaper.svg), url(./sprite/woodenFloorTile.png);
    background-position: 0 -11px, center;
    background-repeat: repeat-x, repeat;
    width: 512px;
    height: 512px;
    margin: 0 auto;
    border: 6px solid;
    border-image: url('./sprite/frame.svg') 10 stretch;
}

#door {
    z-index: 3;
    width: 65px;
    height: 60px;
    background-image: url(./sprite/Door.svg);
    position: relative;
    top: calc(-8% - 54px);
    left: calc((50% - 60px));
}

#fireplace {
    width: 44px;
    height: 42px;
    background-image: url(./sprite/fireplace.svg);
    position: relative;
    top: calc(-60% - 42px);
    left: calc(88% - 44px)
}

#sofaDown {
    width: 65px;
    height: 45px;
    background-image: url(./sprite/sofaDown.svg);
    position: relative;
    top: calc(0% - 45px);
    left: calc(50% - 65px);
}

#sofaRight {
    width: 26px;
    height: 60px;
    background-image: url(./sprite/sofaRight.svg);
    position: relative;
    top: -64px;
}

#sofaLeft {
    width: 26px;
    height: 60px;
    background-image: url(./sprite/sofaLeft.svg);
    position: relative;
    top: calc(-11% - 60px);
    left: calc(60% - 26px);
}

#sofaUp {
    width: 66px;
    height: 34px;
    background-image: url(./sprite/sofaUp.svg);
    position: relative;
    left: calc(70%);
    top: calc(53%);
}

#bookShelfDown {
    width: 43px;
    height: 72px;
    background-image: url(./sprite/bookshelfDown.svg);
    position: relative;
    top: calc(-68% - 72px);
}

#cat:hover {
    cursor: pointer;
}
#cat2:hover {
    cursor: pointer;
}
#cat3:hover {
    cursor: pointer;
}

@keyframes play {
    100% { background-position: -320px;}
}

@keyframes play2 {
    100% { background-position: -128px;}
}

@keyframes play3 {
    100% { background-position: -384px;}
}

@keyframes movement {
    100% {background-position-x: -192px;}
}