* {

    margin: 0px;

    overflow-x: hidden;
    overscroll-behavior-y: none;

    box-sizing: border-box;

}

::-webkit-scrollbar {
    display: none;
}

body {
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

#forkme {

    top: 0px;
    right: 0px;

    width: 150px;
    height: 150px;

    cursor: pointer;
    position: fixed;

    z-index: calc(9e999);

    clip-path: polygon(15px 0px, 60px 0px, 150px 90px, 150px 135px);

}

#compatible,
#incompatible {
    display: none;
}

#compatible {
    width: 100vw;
    height: 100vh;
}

#incompatible {

    width: 50%;

    border: 3px solid red;
    border-radius: 10px;

    margin: 10% auto;
    padding: 30px;

}

#incompatible img#error {

    width: 100px;
    height: 100px;

    margin: auto;
    display:block;

}

#incompatible p#warning,
#incompatible p#warning a {
    margin: 30px 0px auto;
    color: white;
}

div#settings {

    width: 100%;
    height: 50px;

    padding: 5px;

    display: flex;
    align-items: center;

}

div#settings a {

    margin: 5px;

    color: white;
    text-decoration: none;

    display: flex;
    align-items: center;

}

div#settings img#help {

    width: 25px;
    height: 25px;

    cursor: pointer;

}

div#settings img#reset,
div#settings img#upload {

    margin: 5px;

    width: 20px;
    height: 20px;

    cursor: pointer;

}

div#settings img#upload {

    cursor: not-allowed;

    opacity: 0.5;

}

div#settings input#uploader {
    display: none;
}

button#connection {

    margin: 5px;
    padding: 7px;

    outline: none;
    cursor: pointer;

    color: white;
    font-weight: bold;

    border: none;
    border-radius: 5px;

}

button#connection.connect {
    background-color: green;
}

button#connection.disconnect {
    background-color: red;
}

input.control,
select.control {

    width: 65px;
    height: 20px;

    margin-right: 5px;

    outline: none;
    box-shadow: none;

    border-radius: 5px;
    border: 1px solid white;

    color: white;
    background-color: black;

}

input.control {
    cursor: text;
}

select.control {
    cursor: pointer;
}

input#timestamps,
input#colors,
input#emojis {

    cursor: pointer;

    margin-right: 5px;

    outline: none;
    box-shadow: none;

    border-radius: 5px;
    border: 1px solid white;

}

#buffer-size.control {
    width: 50px;
}

#data-bits.control,
#stop-bits.control {
    width: 40px;
}

#flow-control.control {
    width: 85px;
}

div.headings {
    height: 60px;
    white-space: nowrap;
}

div.heading {
    width: 50%;
    padding: 10px;
    display: inline-block;
}

h2#input-heading {
    color: cyan;
    font-size: 30px;
    text-align: center;
}

h2#output-heading {
    color: magenta;
    font-size: 30px;
    text-align: center;
}

div#input,
div#output {

    width: calc(50vw - 0px);
    height: calc(100vh - 150px);

    display: inline-block;

    white-space: normal;
    vertical-align: top;

    overflow-x: hidden;
    overflow-y: scroll;

    color: white;

    padding: 5px 10px;

}

div#input p,
div#output p {

    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;

    font-size: 16px;

}

span.emoji {
    line-height: 1;
    font-size: 0.75em;
    vertical-align: middle;
}

div#input {

    float: left;

    border-top: 1px solid cyan;
    border-right: 0.5px solid white;

}

div#input .pointer {
    color: cyan;
}

div#output {

    float: right;

    border-top: 1px solid magenta;
    border-left: 0.5px solid white;

}

div#output .pointer {
    color: magenta;
}

span.time {
    color: gray;
}

span.info {
    color: dodgerblue;
}

span.error {
    color: red;
}

span.success {
    color: lime;
}

b.x {
    color: #E74C3C;
}

b.y {
    color: #27AE60;
}

b.z {
    color: #3498DB;
}

b.e {
    color: #F1C40F;
}

b.t {
    color: #B5A642; /* Brass */
}

b.b {
    color: #B5A642; /* Brass */
}

b.w {
    color: gray;
}

textarea#prompt {

    width: 100%;

    bottom: 0px;
    padding: 10px;

    font-size: 16px;
    max-height: 50vh;

    position: fixed;

    outline: none;
    box-shadow: none;
    border-style: none;

    background-image: linear-gradient(to right, black 50%, white 50%);
    background-repeat: repeat-x;
    background-size: 10px 1px;
    background-color: black;
    background-position: top;

    caret-color: cyan;
    color: white;

    cursor: text;
    resize: none;

}