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

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

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

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

.wallbg{
position:absolute;
inset:0;

```
width:100%;
height:100%;

object-fit:cover;
z-index:0;
```

}

.bookshelf{
position:relative;
z-index:1;

```
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;
}

/* =========================
FONTS ALWAYS ON TOP
========================= */

.title,
.comingsoon,
.coloringbundlefont,
.whatyougetfont,
.aboutfont{
z-index:50;
}

/* =========================
TOP SHELF
========================= */

.fallshrub{
left:33.9611%;
top:2.7759%;
width:16%;
}

.fallvine{
left:48.9898%;
top:8.50118%;
width:25%;
}

.mainbook{
left:46.3549%;
top:12.4915%;
width:15%;
}

.case{
left:45.4766%;
top:22.9011%;
width:17%;
}

.lock{
left:51.6247%;
top:25.677%;
width:4%;
}

.candle{
left:39.0357%;
top:26.718%;
width:10%;
}

.menu{
left:44.5983%;
top:6.24576%;
width:15%;
}

.title{
left:41.573%;
top:13.5325%;
width:20%;
}

.comingsoon{
left:47.7211%;
top:33.8312%;
width:13%;
}
/* =========================
SECOND SHELF
========================= */

.lantern{
left:40.6947%;
top:46.3228%;
width:8%;
}

.coloringbundlefont{
left:44.9886%;
top:44.5878%;
width:15%;
}

.foldedsweaters{
left:53.8693%;
top:45.6288%;
width:9%;
}

/* =========================
THIRD SHELF
========================= */

.whatyougetfont{
left:43.0369%;
top:62.1107%;
width:19%;
}

.stackofbooks{
left:42.2561%;
top:62.6311%;
width:11%;
}

.pages{
left:50.2585%;
top:63.3251%;
width:12%;
}

/* =========================
FOURTH SHELF
========================= */

.aboutfont{
left:43.1344%;
top:80.154%;
width:7%;
}

.threebooks{
left:44.9196%;
top:80.0329%;
width:7%;
}

.coloringpencils{
left:48.0787%;
top:80.5594%;
width:7%;
}

.creampumpkin{
left:52.6006%;
top:82.9299%;
width:6%;
}

.orangepumpkin{
left:54.7476%;
top:79.6335%;
width:8%;
}

/* =========================
MOBILE
========================= */

@media(max-width:900px){

.wall{
    height:100vh;
    overflow:hidden;

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

.bookshelf{
    height:95vh;
    width:auto;

    left:0;
    top:0;
}

}