*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --max-width: 1200px;
}

:root.nocursor * {
    cursor: none;
}

html {
    background: #000;
    color: #fff;
}

body {
    font-size: 1rem;
    margin: 0 auto;
    padding: 0;
    font-family: sans-serif;
    width: 100vw;
    height: 100vh;
}

button,
input[type="button"],
input[type="submit"] {
    cursor: pointer;
}

/* Hide the preview video */
#video {
    /*display: none;*/
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    user-select: none;
}

#video.error {
}

#message, .eye-dialog {
    font-size: 1.5rem;
    background: black;
    color: #fff;
    user-select: none;
    border: none;
    outline: none;
}

.eye-dialog {
    margin-top: 0;
}

#message::backdrop,
.eye-dialog::backdrop {
    background: #000;
}

#message i.fas, .eye-dialog i.fas,
#message i.far, .eye-dialog i.far {
    margin: 0 5px;
}

#editor {
    /*width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;*/
    padding: 10px;
    /*background: #e0e0e0;
    color: #000;*/
    box-shadow: 0 0 5px #000 inset;
    box-shadow: none;
    border: none;
    font-family: 'DM Mono', monospace;
    font-size: 1.5rem;
    overflow: auto;
}

#editor > * {
    max-width: var(--max-width);
    margin: 0 auto;
}

#text-row {
    /*background: #000;
    color: #f0f0f0;*/
    background: #e0e0e0;
    color: #000;
    border: 0px solid #777;
    box-shadow: 0 0 5px #888 inset;
    border-radius: 5px;
}

/*.eye-msg-charset-group {
    display: inline-block;
}

.eye-msg-charset-group:nth-of-type(n + 2) {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #888;
}*/

#keyboard > * {
    padding: 0px;
    /*border-radius: 10px;*/
    color: #f0f0f0;
}

#keyboard > *:nth-of-type(n + 2) {
    padding-left: 10px;
    border-left: 1px solid #555;
}

.eye-msg-charset {
    /*white-space: nowrap;*/
}

.eye-msg-charset > span,
.eye-dialog-option {
    display: inline-block;
    line-height: 1;
    padding: 0.2em 0.35em;
}


#keyboard div.highlight > span,
#keyboard span.highlight,
.eye-dialog-option.highlight {
    background: #404050;
    color: #fff;
}


body.blinking #keyboard div.highlight > span,
body.blinking #keyboard span.highlight,
body.blinking .eye-dialog-option.highlight {
    background: #208050;
    background: #e0e0e0;
    color: #000;
    background: green;
    color: #fff;
}


#keyboard span.highlight,
.eye-dialog-option.highlight {
    border-radius: 0.15em;
}

#keyboard div.highlight > :first-child {
    border-top-left-radius: 0.15em;
    border-bottom-left-radius: 0.15em;
}

#keyboard div.highlight > :last-child {
    border-top-right-radius: 0.15em;
    border-bottom-right-radius: 0.15em;
}

#keyboard i {
    font-style: normal;
}


#text {
    padding: 10px;
    margin: 0;
    outline: none;
    white-space: pre-wrap;
    font-family: 'DM Mono', monospace;
}

#text::after {
    display: inline-block;
    color: transparent;
    content: '-';
    border-left: 2px solid #888;
}

#keyboard:not(.hidden) {
    font-family: 'DM Mono', monospace;
    font-size: 1.5rem;
    margin: 10px 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 15px;
    align-items: flex-start;
}

#keyboard > * {
    padding: 0px;
    /*border-radius: 10px;*/
    color: #f0f0f0;
}

#settings-row {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100dvw;
    background: #b0b0b8;
    color: #000;
    width: 100%;
    box-shadow: 0 0 5px #000;
}

#settings {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    margin: 0 auto;
    width: 100%;
    max-width: var(--max-width);
}

button, input, select {
    font-size: inherit;
}

#settings input.interval {
    width: 3.5em;
}

#settings input.interval::-webkit-inner-spin-button,
#settings input.interval::-webkit-outer-spin-button {
    opacity: 1;
}

#settings .start-stop[data-action="stop"]::before {
    content: '🛑 ';
}

#settings .start-stop[data-action="stop"]::after {
    content: 'Stop';
}

#settings .start-stop[data-action="start"]::before {
    content: '🟢 ';
}

#settings .start-stop[data-action="start"]::after {
    content: 'Restart';
}

#eye-msg-select {
    margin-right: 10px;
    margin-top: 0px;
    font-size: 7em;
    color: #505050;
    z-index: 1;
    opacity: 1;
    line-height: 1;
}

#eye-msg-select.viewed {
    opacity: 1;
    color: green;
}

/**
 * Dialogs
 */
.eye-dialog-options {
    color: #888;
    font-family: 'DM Mono', monospace;
}