#controls {
    overflow: hidden;
    background-color: #000;
    position: fixed;
    top: 0;
    padding: 5px;
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
    color: #FFF;
    font-size: 1.2em;
    text-align: right;
    z-index: 101;
}

audio { z-index: 100;}

#readout { width: 100%; height:100%; position: absolute; top:30px; left:0px; overflow-y: scroll; overflow-wrap: break-word; font-size:2.5em; font-family: Arial, Helvetica, sans-serif; opacity:0.6; }

#readout .s0 { color: green; padding-left: 5px; }

#readout .s2 { color: black; padding-left: 5px;}

#readout .s1 { color: red; padding-left: 5px; }

#personality { position:fixed; opacity:0.8; right: 0px; height: 100%; font-size: 1.2em; text-align: right; color:black; }

#personality #p3 { top: 40px; visibility:hidden; }

#personality #p2 { top: 40px; visibility:hidden; }

#personality #p1 { bottom: 40px; visibility:hidden; margin:.8em; padding:3px;}

#personality #p1 span {background-color: white; border: 1px solid red; margin:.8em; padding:3px;}

#personality #p2 span { background-color: white; border: 1px solid black; margin:.8em; padding:3px;}

#personality #p3 span { background-color: white; border: 1px solid green; margin:.8em; padding:3px;}

#sentiment { position: absolute; top: 50%; right: 0px; }

#sentiment span { background-color: yellow; font-weight: bold; font-size: 4em;}

#glossary { position: absolute; left: 0px; /*top: 20%; height:400px;*/ height:100%; overflow-y: scroll; }

#glossary span { display: none; opacity:0; /*visibility: collapse;*/ background: black; padding: 1px 8px; margin: 4px; color: white; font-family: Arial, Helvetica, sans-serif;}