document.less

html{
    background:#3f80b6;
    overflow: hidden;
    font: 16px sans-serif;
}
body{
    margin: 0;
}
.app{
    display: block;
}
canvas{
    position: absolute;
    box-shadow:0 0 0 2px blue;
    top:0;
    left:0;
    right:0;
    margin:0 auto;
}
.single-box{
    margin:140px auto 0;
    width: 200px;
    height: 500px;
    // box-shadow:0 0 0 2px blue;
    position: relative;

    position: absolute;
    bottom:0;
    left:0;
    right:0;

    .main{
        // width: 140px;
        // height: 200px;

        --main-width: 270px;
        --main-height: 284px;
        width: var(--main-width);
        height: var(--main-height);

        position: absolute;
        left: calc( 200px / 2 - var(--main-width) / 2 );
        top: calc( 240px - var(--main-height) );
        // box-shadow:0 0 0 2px red;

        cursor: pointer;
        transform-origin: 50% 400px;
        background: no-repeat 50% 50%;
        background-size:cover;
        background-image: url(sakana.png);
        // background-image: url(FYlpb3dacAAhuxs.jpg);
        &.chisato{
            --main-width: 150px;
            --main-height: 300px;
            background-image: url(chisato.png);
        }
    }
    .bed{
        width: 160px;
        height: 20px;
        position: absolute;
        left: 20px;
        bottom: 0;
        // box-shadow:0 0 0 2px green;
        background: rgba(255,255,255,.5);
        border-radius: 2px;
        cursor: pointer;
    }
}