@import url(https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Noto+Sans+JP:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap);
@import url(https://dl.dropbox.com/scl/fi/eixdm1mqogy1an0yzgnew/moderniz.css?rlkey=4iv01fny195jugex8pznd7d2d&st=tamnznk4);

.lmnsrp-box {
    width: 65%;
    margin: auto;
    padding: 1.6vw;
    background: var(--lmnsrp-bg);
}
.lmnsrp-headgrid {
    width: 100%;
    display: grid;
    grid-template-columns: 20% 78%;
    grid-template-rows: auto auto auto;
    column-gap: 1vw;
}
.lmnsrp-class {
    width: 100%;
    padding: 0.8vw 0.5vw 0.5vw 0.5vw;
    box-sizing: border-box;
    background: var(--lmnsrp-acc1);
    font: var(--textsize) 'Moderniz';
    color: var(--lmnsrp-bg);
    grid-area: 1 / 1;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.1;
}
.lmnsrp-class::before {
    content: var(--tribe);
}
.lmnsrp-rank {
    width: 100%;
    grid-area: 2 / 1 / 4 / 2;
    padding: 2vw 1.2vw 1.2vw 1.2vw;
    box-sizing: border-box;
    font: 2vw 'Moderniz';
    color: var(--lmnsrp-acc1);
    text-align: center;
    border: 0.14vw solid var(--lmnsrp-acc1);
}
.lmnsrp-namegrid {
    width: 95%;
    justify-self: right;
    display: grid;
    grid-template-columns: fit-content(35%) 12% fit-content(55%);
    justify-content: end;
    grid-area: 2 / 2;
}
.lmnsrp-jpn {
    width: 100%;
    font: 1.65vw 'Moderniz','Noto Sans JP';
    color: var(--lmnsrp-acc2);
    font-weight: 700;
    text-align: right;
    align-self: end;
    line-height: 1;
}
.lmnsrp-spark {
    width: 65%;
    margin: auto;
    aspect-ratio: 1 / 1;
    background: var(--lmnsrp-txt);
    mask: url(https://iili.io/FNvCfFj.png) center / 80% no-repeat;
    grid-area: 1 / 2;
    align-self: end;
}
.lmnsrp-sn {
    width: 95%;
    grid-area: 1 / 3;
    font: 1.65vw 'Moderniz';
    color: var(--lmnsrp-acc1);
    line-height: 1;
    padding-top: 0.8vw;
    box-sizing: border-box;
    text-align: center;
    margin-right: 1vw;
    align-self: end;
}
.lmnsrp-fn {
    width: 100%;
    grid-area: 1 / 2;
    font: 2.4vw 'Moderniz';
    color: var(--lmnsrp-txt);
    text-align: right;
    box-sizing: border-box;
    padding-right: 1vw;
    line-height: 1;
}
.lmnsrp-deco1 {
    width: 60%;
    grid-area: 3 / 2;
    aspect-ratio: 11.428 / 1;
    margin-top: 0.35vw;
    background: var(--lmnsrp-acc2);
    mask: url(https://iili.io/FNvC2ne.png) center / cover;
    justify-self: right;
}
.lmnsrp-picflex {
    width: 100%;
    margin-top: 1vw;
    position: relative;
    display: flex;
    justify-content: space-between;
}
.lmnsrp-pic1 {
    width: 65%;
    aspect-ratio: 1.6 / 1;
    border: 0.18vw solid var(--lmnsrp-acc2);
    background: var(--lmnsrp-pic1);
}
.lmnsrp-pic2 {
    width: 30%;
    border: 0.18vw solid var(--lmnsrp-acc2);
    background: var(--lmnsrp-pic2);
}
.lmnsrp-deco2 {
    width: 8.5%;
    aspect-ratio: 0.323 / 1;
    background: var(--lmnsrp-acc2);
    mask: url(https://iili.io/FNvCJt9.png) center / cover;
    position: absolute;
    top: 18%;
    left: -4.2%;
}
.lmnsrp-deco3 {
    width: 100%;
    aspect-ratio: 20.346 / 1;
    margin: 1.3vw 0vw 2vw;
    background: var(--lmnsrp-acc1);
    mask: url(https://iili.io/FNvC3Mu.png) center / cover;
}
.lmnsrp-loc {
    width: 100%;
    font: 1.3vw 'Bai Jamjuree';
    font-weight: 600;
    color: var(--lmnsrp-acc2);
}
.lmnsrp-content {
    width: 100%;
    margin: 1vw 0vw 2vw;
    font: 1.2vw 'Bai Jamjuree';
    color: var(--lmnsrp-txt);
    text-align: justify;
    line-height: 1.6;
}
.lmnsrp-note {
    width: 100%;
    font: 1.3vw 'Bai Jamjuree';
    font-weight: 600;
    color: var(--lmnsrp-acc2);
    text-align: right;
}
.lmnsrp-deco4 {
    width: 100%;
    aspect-ratio: 6.721 / 1;
    background: var(--lmnsrp-acc1);
    mask: url(https://iili.io/KJGiRDl.png) center / cover;
    margin-top: 2vw;
}

#merpeople {
    --textsize: 0.8vw;
    --tribe: "merpeople";
}
#fairy {
    --textsize: 1.3vw;
    --tribe: "fairy";   
}
#werewolf {
    --textsize: 0.85vw;
    --tribe: "werewolf";   
}
#vampire {
    --textsize: 1vw;
    --tribe: "vampire";   
}
#sapien {
    --textsize: 1.1vw;
    --tribe: "sapien";   
}
#enchanter {
    --textsize: 0.8vw;
    --tribe: "enchanter";   

}