/* color pallette */
* {
    --white:    #f7f8fb;
    --lgray0:   #f5fbfd;
    --lgray1:   #daddd6;
    --lgray2:   #d3d8d5;
    --mgray1:   #687864;
    --dgreen1:  #21341e;
    --lgreen1:  #e5eef2;
    --black:    #003d27;

    --sans:     Helvetica, Liberation Sans, FreeSans, Roboto, sans-serif;
    --mono:     Liberation Mono, FreeMono, Roboto Mono, monospace;
    --fsdef:    12pt;
}

/* body */
body {
    background:     var(--white);
    color:          var(--dgray1);
    font-size:      var(--fsdef);
    font-family:    var(--sans);
    margin:         0;
    padding:        0;
    line-height:    1.4;
}


.content {
    max-width:  800px;
    margin:     0 auto;
    /*
    background:     #ff0;
    */
}


/* add some top padding to content */

.content-title {
    text-align:         center;
    text-decoration:    underline;
}

.content-body {
    width:          100%;
    margin:         0 auto;
    /*
    background:     #f00;
    */


    padding-left:   10px;
    padding-right:  10px;

    box-sizing:     border-box;
}

/* element-specific styling */

a {
    color: var(--mgray1);
}


#wfc-input {
    font-family:    var(--mono);
    font-size:      var(--fsdef);
    background:     var(--lgreen1);

    width:          100%;

    box-sizing:     border-box;

    border-radius:  6px;
    border:         1px solid var(--lgray1);

    padding:        5px;
}

#wfc-output {
    background:     var(--lgray0);
    font-family:    var(--mono);
    font-size:      var(--fsdef);

    width:          100%;
    resize:         vertical;

    box-sizing:     border-box;

    border-radius:  6px;
    border:         1px solid var(--lgray1);

    padding:        5px;
}