.main-grid {display: grid;grid-template-areas:"sform" "cnt" "relform";}
.sform{grid-area: sform;}
.cnt{grid-area: cnt;}
.relform{grid-area: relform;}
.grid-body {display: grid;column-gap:2rem;row-gap:0; grid-template-areas:"flt" "sovm" "rel" "sh";overflow-wrap: break-word;}
.sovm{grid-area: sovm;}
.sh{grid-area: sh;}
.rel{grid-area: rel;--max-height: calc(100vh - var(--offset));max-height: var(--max-height);}
.flt{grid-area: flt;}
.main-grid .container{padding: 0;}
@media screen and (min-width: 800px){.grid-body {display: grid;gap: 1rem;overflow-wrap: break-word;grid-template-areas: "sh flt" "sh sovm" "sh rel";grid-template-columns: minmax(12rem, 1fr) minmax(auto, 100%);grid-template-rows: auto 1fr;}.fltp{padding: 0;}}
@media screen and (min-width: 1024px){.grid-body {grid-template-areas:"sh sovm flt" "sh sovm rel";grid-template-columns: 12.5rem minmax(0, 52rem) minmax(14rem, 1fr);}.sh{width:12.5rem;}}
@media screen and (min-width: 1100px){.grid-body {grid-template-columns: 12.5rem minmax(0,52rem) minmax(17rem,1fr);}}

.bg-style{background-color: var(--white);padding: 1rem;}
.chapter{margin-bottom:2rem;}

.nbtn{padding: 0.2rem 1rem;border-radius: 30px;font-size:0.8rem; color:#333;}
.gl{border: 1px solid;border-color:rgb(255 196 225);}
.mx{border: 1px solid;border-color:rgb(187 213 255);}
article h1{margin: 1rem 0 2rem 0; text-align: center;}
.bg-wgt{border: 1px solid #e9e9e9;border-radius: 1rem;padding: 1rem;margin-bottom:2rem;}
.boy-letter{background-color:#88b2ff;color:#183462;}
.letters{width: 1.85rem;height: 1.85rem;font-size: 1.1rem;line-height: 1.5;font-weight: 600;border-radius: 0.2rem;}
.boy-letter:hover {color: #fff;background-color: #326fd1;}
.girl-letter{background-color:#f7b0d3;color:#521433;}
.girl-letter:hover {color: #fff;background-color: #c93d82;}

.statline,.statitem{display: block;}
.statline{width: 65px;}
.statline img{padding: 5px;}
.statitem{margin-bottom:1rem;}
@media screen and (min-width: 768px){.statline,.statitem{display: unset;}.statline{width: unset;}}
.aBar2{color: #687091;font-size: 0.8rem;}
span.btn>img:hover{border-radius: 5px;background: var(--border-2);}
.alike:before,.alike:after{content: '';position: absolute;left:50%;top:50%;}
.alike:before {animation: bubble 0.6s ease-out forwards;box-sizing: border-box;margin: -2.5rem;width: 4.5rem;height: 4.5rem;transform: scale(0);border-radius: 50%;}
.alike:after{margin: -0.1875rem;width: 0.375rem;height: 0.375rem;box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;
animation: sparkles 0.6s ease-out forwards;}
@keyframes bubble {15% {transform: scale(1);border-color: #cc8ef5;border-width: 2.25rem;}
30%, 100% {transform: scale(1);border-color: #cc8ef5;border-width: 0;}}
@keyframes sparkles {0%, 20% {opacity: 0;}25% {opacity: 1;box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;}}


.rel a{margin-left:0.5rem;font-weight: 600;color:var(--text-1);line-height: 2;padding: 1rem 0.5rem;border-bottom: 1px solid #eee;}
.rel a:hover{background-color:#ebf0fb;color:var(--text-1);}
.rel a:last-child{border-bottom:none;}
.rel a img{margin-right: 1rem;}
.pos{right: 1rem;color:var(--accent);font-weight: 600;}

.form-styling{max-width: 768px;}
.oh_ttl{font-size: 1.5rem;margin:1rem 0;line-height: 1;max-width: 450px;}
.input-sformbig{background-color: var(--white);border: 1px solid var(--border-1);caret-color: var(--accent);color: var(--text-1);height: var(--felem-height);padding: 0 60px 0 1.5rem;margin:0.5rem auto;}
.input-sformbig:focus-visible{outline:unset;}
.button{background-color: var(--accent);color:var(--white);font-weight: 600; padding: 0.5rem;white-space: nowrap;}
.button:hover{background-color: #90001e;}
.button-sform-go{max-width: 70px;right: 0;top: 0.4rem;padding: 5px;}
.form-styling input::placeholder {opacity: 0.5;}
.fixed_search {position: fixed;top:0;z-index: 99999;right:5.5rem;left: 5rem;transition: transform 1s;}
.fixed_search .iso_s{right: 10px;top:5px;width: 20px;height: 20px;}
@media screen and (min-width: 768px){
.fixed_search {top: 0;right: calc(100% / 2 - 135px);left: calc(100% / 2 - 120px);}
.input-sformbig{padding: 0 0.5rem;}
.fixed_search {right: calc(100% / 2 - 250px);left: calc(100% / 2 - 250px);}
.fixed_search .iso_s{right: 10px;}
}
.search-inp{padding: 0 2rem 0 1rem;color: #5b5b5b;font-size: 0.8rem;line-height: 1.75rem;}
.frm-active{height: 100vh;right:unset;left:unset;transition: transform 1s;width: 100%;background:var(--white);padding: 2rem;}
.close-icon{top: -25px;right:-25px;width: 30px;height:30px;}
@media screen and (min-width: 768px){
.frm-active{height: unset;box-shadow: 0px 2px 8px 4px #cbcbcb;}
}
.pop-n{font-size: 0.8em;margin: 0;padding-left: 0.5rem;}
.pop-n li a {padding: 0.2rem 0.5rem;background-color: var(--bg-dark);border-radius: 7px;color: var(--text-1);}
.li-inline li{display: inline-block;margin-right:15px;}
.li-inline li:first-of-type{margin-left: 0;}
.li-inline li:last-of-type{margin-right: 0;}
.rel .similar{margin-bottom: 1rem;}
.similar h2{margin-top:0;}
.similar a{-webkit-transition: .2s;transition: .2s;text-decoration: none;line-height: 1.1;padding: 1rem 0;border-bottom:1px solid #eee;color:#333;}
.rel .similar a{border: none;padding: 0.5rem;margin: 0;}
.similar a:first-child{padding-top:0;}
.similar .grd_s{display: grid;gap:0.5rem;}
.similar .img_cover{width:75px;min-width: 75px;height:110px;z-index: 1;border-radius: 10px;margin: 0;background-size: cover;background-repeat: no-repeat;background-position-x: center;background-position-y: center;}
.similar .bgt {margin: 0;font-size: 0.92rem;line-height: 1.1rem;font-weight: 600;}
.similar .desc{color: #687091;font-size: 0.8em;}
.similar .statline{margin: 0;padding: 0.5rem 0 0;font-size: 0.8rem;}
@media screen and (min-width: 1024px){
.rel .similar .bgt{font-size: 0.95rem;line-height: 1.1rem;}
.similar .bgt{font-size: 1.3rem;line-height: 1.3rem;}
.similar .img_min{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}
.similar .img_cover{-webkit-filter: brightness(75%); }
.similar .bgt:hover{text-decoration: underline;}
.similar a:hover .img_min{-webkit-filter: brightness(100%);transform: scale(1.2);}
}
.similar .statline svg{padding: 0;}
.rel .similar .statview{display: none;}
.clamp-ellipsis-2 {-webkit-line-clamp: 2;}
.clamp-ellipsis-3 {-webkit-line-clamp: 3;}
.clamp-ellipsis {overflow: hidden;text-overflow: ellipsis;-ms-text-overflow: ellipsis;display: -webkit-box;display: box;-webkit-box-orient: vertical;box-orient: vertical;}