html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #141414;
    color: #7c7c7c;
    margin-bottom: 100px;
}

nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    margin-bottom: 30px;
}

nav>a>img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

nav a h3 {
    color: #bbbbbb;
    font-family: fantasy;
}

.matrix {
    max-width: 1500px;
}

a {
    color: #858585;
    text-decoration: none;
    cursor: pointer
}

a:hover {
    color: #00c100;
    text-decoration: none;
}

.list-group-item {
    background-color: transparent;
    border: 1px solid #424242;
}

.s-counts {
    float: right;
}

.live {
    color: #00c100;
}

.death {
    color: red;
}

.errors {
    color: #d50ef0;
}


h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

.card-header {
    border: 1px solid #262626;
/*    border: none;*/
}

.card {
    background-color: transparent;
    border: none;
}

textarea {
    background-color: transparent;
    color: #858585;
    border: 1px solid #262626;
    border-radius: 5px;
}

.form-control {
    resize: none;

    background-color: transparent;
    color: #858585;
    border: 1px solid #262626;
}

.error {
    border: 1px solid #eb0b0b;
}

.form-control:focus {
    background-color: transparent;
    color: #858585;
    border: 1px solid #262626;
}

.form-control:hover {
    background-color: transparent;
}

.terminal {
    display: block;
    height: 200px;
    padding: 0.25rem 0.5rem;
    border: 1px solid #262626;
    overflow-y: auto;
}

.btn-clear {
    position: relative;
    float: right;
}

.btn-trash {
    position: absolute;
    top: -4.6em;
    right: .5rem;
    z-index: 20;
    display: block;
    padding: .25rem .5rem;
    font-size: 75%;
    color: #858585;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    border-radius: .25rem;
    transition: all .2s ease-in-out;
}

.btn-trash:hover {
    color: red;
}

.log p {
    font-size: 15px;
}

.log p:first-child {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 2.5s steps(156, end);
}

live {
    color: rgb(16, 214, 16);
}

live::before {
    content: "LIVE ";
}

death {
    color: rgba(255, 0, 0, 0.918);
}

death::before {
    content: "DIE ";
}

error {
    color: #d50ef0;
}

error::before {
    content: "ERROR ";
}

log {
    color: rgb(243, 211, 32);
}

info {
    color: rgb(72, 72, 233);
}

proxy {
    color: rgb(252, 23, 111);
}

time {
    color: rgb(243, 32, 67);
}

response {
    color: aqua;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

.footer-thl {
    font-size: 16px;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    text-align: center
}


@media only screen and (max-width: 600px) {
    .log p:first-child {
        white-space: break-spaces;
    }
  }