html{
position:relative;
height:100%;min-height:100%
}
body{
background-color:rgb(255, 247, 249);
font:16px 'Solway';
color:rgb(109, 95, 84);
text-align:justify
}
@font-face{font-family:'Telop';src:url('fonts/telop-.ttf')}
::selection{background:rgb(255, 217, 229)}
img{-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}
a{text-decoration:none;color:rgb(232, 139, 171);border-bottom:1px dotted rgb(232, 139, 171)}
a:hover{position:relative;top:1px;left:1px}
table a{text-decoration:none;color:#008000;border-bottom:none;&::before{content:'Review ▶ '}}
mark{background-color:rgba(253, 226, 229, 0.7);color:rgb(109, 95, 84)}
p{margin:0 0 10px 0}
table{width:100%;margin-bottom:10px}
#table-content{padding:5px 10px;background-color:rgb(253, 226, 229);text-transform:uppercase}
#table-content b{color:rgb(232, 139, 171)}
.divider{
width:519px;height:19px;
margin:15px auto;
background-image:url('img_book-journal/divider-ii.gif')
}
/*--------------------------------------------------------
SCROLL-BAR
--------------------------------------------------------*/
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-thumb{background-color:rgb(255, 223, 226);border:1px dotted rgb(255, 199, 206)}
/*--------------------------------------------------------
BOOK-JOURNAL
--------------------------------------------------------*/
main{
width:1386px;
margin:auto;margin-top:10px;
position:relative
}
#book-journal{
width:1365px;height:935px;margin:auto;
background-image:url('img_book-journal/fondo-diario.gif');
border:1px solid rgb(255, 198, 211);
border-radius:8px;
box-shadow:0px 0px 3px rgba(0, 0, 0, 0.302);
position:relative;
display:flex;flex-wrap:column;
justify-content:center
}
#center{
width:50px;height:830px;
background:url('img_book-journal/center-.png') 0px 0px / contain;
position:absolute;
top:50px;left:657px;z-index:2;
filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.302))
}
#line{
width:527px;height:53px;
margin:auto;margin-bottom:15px;
background-image:url('img_book-journal/line-.gif');
background-size:527px;
}
#navigation{
width:40px;
position:absolute;top:50px;right:0;
& a{border-bottom:none}}
#navigation button{
padding:10px;padding-bottom:0;
border:1px solid rgb(211, 211, 211);border-left:none;
border-radius:0 10px 10px 0;
color:rgb(255, 255, 255);font-weight:900;
text-transform:uppercase;
text-shadow:2px 1px 1px #FFAAB4, 1px -2px 0 #FFAAB4, -1px 1px 0 #FFAAB4, -1px -1px 0 #FFAAB4, 1px 0px 0 #FFAAB4, 0px 2px 0 #FFAAB4, -2px 0px 0 #FFAAB4, 0px -2px 0 #FFAAB4, 2px 2px 2px #DD658B00;
writing-mode:vertical-rl;
text-orientation:mixed;
cursor:pointer;
& p{filter:drop-shadow(1px 1px 0px #FFF) drop-shadow(-1px -1px 0px #FFF) drop-shadow(-1px 1px 0px #FFF) drop-shadow(1px -1px 0px #FFF)}
&:hover{color:rgb(255, 246, 83)}}
/*--------------------------------------------------------
TITLE-SUB-TITLE
--------------------------------------------------------*/
.title, .sub-title, .sub-title-small{
width:100%;
color:rgb(255, 255, 255);
font-family:'Telop';font-weight:900;
text-align:center;
text-transform:uppercase;
filter:drop-shadow(2px 2px 0px #FFC7CE) drop-shadow(-2px -2px 0px #FFC7CE) drop-shadow(-2px 2px 0px #FFC7CE) drop-shadow(2px -2px 0px #FFC7CE)
}
.title{margin:10px 0;font-size:35px}
.title.i{margin-top:25px}
.sub-title{margin-bottom:10px;font-size:27px}
/*--------------------------------------------------------
LEFT-SECTION
--------------------------------------------------------*/
#i, #ii{
width:47%;
box-shadow:0px 0px 3px rgba(0, 0, 0, 0.302);
background-color:rgb(255, 247, 249);
border-radius:10px;
overflow:hidden;
position:relative
}
#border-i{
width:100%;height:74px;
background-image:url('img_book-journal/fondo-i.png');
background-repeat:repeat-x;
position:absolute;z-index:1;
}
#i p{margin:10px 35px 10px 20px}
#i li{margin:0 35px 0 20px;list-style:url('img_book-journal/li-.gif') outside}
/*--------------------------------------------------------
IF-CONTAINER
--------------------------------------------------------*/
.if-container{
width:100%;
display:inline-block;
margin-top:65px;margin-left:35px;
overflow:auto
}
.ifrm{
width:100%;height:815px;
border:none;
display:block
}
/*--------------------------------------------------------
OTHER-SETTINGS
--------------------------------------------------------*/
.title-book{margin-bottom:10px;
& font{width:fit-content;margin:0 10px 0 5px;
font-family:'Fredoka';
font-size:25px;font-weight:900;
color:rgb(255, 255, 255);
text-shadow:2px 1px 1px #E88BaA, 1px -2px 0 #E88BaA, -1px 1px 0 #E88BaA, -1px -1px 0 #E88BaA, 1px 0px 0 #E88BaA, 0px 2px 0 #E88BaA, -2px 0px 0 #E88BaA, 0px -2px 0 #E88BaA, 2px 2px 2px #DD658B00;
border-bottom:2px dashed #E88BaA
}}
#warning{
margin:15px 0;
color:#E88BAB;font-weight:900;
text-align:center;
text-transform:uppercase;
cursor:pointer
}
.warning-base{
display:none;
width:100%;height:100%;
background-color:rgba(0,0,0,0.35);
overflow:auto;
position:fixed;
z-index:3;
top:0;left:0;
}
.warning-content{
width:460px;margin:15% auto;
background-color:rgb(255, 247, 249);
border:2px dashed rgb(232, 139, 171);
border-radius:10px;
box-shadow:0 0 0 5px rgb(255, 247, 249);
filter:drop-shadow(1px 1px 0px #E88BAB) drop-shadow(-1px -1px 0px #E88BAB) drop-shadow(-1px 1px 0px #E88BAB) drop-shadow(1px -1px 0px #E88BAB)
}
.close{
color:rgb(232, 139, 171);
font:35px 'Times New Roman';
font-weight:600;
position:absolute;
top:0;right:10px;
cursor:pointer
}