*{
    box-sizing: border-box;
}
body {
    margin: 0;
    box-sizing: border-box;
    font-family: times new roman;
    font-weight: normal;
}
body::-webkit-scrollbar{
    display: none;
}
#main {
    display: flex;
}
#book {
    position: fixed;
    font-size: 2rem;
    width: 8.7rem;
    height: 100%;
    background-position: 18rem 0;
    border-right: dashed 0.2rem #5e3d25;
}

#body {
    margin: 0 9rem;
    width: 50rem;
    height: fit-content;
    padding: 1rem;
}
#body h1 {
    margin: 0;
    border-bottom: solid 0.1rem #999;
    padding: 0.6rem;
    font-weight: normal;
    font-style: italic;
}
#navbar {
    margin-bottom: 0.6rem;
    position: relative;
}
#navbar a {
    height: 1.6rem;
    display: inline-block;
    border: solid 0.1rem #999;
    border-top: none;
    border-radius: 0 0 0.3rem 0.3rem;
    padding: 0.3rem 0.6rem;
    text-align: center;
    color: inherit;
    text-decoration:none;
    position: relative;
}
#navbar a:active {
   color: #fff;
}
#navbar a::before {
transform: scaleX(0);
transform-origin: bottom right;
}
 
#navbar a:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
 
#navbar a::before {
content: " ";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: #cf8888db;
z-index: -1;
transition: transform .7s ease;
}

h2 {
    font-weight: normal;
    display: inline-block;
    margin: 0 0 0.3rem 0;
}
img {
    border: 0.1rem solid #797979;
    filter: grayscale(75%);
    box-sizing: border-box;
    transition: 100ms all;
}

#books {
    width: 50rem;
    border: none;
    height: 13rem;
}
.catalog{
    height: fit-content;
}

/*iframe - catalog!*/
:root {
    --border: 1px solid #000;
}
body {
    margin: 0;
    background-color: #fff;
    background-image: none;
}

img:hover {
    filter: grayscale(25%);
}

.yr {
    display: flex;
    background-color: #fff;
    width: 100%;
    margin-bottom: 0.7rem;
}
.yr h1 {
    font-family: times new roman;
    font-weight: normal;
    writing-mode: sideways-lr;
    width: fit-content;
    padding: 0.5rem 0.3rem;
    margin: 0;
    font-size: 1em;
    font-stretch: expanded;
    text-align: right;
    border-right: 1px solid #888;
}
.yr .inner {
    margin: 0;
    background-color: #fff;
    text-align: center;
    height: fit-content;
    overflow-x: scroll;
    overflow-y: hidden;
    text-wrap: nowrap;
    padding: 0.3rem;
    display: flex;
}
.yr .inner img {
    height: 10em;
    margin: 0.1em;
}
.month h2 {
    height: 10rem;
    display: inline-block;
    writing-mode: sideways-lr;
    font-size: 1rem;
    font-weight: normal;
    text-align: right;
    border-right: 1px solid #888;
    padding: 0 0.2rem 0 0;
    margin: 0 0 0 0.2rem;
}

/*reviews section*/
#reviews{
    width: 50rem;
}
#posts{
    list-style-type: none;
}
.tags{
    margin-bottom: 0.8rem;
    border-bottom: 1px solid #888;
}
#reviews .tags button{
    background: none;
    border: none;
    font-family: inherit;
    color: inherit;
}
#reviews .tags button:hover{
    transform: translateY(-4px) rotate(4deg);
}
#reviews .tags button:active{
    scale: 90%;
}
.book{
    margin: 0 0 0.7rem 0;
}
.book .in {
    padding-top: 0.4rem;
    display: flex;
}
.book img {
    height: 10rem;
}
.book h1{
    font-size: 1rem;
    border-bottom: 1px solid #888;
    margin: 0;
    padding: 0!important;
}
.book h1 mark{
    background-color: #ffffff00;
    font-size: 0.8rem;
    font-style: normal;
}
.book .txt{
    height: 10rem;
    overflow: scroll;
    padding: 0.5rem;
    text-align: justify;
}
.book .txt::-webkit-scrollbar{
    display: none;
}
.book .txt p{
    margin: 0;
    padding: 0.35rem 0 0 0;
    text-align: justify
}