* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; text-align: center; }
body { position: absolute; width: 100%; height: 100vh; background: #24292e; font-family: Helvetica, Arial, 'DejaVu Sans Mono', monospace; }

body > main { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: block; text-align: left; color: #FFF; margin: auto auto; font-size: 1.3em; }

h1 { margin: 0; padding: 0 0 .5em 0; }

form > div { }
textarea { display: block; width: 100%; padding: .6em .8em; font-size: 1em;
    border: 1px solid #D6D6D6;
    box-shadow: 0 0 5px 2px #13181a; border-radius: .4em; }

div.simpleInput { display: block; position: relative; margin-bottom: .5em; }
div.simpleInput label { position: absolute; display: block;
    top: 0; left: .5em; font-size: .7em;
    transform: translateY(-50%);
    padding: .1rem .3em; border-radius: .5em;
    color: #646464; font-weight: bold;
    transition: top .2s, left .2s, font-size .2s, background .2s; }
div input:focus { outline: 0; }
div.simpleInput input:placeholder-shown + label { left: 1rem; top: 50%; font-size: .95em; padding-left: 0; }

#rememberDiv { display: table; width: 100%; margin-bottom: 1em; }
#rememberDiv > * { display: table-cell; text-align: right; margin: .2em .5em; padding: 0 1em; }
#rememberDiv > label[for="remember"] { margin-left: 1em; font-weight: bold;
    color: #646464; text-align: left; }
.switch { width: 40px; height: 26px; }
.slider.round:before { width: 16px; height: 16px; }
input:checked + .slider { background: #CB9B8C; }

.presentationMode main > * { display: none !important; }
.presentationMode main > .outputText { display: block !important; }

.outputText       { display: block; white-space: pre-wrap; max-width: 80vw; width: 100%;
    font-weight: bold; font-size: 3.5em; cursor: pointer;
    transition: background .4s, font-size .4s, border .4s; }
.outputText:empty { display: none; }

.preview.outputText       { padding: .5em 1em; border: .2em dashed #CB9B8C; font-size: 2.5em; }
.preview.outputText:hover { background: rgba(255,255,255,.2); border-style: solid; }
