html, body {
    height  : 100%;
    padding : 0;
    margin  : 0;
}

body {
    overflow: hidden;
}

fieldset {
    display: grid;
}

#scene {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(196, 248, 255);
    width: 100%;
    height: 100%;
    perspective: 800px;
    perspective-origin: top;

    & >#table {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: brown;
        width: 800px;
        height: 250px;
        transform: rotateX(90deg);
        transform-style: preserve-3d;

        & >#hero-sheet {
            position : absolute;
            background-color: bisque;
            width: 400px;
            height: 550px;
            transform: rotateX(-85deg) translateZ(130px) translateY(-50px);
            transition: 0.2s;
            will-change: transform, box-shadow;
            border-radius: 1px;

            &:hover {               
                box-shadow: none ;
                scale: 100% ;
            }
        }
    }
}

.hero-sheet-position {
    transform: rotateX(0deg) rotateZ(-35deg) scale(20%) translateX(-150px) translateY(-800px)!important;
    top : 0px;

    &:hover {
        box-shadow: 0px 0px 3rem wheat !important;
        scale: 110% !important;
    }
}