.box {
color: var(--text);
border: 3px solid var(--border);
padding: 5px;
background: var(--bg);
max-width:600px;
border-radius:5px;
margin: 5px auto;
min-height: 105px;
max-height:200px;
overflow-x:auto;
}
.box img {
width: 100px;
height: 100px;
border-radius:5px;
border: 3px solid rgba(0, 0, 0, 0.2);
vertical-align:middle;
margin-right: 10px;
float:left;
}

.name {
font-weight: bold;
font-style:italic;
color: var(--text);
}

.box p {
margin: 0 5px 0 5px;
}

.box.happyzette {
    background: linear-gradient(135deg, #e601a0, #ffb0e9);
    border: 2px solid #a30070;
    color: #fff7ff;
}

.box.placard {
    background: linear-gradient(135deg, #2a4f2e, #f5f395, #f6f2bd);
    border: 2px solid #1e3a22;
    color: #2a4f2e;
    text-shadow: 1px 1px 2px #f6f2bd;
}

.box.amelia {
    background: linear-gradient(135deg, #BFCAFF, #8087ff);
    border: 2px solid #5a68d6;
    color: #2a2a5a;
}

.box.rexbob {
    background: linear-gradient(135deg, #ffffff, #e6e6e6);
    border: 2px solid #5a5a5a;
    color: #1e1e1e;
}

.box.umbrellataste {
    background: linear-gradient(135deg, #6a70b8, #ced1ff, #7079be);
    border: 2px solid #4f5690;
    color: #202058;
}

.box.out_7 {
    background: linear-gradient(135deg, #cc3232, #ff9f9f);
    border: 2px solid #a52828;
    color: #2a0000;
}

.box.bell {
    background: linear-gradient(135deg, #8cb7ef, #5a84bf, #ffffff);
    border: 2px solid #3a689e;
    color: #0e2a4f;
}

.box.cassie {
    background: linear-gradient(135deg, #9b7a3e, #fff296, #fff7c3);
    border: 2px solid #7a5c2e;
    color: #5a3a1e;
}

.box.\31 347 {
    background: linear-gradient(135deg, #C8D8C8, #6E836F);
    border: 2px solid #5A6F5A;
    color: #2C3E2C;
}

.box.\31 347 .name {
    color: #1E2E1E;
}

.box.mikhail {
    background: linear-gradient(135deg, #fb367e, #d42a6a);
    border: 2px solid #b0235a;
    color: #333333;
}

.box.mikhail .name {
    color: #333333;
}

.box.vemon {
    background: linear-gradient(135deg, #d5a9ed, #754D8B);
    border: 2px solid #754d8b;
    color: #ECC8FF;
}

.box.vemon .name {
    color: #493056;
}

.box.serene {
    background: linear-gradient(135deg, #FFFFE2, #E0E0A8); 
    border: 2px solid #E0E0A8; 
    color: #333333; 
}

.box.serene .name {
    color: #666633; 
}
.name {
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
}

.box.happyzette .name {
    color: #7a004d;
}

.box.placard .name {
    color: #1a3b1e;
}

.box.amelia .name {
    color: #1a1a46;
}

.box.rexbob .name {
    color: #0f0f0f;
}

.box.umbrellataste .name {
    color: #14144a;
}

.box.out_7 .name {
    color: #200000;
}

.box.bell .name {
    color: #071b38;
}

.box.cassie .name {
    color: #3f2912;
}