.cbg-wrapper{

    max-width:900px;
    margin:auto;
    background:#222;
    color:#fff;
    padding:30px;
    border-radius:8px;
}

.cbg-wrapper h2{
    color:#fff;
    font-size:60px;
    font-weight:400;
    margin-bottom:40px;
}

.cbg-group{
    margin-bottom:25px;
}

.cbg-group label{

    display:block;
    font-size:22px;
    margin-bottom:10px;
    font-weight:600;
}

.gender-buttons{
    display:flex;
    gap:0;
    flex-wrap:wrap;
}

.gender-btn{

    background:#4977a3;
    color:white;
    border:none;
    padding:15px 25px;
    cursor:pointer;
    font-size:20px;
}

.gender-btn.active{
    background:#0066d6;
}

#character_name,
#character_details{

    width:100%;
    border:1px solid #777;
    background:#2b2b2b;
    color:white;
    padding:15px;
    font-size:20px;
    border-radius:5px;
}

#character_details{

    min-height:180px;
    resize:vertical;
}

#generate_backstory{

    display:block;
    margin:30px auto;
    background:#4f7ca7;
    color:white;
    border:none;
    font-size:30px;
    padding:20px 50px;
    cursor:pointer;
    border-radius:6px;
}

#generate_backstory:hover{
    opacity:.9;
}

#cbg-loader{

    display:none;
    text-align:center;
    font-size:22px;
    margin-top:20px;
}

#cbg-result{

    margin-top:30px;
    background:#111;
    padding:20px;
    border-radius:6px;
}

#cbg-result pre{

    white-space:pre-wrap;
    color:#fff;
    font-size:18px;
}

#copy-story{

    margin-top:15px;
    background:#0066d6;
    color:white;
    border:none;
    padding:12px 20px;
    cursor:pointer;
}

@media(max-width:768px){

    .gender-btn{
        width:100%;
    }

    #generate_backstory{
        width:100%;
        font-size:22px;
    }
}