/* custom font test */
@font-face {
    font-family: "myfont1";
    src: url("./Prototype.ttf") format("truetype");
}
@font-face {
    font-family: "myfont2";
    src: url("./jackinput.ttf") format("truetype");
}
@font-face {
    font-family: "myfont3";
    src: url("./callingcode.ttf") format("truetype");
}

* {
    margin: 0;
    padding: 0;
}

/* always added programmatically on top of a widget that
    ordinarily does use transitions */
.noTransition {
    transition: none !important;
}

body, .noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

body {
    /*background: linear-gradient(120deg,
        #151515,
        #000000 35%,
        #0f0f0f 100%
    );
    */
    background: #090909;
    color: #eee;
    font-family: myfont3;
    font-size: 36px;
    height: 100%;
}

.window {
    position: absolute;
    z-index: 5;
    width: 800px;
    height: 600px;
    border: 3px #999 solid;
    color: #eee;
    font-size: 20px;
    background-color: #111;
}

    .window .titleBar {
        background-color: #ddd;
        color: #111;
        padding: 0.25em;
        border-bottom: 2px #eee solid;
    }

        .window .titleBar > * {
            font-weight: bold;
            color: #222;
        } .window .titleBar > span:hover {
            color: #eeee22;
            cursor: default;
        }

.console {
    padding: 0.25em 0.25em;
}

    .console li {
        list-style-type: none;
        font-size: 20px;
        padding: 0.05em 0;
    }

    .console li:nth-child(even) {
        background-color: #131313;
    }

    .console span {
        white-space: pre;
    }

    .console span.blinking {
        /*border-right: 12px #eee solid;*/
    }

    .console span.word {
        color: #e4e4cf;
    }

        .console span span {
        }

        .console span.blinking .hasCursor {
            background-color: #eee;
            color: #111;
        }
            .console span.blinking .hasCursor.red {
                background-color: #ef5b5b;
                color: #eee;
            }
            .console span.blinking .hasCursor.orange {
                background-color: #ffc000;
                color: #111;
            }
            .console span.blinking .hasCursor.green {
                background-color: #b1ec59;
                color: #111;
            }
            .console span.blinking .hasCursor.invalid {
                background-color: purple;
                color: #eee;
            }

        .console span .red {
            color: #ef5b5b;
        }
        .console span .orange {
            color: #ffc000;
        }
        .console span .green {
            color: #b1ec59;
        }
        .console span .invalid {
            color: purple;
        }

        .console span .played {
            text-decoration: line-through;
            color: #777;
            transform: translate(0, 10%) rotate(-30deg);
        }

        /* for gold stars */
        .console span strong {
            color: orange;
        }

        .console span.slashCommand span.input, .console span.slashCommand span.input * {
            color: #ffeed3 !important;
        }

    .console span.comment {
        color: #70a770;
    } .console .highlight span.comment {
        color: #7ea2b9;
    } .console .error span.comment {
        color: #ef5b5b;
    } .console .alert span.comment {
        color: #ffeed3
    }

        .console span.comment em {
            font-style: normal;
            color: #555;
        }

        .console span.comment i {
            font-style: normal;
            color: #aaa;
        }

        .console span.comment b {
            font-style: normal;
            color: #ddd;
        }

/* intended for mobile users only */
b, i, em, strong, span {
    display: inline-block;
    transition: transform 1s, border-left 0.5s, border-right 0.5s;
}
    .enlarged {
        transform: scale(2.0) translate(0, -50%);
        border-left: 1px #eee solid;
        border-right: 1px #eee solid;
    }
span, i, b, em, strong {
    display: inline-block;
}

#touchIcons {
    /*position: absolute;
    transform: translate(0, -105%);*/
    padding: 0.25em 0;
}

    #touchIcons > span {
        border: 2px #999 solid;
        border-radius: 5px;
        cursor: pointer;
        padding: 0.1em;
        margin: 0 0.25em;
        background-color: #222;
        width: 40px;
        height: 40px;
    }

        #touchIcons > span > span {
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
            #touchIcons > span > span > span {
                position: absolute;
                transform: translate(-50%, -50%);
            }

ul > li.lettersInPlay {
    font-size: 36px;
}