/* monica.css */
:root{
    /* Monica.js changable variables */

    /* Title background color */
    --bgColor: #2980B9;
    /* Title border color */
    --borderColor: #bababa;
    /* Title border-radius */
    --borderRadius: 0;
    /* Font color */
    --fontColor: #fff;
    /* Title font size */
    --titleSize: 24px;
    /* Title font weight */
    --titleWeight: 600;
    /* Content body font size */
    --bodySize: 18px;
    /* Content body font weight */
    --bodyWeight: 300;
    /* Content max-height */
    --contentHeight: 300px;
}

.monica *{
    margin: 0;
    padding: 0;
}

.monicaTitle{
    cursor: pointer;
    font-size: var(--titleSize);
    font-weight: var(--titleWeight);
    color: var(--fontColor);
    background: var(--bgColor);
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);

    margin-bottom: 10px;
    padding: 10px;
}

.monicaTitle:not(:first-of-type){
    margin-top: 20px;
}

.moniceContent{
    padding: 0 10px;
    display: none;
    font-size: var(--bodySize);
}

.monicaActive{
    max-height: var(--contentHeight);
}