:root {
    /* --main_color: #d8345f; */
    --main_color: #bd4061;
}
* {
    margin: 0;
    padding: 0;
}
body {
    width: 50%;
    margin: 0 auto;
    padding-top: 8em;
    background: #30475e;
    position: relative;
}
h1 {
    font-size: 3em;
}
input, button {
    font-size: 3em;
}
input {
    margin-bottom: 1em;
}
.fa-fire {
    font-size: 5em;
    color: #fd7e14;
}
.heading {
    color: #ffffff;
}
.chat-container {
    background: #fff;
}
.entry {
    background: #ffffff;
    border: 2px solid: #aaaaaa;
    padding: 1em;
    margin: 2em 0;
    position: relative;
    color: #121212;
}
.entry .title{
    display: inline;
}
.entry .date{
    position: absolute;
    font-size: 1.3em;
    top: 1em;
    right: 1em;
}
.entry .content {
    font-size: 1.5em;
    line-height: 1.5em;
}
.entry .author {
    /* font-style: italic; */
    font-weight: 400;
    color: #333333;
}
.nav {
    width: 50%;
    padding: 1em;
    color: white;
    background: var(--main_color);
    position: fixed;
    top: 0;
    z-index: 999;
}
.nav .nav-item {
    color: #ffffff;
    font-size: 2em;
    margin: 0 0.5em;
}
.nav .nav-item.home {
    font-size: 3em;
}
a {
    text-decoration: none;
}
a.active, a:hover {
    font-style: italic;
}
.enter-body {
    font-size: 1.5em;
}
.nav-right {
    float: right;
}
button {
  padding: 0.35em 1.25em;
  border: 0.1em solid rgba(255,255,255,0);
  color: white;
  background: var(--main_color);
  font-size: 1.5em;
  border-radius: 1em;
}
button:hover {
  border: 0.1em solid white;
}
.chat-container{
    padding: 1em;
    width: 100%;
    font-family: 'Share Tech Mono', monospace;
}
.chat-msg {
}
.chat-msg-content {
    padding: 0.35em 1.25em;
    border-radius: 1em;
    font-size: 1.5em;
    display: inline-block;
    max-width: 30%;
    margin: 0;
}
.chat-left .chat-msg-content {
    background: #ececec;
    color: #333;
}
.chat-right .chat-msg-content {
    background: #222831;
    color: #fff;
}
.chat-right {
    text-align: right;
}
.chat-left {
    text-align: left;
}
.chat-enter {
    position: fixed;
    bottom: 10%;
    z-index: 999;
}

.chat-enter .enter-msg{
    margin-top: 1.5em;
    background: none;
    border: none;
    border-bottom: 2px solid #10253c;
    outline: none;
}
.chat-enter .enter-msg:hover, .chat-enter .enter-msg:active {
    border-bottom: 2px solid #fd7e14;
}
.chat-time {
    color: #555555;
}
@media only screen and (max-width: 800px){
    body {
        width: 100%;
        font-size: 0.5em;
    }
    .nav {
        width: 100%;
    }
    .container {
        padding: 2em;
    }
    .chat-container {
        width: calc(100% - 3em);
        padding: 1.5em;
    }
    .chat-msg-content {
        font-size: 2em;
    }
    .chat-time {
        font-size: 1.5em;
    }
}