bookshelf template [css]

/*coded on an easy bake oven by kalachuchi.neocities*/
/*NOTE: as much as possible don't touch the scrolling of elements, because it messes up the spacing and functionality*/

body {
    font-family: ms ui gothic;
    overflow-x: hidden;
    margin: 0;
    background: #d8d5db;
    color: #2d3142;
    overflow: hidden;
}

:root {
    --border-1: 0.1rem solid #2d3142;
    --h1-bg: #b6cfe8;
    --nav-bg: #dceefe;
    --scrollbar-border: 0.05em solid #787b87;
    --scrollbar-bg-1: linear-gradient(
        0deg,
        rgba(154, 175, 208, 1) 10%,
        rgba(236, 242, 249, 1) 57%,
        rgba(182, 207, 232, 1) 97%
    );
    --scrollbar-bg-2: rgba(154, 175, 208, 0.32);
}

#main {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: var(--border-1);
    border-radius: 0.8em 0 0.8em 0;
    padding: 1em;
    width: fit-content;
    height: fit-content;
    box-shadow: 0 0 0.3rem 0.1em #6f757d;
}
#main h1{
    font-size: 2em;
    margin: 0.3em;
}
#main h4 /*footer credits! do not edit*/ {
    font-size: 0.8em;
    margin: 0.3em 0 0 0;
    text-align: center;
}
a{
    color: inherit;
}
a:hover{
    text-decoration: none;
}
a:active{
    color: #fff;
}

#wrap {
    display: flex;
    justify-content: space-between;
    width: 65em;
    height: 35em;
}

/*menu on the left*/
#nav {
    width: 10em;
    background: var(--nav-bg);
    overflow: scroll;
}
#nav h2 {
    border-top: var(--border-1);
    border-bottom: var(--border-1);
    background-color: #fff;
    margin: 0;
    padding: 0.2em;
    font-size: 1em;
    font-style: italic;
}
#nav p {
    margin: 0;
    padding: 0.4em;
}
#nav::-webkit-scrollbar {
    display: none;
}

/*all the books*/
#bookshelf {
    width: 54em;
    background-color: #fff;
    border: var(--border-1);
    overflow: scroll;
    overflow-x: hidden;
}
.shelf-wrap {
    height: fit-content;
}
.shelf-wrap h2 {
    width: fit-content;
    height: fit-content;
    margin: 0.6em 0.6em 0 0.6em;
    font-size: 1.5em;
    color: #fff;
    text-shadow:
        -1px 0 #000,
        0 1px #000,
        1px 0 #000,
        0 -1px #000;
}
.shelf {
    height: 14em;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;
    align-content: flex-start;
}
.book {
    border: var(--border-1);
    max-width: 8em;
    height: 12em;
    transition: max-width 400ms;
    display: flex;
    overflow: clip;
    background-color: #fff;
    margin: 0.4em;
}
.book .cover {
    border-right: var(--border-1);
    height: 12em;
    display: block;
    position: relative;
}
.cover img {
    height: 12em;
    width: 8em;
    object-fit: cover;
    object-position: center;
    filter: grayscale(80%) brightness(120%);
    transition: 0.4s all;
}
.cover img:hover,
.cover:hover {
    filter: grayscale(0%);
}
.book .text {
    overflow: scroll;
    overflow-x: hidden;
    padding: 0.5em;
}
.text::-webkit-scrollbar {
    display: none;
}
.book:hover {
    max-width: 30rem;
}

::-webkit-scrollbar {
    width: 0.8em;
    height: 0.5em;
}
::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 0.4em 0 #fff;
    border: var(--scrollbar-border);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-bg-1);
    border-left: var(--scrollbar-border);
}
::-webkit-scrollbar-track:horizontal {
    background: var(--scrollbar-bg-2);
    border: none;
    border-top: var(--scrollbar-border);
    border-bottom: var(--scrollbar-border);
}

#bookshelf::-webkit-scrollbar {
width: 14px;
height: 10px;
}

#bookshelf::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, rgba(238,238,238,1) 38%, rgba(206,206,206,1) 62%);
border: 1.5px solid #888888;
border-radius: 5px;
}

#bookshelf::-webkit-scrollbar-track {
background: linear-gradient(90deg, rgba(230,230,230,1) 6%, rgba(240,240,240,1) 18%);
}

#bookshelf::-webkit-scrollbar-button {
display: block;
width: 14px;
height: 16px;
}

#bookshelf::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://dl.dropbox.com/s/vtnpkuealr2f7u4/whc8iy3_d.png");
border: 1.5px solid #888888;
border-radius: 5px;
}

#bookshelf::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}

#bookshelf::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}

#bookshelf::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://dl.dropbox.com/s/vtnpkuealr2f7u4/whc8iy3_d.png");
border: 1.5px solid #888888;
border-radius: 5px;
}