*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:black;
    overflow-x:hidden;
}

.wall{
    width:100vw;
    min-height:100vh;

    background-image:url("assets/background/wall.png");
    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
}

.bookshelf{
    position:relative;
    height:95vh;
    width:auto;
    aspect-ratio:1920 / 1080;
}
.shelf{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;
}

.bookshelf img:not(.shelf){
    position:absolute;
}


/* TOP SHELF */

.fallshrub{
    width:8%;
    left:15%;
    top:5%;
}

.fallvine{
    width:6%;
    right:15%;
    top:5%;
}

.mainbook{
    width:17%;
    left:42%;
    top:8%;
}

.case{
    width:17%;
    left:42%;
    top:25%;
}

.lock{
    width:4%;
    left:48.5%;
    top:22%;
}

.candle{
    width:7%;
    left:32%;
    top:18%;
}

.menu{
    width:18%;
    left:41%;
    top:2%;
}

.title{
    width:28%;
    left:36%;
    top:11%;
}

.comingsoon{
    width:16%;
    left:42%;
    top:33%;
}


/* SECOND SHELF */

.lantern{
    width:8%;
    left:28%;
    top:43%;
}

.bundlefont{
    width:24%;
    left:38%;
    top:40%;
}

.sweaters{
    width:12%;
    right:25%;
    top:42%;
}


/* THIRD SHELF */

.whatyouget{
    width:28%;
    left:36%;
    top:57%;
}

.stackofbooks{
    width:8%;
    left:30%;
    top:64%;
}

.pages{
    width:20%;
    left:45%;
    top:63%;
}


/* FOURTH SHELF */

.aboutfont{
    width:12%;
    left:30%;
    top:82%;
}

.threebooks{
    width:6%;
    left:45%;
    top:81%;
}

.pencils{
    width:7%;
    left:55%;
    top:80%;
}

.creampumpkin{
    width:7%;
    left:61%;
    top:81%;
}

.orangepumpkin{
    width:10%;
    left:67%;
    top:79%;
}


/* MOBILE */

@media(max-width:900px){

    .bookshelf{
        width:100vw;
    }

}