.content {
     background-color: lightyellow;
     border: 5px solid #ffd700;
     border-radius: 1rem;
     grid-area: content;
     padding: 1.5rem;
     overflow-y: scroll;
     word-wrap: anywhere;
}

.container {
     height: 100%;
     width: 100%;
     margin: 0;
}

.disabled {
     opacity: 0.4;
     pointer-events: none;
}

.flash-message {
     margin-left: auto;
     margin-right: 0;
     margin-top: 0;
     margin-bottom: 0;
     color: red;
}

.flex-container {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}

.flex-container > input {
     margin: 0.3rem;
}

.grid-container {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr 1fr 1fr 3fr;
     grid-template-areas: 'nav' 'peers' 'posts' 'content';
     grid-gap: 0.5rem;
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 0.2rem;
     overflow: hidden;
     height: 85vh;
}

@media only screen and (min-width: 600px) {
     .grid-container {
         grid-template-columns: repeat(4, 1fr);
         grid-template-rows: 1fr 3fr 4fr;
         grid-template-areas:
            'nav nav nav nav nav'
            'peers posts posts posts posts'
            'peers content content content content';
    }
}

.icon {
     margin-left: 1rem;
}

.nav {
     background-color: lightgreen;
     border: 5px solid #19a974;
     border-radius: 1rem;
     grid-area: nav;
     padding: 1rem;
}

.peers {
     background-color: lightblue;
     border: 5px solid #357edd;
     border-radius: 1rem;
     grid-area: peers;
     text-align: left;
}

.peers > ul {
     padding-left: 1rem;
}

.peers > ul > li > a {
     justify-content: space-between;
}

.peers > ul > li > a > p {
     margin: 0;
     font-weight: bold;
     padding-right: 1rem;
}

.post > ul {
     padding-left: 1rem;
     padding-right: 1rem;
}

.posts {
     background-color: bisque;
     border: 5px solid #ff6300;
     border-radius: 1rem;
     grid-area: posts;
     overflow-y: scroll;
}

.posts > ul {
     padding-left: 1rem;
     padding-right: 1rem;
}

.posts > ul > li > a {
     justify-content: space-between;
}

.posts > ul > li > a > p {
     margin: 0;
}

.selected {
     background-color: #f9c587;
}

a {
     text-decoration: none;
     color: black;
}

code {
     word-wrap: anywhere;
}

form {
     margin-left: auto;
     margin-right: 0.5rem;
}

h1 {
     margin-left: 1rem;
}

img {
     width: 3rem;
}

li {
     list-style: none;
     font-size: 12px;
}