body{margin:0;padding-right:15px;display:flex;flex-wrap:wrap;justify-content:space-between;font:'Solway';color:rgb(109, 95, 84)}
@font-face{font-family:'Telop';src:url('fonts/telop-.ttf')}
/*--------------------------------------------------------
BOOK-COVER
--------------------------------------------------------*/
.thumbnail{
position:relative;
text-align:left;
background-size:cover;
width:135px;
overflow:hidden
}
.thumbnail.book, .thumbnail.upload{display:block;height:203px;text-decoration:none}
.thumbnail.book .thumbnail-title h4, .thumbnail.upload .thumbnail-title h4{
font-size:11px;
line-height:13px;
font-weight:lighter;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin:0;
color:rgb(255, 255, 255)
}
.thumbnail:before{
background-size:cover;
width:100%;
height:100%;
content:"";
position:absolute;
background-position:50%;
opacity:.9;
z-index:0;
left:0;
top:0
}
.thumbnail .thumbnail-title{
position:relative;
color:rgb(255, 255, 255);
text-transform: uppercase;
padding:4px;
border:1px solid transparent;
width:100%;
background-color:rgba(0, 0, 0, .6)
}
/*--------------------------------------------------------
ETIQUETAS-DEMOGRAPHY
--------------------------------------------------------*/
.thumbnail .demography{
position:absolute;
text-align:center;
font-size:12px;
line-height:20px;
font-weight:lighter;
letter-spacing:2px;
width:100%;
bottom:0;
color:rgb(255, 255, 255);
background-color:rgba(135, 135, 135, 0.75)
}
.thumbnail .demography.seinen{background-color:rgba(255, 0, 0, .75)}
.thumbnail .demography.seinen:before{content:"SEINEN"}

.thumbnail .demography.josei{background-color:rgba(128, 0, 128, .75)}
.thumbnail .demography.josei:before{content:"JOSEI"}

.thumbnail .demography.shonen{background-color:rgba(255, 165, 0, .75)}
.thumbnail .demography.shonen:before{content:"SHŌNEN"}

.thumbnail .demography.shojo{background-color:rgba(221, 148, 161, .75)}
.thumbnail .demography.shojo:before{content:"SHŌJO"}

.thumbnail .demography.kodomo{background-color:rgba(64, 224, 208, .75)}
.thumbnail .demography.kodomo:before{content:"KODOMO"}
/*--------------------------------------------------------
ETIQUETAS-REVIEW
--------------------------------------------------------*/
.thumbnail .review{
position:absolute;
text-align:center;
font-size:12px;font-weight:lighter;
text-transform:uppercase;
line-height:20px;
letter-spacing:2px;
width:100%;
bottom:20px;
color:rgb(255, 255, 255);
background-color:rgba(81, 163, 81, .8);
&:before{content:"-- REVIEW --"}}
/*--------------------------------------------------------
ETIQUETAS-TYPE&GENDER
--------------------------------------------------------*/
.thumbnail .book-type{
color:rgb(255, 255, 255);
text-transform:uppercase;
position:absolute;
margin-top:3px;
left:3px
}
.thumbnail .book-gender{
color:rgb(255, 255, 255);
text-transform:uppercase;
position:absolute;
margin-top:3px;
right:3px
}
.badge{
display:inline-block;
padding:.3em .3em;
font-size:10px;
line-height:1;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:3px
}
.badge.badge-gender{
letter-spacing:0px;
background-color:rgb(220, 20, 60)
}

.badge.badge-manga{letter-spacing:0px;background-color:rgb(121, 134, 203)}
.badge.badge-manga:before{content:"MANGA"}

.badge.badge-one-shot{letter-spacing:0px;background-color:rgb(240, 98, 146)}
.badge.badge-one-shot:before{content:"ONE-SHOT"}

.badge.badge-manhwa{letter-spacing:0px;background-color:rgb(129, 199, 132)}
.badge.badge-manhwa:before{content:"MANHWA"}

.badge.badge-manhua{letter-spacing:0px;background-color:rgb(141, 110, 99)}
.badge.badge-manhua:before{content:"MANHUA"}

.badge.badge-novel{letter-spacing:0px;background-color:rgb(229, 115, 115)}
.badge.badge-novel:before{content:"NOVEL"}

.badge.badge-doujinshi{letter-spacing:0px;background-color:rgb(255, 183, 77)}
.badge.badge-doujinshi:before{content:"DŌJINSHI"}

.badge.badge-other{letter-spacing:0px;background-color:rgb(186, 104, 200)}
/*--------------------------------------------------------
COLUMNAS
--------------------------------------------------------*/
li{
width:135px;
margin-bottom:10px;
text-align:center;
list-style:none
}
.filter{display:none}
.show{display:block}
/*--------------------------------------------------------
RATING-SECTION-COLORS
--------------------------------------------------------*/
#purple, #blue, #green, #yellow, #orange, #red{padding:3px 0 2px 0;margin:5px 0 3px 0;font-size:14px}
#purple{
background-color:rgb(232, 222, 238, 0.8);
color:rgb(144, 101, 176);
border-bottom:1px dashed rgb(144, 101, 176);
&:before{content:url('img_book-journal/purple-.png')}
}
#blue{
background-color:rgb(211, 229, 239, 0.8);
color:rgb(51, 126, 169);
border-bottom:1px dashed rgb(51, 126, 169);
&:before{content:url('img_book-journal/blue-.png')}
}
#green{
background-color:rgb(219, 237, 219, 0.8);
color:rgb(68, 131, 97);
border-bottom:1px dashed rgb(68, 131, 97);
&:before{content:url('img_book-journal/green-.png')}
}
#yellow{
background-color:rgb(249, 228, 188, 0.8);
color:rgb(203, 145, 47);
border-bottom:1px dashed rgb(203, 145, 47);
&:before{content:url('img_book-journal/yellow-.png')}
}
#orange{
background-color:rgb(250, 222, 201, 0.8);
color:rgb(217, 115, 13);
border-bottom:1px dashed rgb(217, 115, 13);
&:before{content:url('img_book-journal/orange-.png')}
}
#red{
background-color:rgb(255, 226, 221, 0.8);
color:rgb(212, 76, 71);
border-bottom:1px dashed rgb(212, 76, 71);
&:before{content:url('img_book-journal/red-.png')}
}
/*--------------------------------------------------------
DATE-STARTED-FINISHED
--------------------------------------------------------*/
#started{color:rgb(0, 0, 255);font-size:13px}
#started:before{color:rgb(109, 95, 84);content:"Started: "}
#finished{color:rgb(255, 0, 0);font-size:13px}
#finished:before{color:rgb(109, 95, 84);content:"Finished: "}
/*--------------------------------------------------------
BUTTONS-FILTER
--------------------------------------------------------*/
.all-button, .shojo-button, .josei-button, .seinen-button, .shonen-button{
width:114px;height:fit-content;
margin-bottom:10px;padding:2px 10px;
background-color:rgb(255, 255, 255);
font-family:'Telop';
font-size:14px;
text-transform:uppercase;
border-radius:15px;
cursor:pointer
}
.all-button{color:rgb(255, 199, 206);border:2px solid rgb(255, 199, 206)}
.all-button:hover{background:rgb(255, 199, 206);color:rgb(255, 255, 255)}

.shojo-button{color:rgb(234, 183, 197);border:2px solid rgb(234, 183, 197)}
.shojo-button:hover{background:rgb(234, 183, 197);color:rgb(255, 255, 255)}

.josei-button{color:rgb(216, 177, 212);border:2px solid rgb(216, 177, 212)}
.josei-button:hover{background:rgb(216, 177, 212);color:rgb(255, 255, 255)}

.seinen-button{color:rgb(242, 185, 174);border:2px solid rgb(242, 185, 174)}
.seinen-button:hover{background:rgb(242, 185, 174);color:rgb(255, 255, 255)}

.shonen-button{color:rgb(255, 210, 145);border:2px solid rgb(255, 210, 145)}
.shonen-button:hover{background:rgb(255, 210, 145);color:rgb(255, 255, 255)}