:root {
    --rotate: 7deg
}

body {
    padding: 0;
    margin: 0;
}

center {
    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#shelfContainingDiv {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#shelfContainingDiv img {
    height: 50%;
}

#shelvesHolder {
    position: absolute;
    height: 50%;
    aspect-ratio: 802/1057;
    /*background-color: #ff000063;*/
}
body {
    padding: 0;
    margin: 0;
}

center {
    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#shelfContainingDiv {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#shelfContainingDiv img {
    height: 80%;
}

#shelvesHolder {
    position: absolute;
    height: 80%;
    aspect-ratio: 802/1057;
}

#shelfOne, #shelfTwo, #shelfThree, #shelfFour {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;

    & img {
        cursor: pointer;
        &:hover {
            rotate: var(--rotate);
            filter: drop-shadow(0 0 20rem white)
        }
    }
}

[data-size="large"] {
    width: 20%;
}

[data-size="medium"] {
    width: 10%;
}

[data-size="small"] {
    width: 5%;
}

#shelfOne {
    height: 25%;
}

#shelfTwo {
    height: 21%;
    & img:nth-child(2) {
        height: 60%;
    }
}

#shelfThree {
    height: 22%;
    & img {
        height: 50%;
    }
}

#shelfFour {
    height: 22%;
    justify-content: end;
    & img {
        height: 30%;
    }
}