#body{
    color: rgb(0, 25, 125);
    background-color: color-mix(in lch, rgba(255, 215, 0, 0.5), rgb(222, 222, 222) 45%);
    font-family:Georgia, 'Times New Roman', Times, serif;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 4fr 4fr;
    grid-template-rows: 1fr 4fr 4fr;
    overflow-x: hidden;
}
#body.openTab{
    grid-template-columns: 70vw 1fr 1fr;
}

#title{
    grid-column: 2 / -1;
    padding-left: 10px;
    animation: fade 1000ms forwards;
}
#content{
    grid-column: 2 / -1;
    grid-row: 2 / -1;
    padding-right: 10px;
    animation: fadePan 1000ms forwards;
}

#book{
    margin-top: 10px;
    padding: 0 1px 1px 0;
    border-radius: 0px 4px 4px 0px;
    border: 1px solid black;
    background-color: lightgray;
    align-content: center;
    grid-row: 1/1;
    grid-column: 1/1;
    max-width: 50px;
    z-index: 7;
}
#book.openTab{
    margin-left: 60vw;
}
#book>#cross{
    font-size: xx-large;
    border-radius: 0 3px 4px 0;
    border: none;
    color: gold;
    background-color: color-mix(in lch, maroon, white 25%);
    aspect-ratio: 0.7;
    height: 45px;
}

#tab{
    z-index: 1;
    position: fixed;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
}
#tab-title{
    background-color: maroon;
    color: gold;
    position: fixed;
}
#tab-title.openTab{
    width: 60vw;
    padding: 5px;
    transform: translateY(-7px);
    border: 1px solid gold;
    margin-left: -1px;
}
#tab-content{
    background-color: rgba(222, 185, 135, 0.5);
    color: black;
    width: 0;
    grid-row: 1 / -1;
    grid-column: 1 / 1;
}
#tab-content.openTab{
    width: 60vw;
    height: 95vh;
    padding-top: 60px;
    padding-left: 10px;
    overflow-wrap: break-word;
    overflow-y: auto;
    scrollbar-width: none;
}
.tabUl{
    margin-left: -20px;
}
.tabUl>li{
    list-style-type: circle;
    font-size: large;
}
.openLi{
    display: list-item;
}


@keyframes fadePan {
    0%{
        transform: translateY(75px);
        color: transparent;
    }
    100%{
        transform: translateY(0px);
        color: rgb(0, 25, 125);
    }
}
@keyframes fade {
    0%{
        color: transparent;
    }
    100%{
        color: rgb(0, 25, 125);
    }
}
@keyframes pan {
    0%{
        transform: translateY(75px);
    }
    100%{
        transform: translateY(0px);
    }
}