img.post-character,
img.post-setting {
    float: left;
    height: 144px;
    width:  144px;
    margin: 1em;
    margin-right: 2.5em;
    border-radius: 1em;
    box-shadow: .3em .3em .3em lightgrey;
}

img[alt='post-character'],
img[alt='post-setting'] {
    float: left;
    height: 200px;
    width:  200px;
    margin: 1em;
    margin-right: 3em;
    border-radius: 1.5em;
    box-shadow: .3em .3em .3em lightgrey;
}

img[alt='family-trees'] {
    height: 100%;
    width:  100%;
    margin: 1em;
}

img[alt='Noirith'] {
    width:  66% !important;
    margin-left: 15% !important;
}

div.post-preview {
    clear: both;
}

/* <style>header.masthead { background-position-y: -3em; }</style> */

#mainNav.is-fixed {
    top: 0px !important;
}

#mainNav.is-visible {
    transform: none !important;
}

article.character th {
    font-weight: 400 !important;
    margin: 3em !important;
}

article.character td, article.character th {
    border-bottom: 0px !important;
    padding: 0em !important;
}

article.character table:first-of-type {
    margin: 3em !important;
}

article.character table:first-of-type th {
    font-weight: 700 !important;
    border-bottom: 0px !important;
    padding: 0.33em !important;
}

article.character table:first-of-type td {
    border-bottom: 0px !important;
    padding: 0.33em !important;
}

table.characters-table {
    position: relative;
    top: 1.33em
}

td.characters-table-label, td.characters-table-info {
    border-bottom: 0px !important;
    padding: 0em 1em 0em 0em !important
}

td.characters-table-label {
    font-weight: 700;
}

td.characters-table-info {
    font-style: italic;
}

#grav-login label, #grav-login a.button.secondary, #grav-login div.rememberme {
    display: none !important;
}

#grav-login button.primary {
    position: relative;
    left: -3em;
    top: 1em;
}

h2.header-family {
    clear: both;
    margin-top: 5em;
}

h2.header-family:first-of-type {
    margin-top: 0em;
}

h5.characters-title,
h5.settings-title {
    position: relative;
    top: 1.66em;
}

hr {
    display: block;
    height: 3px !important;
    border: 0;
    border-top: 3px solid black !important;
    margin: 1em 0;
    padding: 0;
}

h3 + h4 {
    margin-top: 1.25em;
}

p + ul {
    margin-top:-1.5em;
}

article.setting h3 {
    clear: both;
}

article.character h2 {
    font-family: var(--bs-body-font-family);
    font-weight: var(--bs-body-font-weight);
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem;
    padding-top: 1.5rem;
}

article.character h3, h4 {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    font-size: 1.25rem;
    font-style: italic;
    text-decoration: underline;
    margin-bottom: 0;
}


article.character h3 + p, h4 + p {
    margin-top: 0;
}

article.character .md-spoiler[data-label]::before {
    color: unset;
}

article.character .md-spoiler {
    background-color: #f8f8f8;
    border-left: 10px solid grey;
}

@media (max-width: 620px) {

    :root {
        font-size: 0.9rem;
      }

    td.characters-table-label, td.characters-table-info {
        padding: 0em .33em 0em 0em !important
    }

    article.character td, article.character th {
        padding: 0em !important;
        padding-right: 0.5em !important;
    }

    img.post-character {
        margin: .75em;
        margin-right: 1.33em;
    }

    img[alt='post-character'] {
        height: 350px;
        width:  350px;
        margin: 1.33em;
    }
}

@media (max-width: 480px) {

    :root {
        font-size: 0.8rem;
      }

    td.characters-table-label, td.characters-table-info {
        padding: 0em .33em 0em 0em !important
    }

    article.character td, article.character th {
        padding: 0em !important;
        padding-right: 0.33em !important;
    }

    img.post-character {
        margin: .5em;
        margin-right: 1em;
    }

    img[alt='post-character'] {
        height: 320px;
        width:  320px;
        margin: 1em;
    }
}