.charname {
    font-family: "Jacquard 24";
    font-size: 6vh;
    padding: 0vh 1vh 1vh 1vh;
    text-align: center;
}
.catimg {
    width: fit-content;
    background: white;
    margin: 1em auto;
}
.catimg img {max-width: 13vw;}
.infobox {
    width: 50vw;
    margin: 2vh auto;
    background: #893D32;
    color: white;
    display: grid;
    grid-template-columns: 15% 35% 15% 35%;
    border: 2px solid #1C0F15;
}
.infobox div:nth-child(odd) {background: #381D2A;}
.infobox div {
    min-height: 4.75vh;
    max-height: fit-content;
    border: 2px solid #1C0F15;
    padding-left: .5vw;
    display: flex;
    align-items: center;
}
.infobox a {color: #FFDDB9; text-decoration: underline; }
h2 {text-decoration: underline; font-size: 5vh;}
p {
    width: 80%;
    margin: 0px auto;
    line-height: 96%;
    background: white;
    padding: .6em;
}
p a {color:#D95D39; text-decoration: none;}
.app {width: fit-content; max-width: 80%; text-align: center;}
@media (max-width: 1500px)
{
    .infobox {
        width: 60vw;
        grid-template-columns: 30% 70%;
        font-size: 2.1vh;
    }
}
@media (max-width: 750px)
{
    .infobox {
        width: 80vw;
        grid-template-columns: auto auto;
    }
    .infobox div {
        padding-left: 2vw;
        grid-template-rows: auto;
    }
    p {
        width: 100%;
        font-size: 2.35vh;
        line-height: 93%;
        text-align: left;
    }
    .catimg img {all: revert;}
}
@media (max-height: 450px)
{
    .infobox {font-size: 3.5vh;}
    .infobox div {padding: .25em; padding-left: .5em;}
    p {font-size: 3.5vh;}
}