html, body {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Press Start 2P', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 12px;
    margin: 0;
    padding: .5rem;
    box-sizing: border-box;
}

body, pre {
    color: #eee;
    background-color: #252525;
}

a, a:hover {
    color: #eee;
}
a {
    text-decoration: underline;
}

.message-list {
    display: flex;
    flex-direction: column;
}
.message-list > .message {
    display: flex;
    align-items: flex-end;
}
.message-list > .message:not(:first-child) {
    margin-top: 5rem;
}
.message-list > .message.-left {
    align-self: flex-start;
}
.message-list > .message > *:first-child {
    min-width: 6rem;
}
.message-list > .message.-left > *:first-child {
    margin-right: 1rem;
}
.message-list > .message.-right {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.message-list > .message.-right > *:first-child {
    margin-left: 1rem;
}

.mobile-only {display: block;}
.tablet-and-up-only {display: block;}

@media screen and (max-width: 767px) {
    .tablet-and-up-only {display: none!important;}
}

@media screen and (min-width: 768px) {
    .mobile-only {display: none !important;}
}