html {
    background-color: rgb(187, 165, 164);
}

body {
    max-width: 800px;
    position: relative;
    display: block;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;

    font-size: 1.05em;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.source-group {
    background-color: #af9494;
    border: 1px solid #8f6e6e;
    margin-bottom: 30px;

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
}

.source-title {
    text-align: center;
}

.source-setting {
    text-align: center;
    font-style: italic;
}

.source-info {
    padding-left: 15px;
    padding-right: 15px;
}

.character {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    background-color: rgb(197, 177, 177);
    border: 1px solid #8f6e6e;

    padding-bottom: 5px;
    margin-bottom: 15px;
}

.chara-img>img {
    width: 200px;
    height: auto;

    border: 1px solid #473636;

    margin-top: 27px;
    margin-left: 15px;
}

.chara-card {
    flex: 20%;
}

.chara-ext {
    flex: 65%;

    padding-left: 15px;
    padding-right: 15px;
}

.chara-epithet {
    text-indent: 1em;
}

.chara-rls {
    padding-left: 20px;
    padding-right: 20px;
}

ul {
    margin-top: -10px;
}

h2 {
    margin-bottom: 10px;
}

h3 {
    margin-top: -5px;
}

.divider {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.4em;
    background-color: #856969;
    color: rgb(187, 165, 164);

    margin-left: 30px;
    margin-right: 30px;
}

.divider::after {
    content: "･･･ ◆ ･･･";
}

.intro-desc {
    margin-bottom: 30px;
}

.go-back {
    text-align: center;
    margin-bottom: 30px;
}


.chara-name-aiden,
.chara-name-bellamy,
.chara-name-florian,
.chara-name-les,
.chara-name-galanthra,
.chara-name-haiyad,
.chara-name-rimir,
.chara-name-sterling,
.chara-name-rei,
.chara-name-hermes,
.chara-name-caleb,
.chara-name-naomi {
    font-weight: 600;
}

.chara-name-aiden {
    color: rgb(126, 49, 30);
}

.chara-name-bellamy {
    color: rgb(34, 46, 155);
}

.chara-name-florian {
    color: rgb(81, 95, 112);
}

.chara-name-les {
    color: rgb(48, 77, 114);
}

.chara-name-galanthra {
    color: rgb(177, 107, 15);
}

.chara-name-haiyad {
    color: rgb(75, 105, 39);
}

.chara-name-rimir {
    color: rgb(79, 62, 109);
}

.chara-name-sterling {
    color: rgb(160, 112, 90);
}

.chara-name-rei {
    color: rgb(40, 51, 102);
}

.chara-name-hermes {
    color: rgb(66, 112, 102);
}

.chara-name-caleb {
    color: rgb(60, 107, 66);
}

.chara-name-naomi {
    color: rgb(110, 86, 40);
}


.status {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
}

@media screen and (max-width: 700px) {
    .character {
        flex-direction: column;
    }
}