* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: rgb(124, 124, 124);
}
.sidebar-bar {
    position: fixed;
    left: 0;
    top: 0;
    width: 40px;
    height: 100vh;
    background-color: black;
    box-shadow:
        5px 5px 5px 0px rgba(0, 0, 0, 0.3),
        3px 3px 3px 0px rgba(0, 0, 0, 0.2),
        1px 1px 2px 0px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    z-index: 2000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-bar .sidebar-arrow {
    color: white;
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    opacity: 1;
    position: relative;
    z-index: 1;
}
.sidebar-bar.hidden-arrow .sidebar-arrow {
    display: none;
}
.sidebar-bar:hover {
    box-shadow:
        60px 60px 60px 0px rgba(0, 0, 0, 0.3),
        40px 40px 40px 0px rgba(0, 0, 0, 0.25),
        20px 20px 20px 0px rgba(0, 0, 0, 0.2),
        10px 10px 10px 0px rgba(0, 0, 0, 0.15);
}
.sidebar {
    position: fixed;
    left: -360px;
    top: 0;
    width: 360px;
    height: 100vh;
    background-color: black;
    box-shadow: none;
    transition: left 0.3s ease, box-shadow 0.3s ease;
    z-index: 2001;
    overflow-y: auto;
    cursor: pointer;
}
.sidebar .sidebar-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
}
.sidebar.open {
    left: 40px;
    box-shadow:
        60px 60px 60px 0px rgba(0, 0, 0, 0.3),
        40px 40px 40px 0px rgba(0, 0, 0, 0.25),
        20px 20px 20px 0px rgba(0, 0, 0, 0.2),
        10px 10px 10px 0px rgba(0, 0, 0, 0.15);
}
.sidebar-content {
    padding: 20px;
    cursor: default;
    color: white;
    font-family: 'Courier New', Courier, monospace;
}
.sidebar-content h3 {
    margin-bottom: 15px;
    margin-top: 20px;
    font-size: 16px;
}
.sidebar-content h3:first-child {
    margin-top: 0;
}
.sidebar-content label {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
}
.sidebar-content input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid white;
    background-color: black;
    position: relative;
    vertical-align: middle;
}
.sidebar-content input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-color: white;
}
.sidebar-content input[type="radio"] {
    margin-right: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid white;
    border-radius: 50%;
    background-color: black;
    position: relative;
    vertical-align: middle;
}
.sidebar-content input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
}
.shelf-container {
    width: calc(100vw - 40px);
    margin-left: 40px;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 15px;
    padding: 20px;
    overflow-y: auto;
}
.shelf-item {
    height: 270px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.book {
    position: relative;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.3);
    border-style: solid;
    flex-direction: column;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    padding: 10px 10px;
    overflow: hidden;
    gap: 8px;
    background: linear-gradient(to right,
        rgb(200, 200, 200) 0%,
        whitesmoke 20%,
        whitesmoke 80%,
        rgb(200, 200, 200) 100%);
    box-shadow:
        -5px -5px 5px 0px rgba(0, 0, 0, 0.3),
        -3px -3px 3px 0px rgba(0, 0, 0, 0.2),
        -1px -1px 2px 0px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.book:hover {
    box-shadow:
        -60px -60px 60px 0px rgba(0, 0, 0, 0.3),
        -40px -40px 40px 0px rgba(0, 0, 0, 0.25),
        -20px -20px 20px 0px rgba(0, 0, 0, 0.2),
        -10px -10px 10px 0px rgba(0, 0, 0, 0.15);
}
.book-title {
    font-size: 12px;
    font-family: 'Courier New', Courier, monospace;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: center;
    text-transform: uppercase;
}
.book-author {
    font-family:'Courier New', Courier, monospace;
    font-size: 12px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: center;
}
.book-index {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 0;
    pointer-events: none;
}
.fiction-index {
    border-top: 1px dashed black;
    border-bottom: 1px dashed black;
}
.nonfiction-index {
    border-top: 3px double black;
    border-bottom: 3px double black;
}
.letter-marker {
    font-family: 'Courier New', Courier, monospace;
    width: 40px;
    background: black;
    color: white;
    font-size: 24px;
}
.book-card {
    position: fixed;
    top: 100px;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, top 0.4s ease;
}
.book-card.visible {
    pointer-events: auto;
    opacity: 1;
    top: 0;
}
.book-card-content {
    background: linear-gradient(to right,
        rgb(180, 180, 180) 0%,
        whitesmoke 5%,
        whitesmoke 100%);
    border: 1px solid rgb(0, 0, 0);
    box-shadow:
        5px 5px 5px 0px rgba(0, 0, 0, 0.3),
        3px 3px 3px 0px rgba(0, 0, 0, 0.2),
        1px 1px 2px 0px rgba(0, 0, 0, 0.1);
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
    font-family: 'Courier New', Courier, monospace;
    cursor: pointer;
    width: 500px;
    height: 800px;
    transition: box-shadow 0.3s ease;
    display: flex;
}
.book-card-content:hover {
    box-shadow:
        60px 60px 60px 0px rgba(0, 0, 0, 0.3),
        40px 40px 40px 0px rgba(0, 0, 0, 0.25),
        20px 20px 20px 0px rgba(0, 0, 0, 0.2),
        10px 10px 10px 0px rgba(0, 0, 0, 0.15);
}
.book-card-edge {
    width: 5%;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 0;
    box-sizing: border-box;
}
.book-card-edge.fiction {
    border-top: 1px dashed black;
    border-bottom: 1px dashed black;
    border-right: 1px dashed black;
}
.book-card-edge.nonfiction {
    border-top: 3px double black;
    border-bottom: 3px double black;
    border-right: 3px double black;
}
.book-card-inner {
    margin: 30px;
    padding: 20px;
    padding-top: 180px;
    height: calc(100% - 60px);
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.book-card-inner.fiction {
    border: 1px dashed black;
}
.book-card-inner.nonfiction {
    border: 3px double black;
}
.book-card-top {
    text-align: center;
}
.book-card-content h2 {
    margin: 0 0 10px 0;
    font-size: 24px;
    text-transform: uppercase;
}
.card-author {
    margin: 0;
    font-size: 18px;
}
.book-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 14px;
}
.card-year {
    margin: 0;
}
.card-genre {
    margin: 0;
    text-transform: uppercase;
}
.card-pages {
    margin: 0;
}