:root {
    --light: #fff;
    --light2:#CB626675;
    --dark:#B24651;
    --dark2: #CB6266;
    --font:"Poppins", monospace;
    --doublePad: calc(var(--padding) * 2);
    --padding: 1em;
    --linkHover: var(--light2);
}

html { background:none; 
    background:
        radial-gradient(circle closest-side at 60% 43%, var(--dark2) 26%, rgba(187,0,51,0) 27%),
        radial-gradient(circle closest-side at 40% 43%, var(--dark2) 26%, rgba(187,0,51,0) 27%),
        radial-gradient(circle closest-side at 42% 22%, var(--dark) 43%, rgba(221,51,85,0) 45%),
        radial-gradient(circle closest-side at 58% 22%, var(--dark) 43%, rgba(221,51,85,0) 45%),
        radial-gradient(circle closest-side at 50% 35%, var(--dark) 32%, rgba(221,51,85,0) 27%),

        radial-gradient(circle closest-side at 60% 43%, var(--dark2) 26%, rgba(187,0,51,0) 27%) 50px 50px,
        radial-gradient(circle closest-side at 40% 43%, var(--dark2) 26%, rgba(187,0,51,0) 27%) 50px 50px,
        radial-gradient(circle closest-side at 40% 22%, var(--dark) 40%, rgba(221,51,85,0) 45%) 52px 50px,
        radial-gradient(circle closest-side at 60% 22%, var(--dark) 40%, rgba(221,51,85,0) 45%) 48px 50px,
        radial-gradient(circle closest-side at 50% 35%, var(--dark) 30%, rgba(221,51,85,0) 37%) 50px 50px;
        background-color:var(--dark2);
        background-size:100px 100px;

 }

a { color:var(--dark) }
a:hover { color:var(--dark); opacity:0.7 }

container { 
    display: grid;
    grid-template-areas: 'partA partB';
    grid-template-columns:20% 1fr;
    grid-template-rows:1fr; 
    gap:var(--doublePad);
    margin: var(--doublePad) 10%;
}

item { display:block; padding:var(--padding); background:var(--light); border:2.5px var(--dark) dashed; border-radius:var(--borderRad); box-shadow: 0px 0px 0px 7px var(--light)}
partA { text-align:center }
partB item { height: 150px;
overflow: auto;
scrollbar-color: var(--dark) transparent;
scrollbar-width: thin; }

.button { zoom:90% }

row {display: flex; gap: var(--doublePad); margin-bottom:var(--doublePad)}
row:last-child { margin-bottom:0 }
.col50 { flex: calc(50% - var(--doublePad)); }
.col25 {flex: calc(25% - var(--doublePad));}
.col75 {flex: calc(75% - var(--doublePad));}
.col33 {flex: calc(33.33% - var(--doublePad));}
.col66 {flex: calc(66.66% - var(--doublePad));}
h1, h2, h3 { text-transform:uppercase }
div.blorbo, div.manga, div.recs { margin: 0em auto;margin-top:0.5em; display:flex; flex-wrap:wrap; gap:0.5em; justify-content: center; align-items: center;}
.blorbo img { width: 142px;  zoom: 102%; }
.manga img { height: 230px; width: 165px; zoom: 102%;}
.recs img {  height: 127px; zoom:105%;}
partB img { margin:auto; border: var(--dark) solid 0.175em; border-radius: var(--borderRad); pointer-events:auto!important;}

abbr {
position: relative;
white-space: pre-wrap;
}

abbr:hover::after {
position: absolute;
bottom: 0%;
left: 50%;
width: calc(120px + 10px);
margin-left: calc(-70px - 5px);
background-color: var(--dark);
border:2px solid var(--light);
color: var(--light);
text-align: center;
border-radius: var(--borderRad);
padding: 5px 8px 5px 8px;
content: attr(title);
z-index: 1;
font-size: x-small;
}
div.blorbo abbr:hover::after {
width: 120px;
margin-left: -70px;
content: attr(title) "\A (" attr(from, "media") ")";
bottom: -10%;
}




partB h2 { font-size:175% }

partA item { position: sticky;
top: var(--doublePad); }

partA mark { background:var(--dark); color: var(--light); font-weight:800; border-radius:var(--borderRad); padding:1px 10px; font-size:smaller; }
partA p:nth-of-type(2) { margin:calc(var(--padding) / 2) auto var(--padding)}
partA mark i { margin-right:2px; font-size:90% }

back { display:block;position:static; bottom:auto; right:auto; color:var(--dark); z-index:1000; background:var(--dark); color: var(--light) !important; font-weight:800; border-radius:var(--borderRad); padding:0px 0px; font-size:smaller;margin:auto; border: var(--border); opacity:1!important}
back a { display:block; line-height:1.8;color: var(--light) !important; text-decoration:none!important;opacity:1!important }
back:hover { background: var(--light); color: var(--dark) !important;opacity:1!important}
back a:hover { color: var(--dark) !important;opacity:1!important }