section:first-of-type {
    width: fit-content;
    justify-self: center;
}

.charCard {
    width: 350px;
    background-color: #222326;
    border: 2px solid #333539;
    border-radius: 14px;
    padding: 16px;
    margin: 8px;
    font-size: 18px;
    text-align: left;
    font-family: system-ui;
    color: #e8e9eb;
    transition: 100ms;
}

.charCard:hover {
    width: 350px;
    background-color: #2c2e32;
    border: 2px solid #D6F4F7;
    border-radius: 14px;
    padding: 16px;
    margin: 8px;
    font-size: 18px;
    text-align: left;
    font-family: system-ui;
    color: #e8e9eb;
    box-shadow: #061755 0px 0px 5px 3px;
}

#switch_chars_form {
    margin-top: 28px;
    justify-self: center;
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
} 

#switch_chars_form li:nth-of-type(2) {
    font-weight: bold;
} 

#switch_chars_form img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 100%;
}

#selectedChar {
    border: #D6F4F7 2px solid;
}