#text-client {
    height: 20%;
}

#log {
    border: 1px solid white;
    width: 95%;
    height: 80%;
    margin: auto;
    background-color: #1b242f;
    overflow-y: scroll;
    list-style-type: none;
    padding: 0 5px;
}

#log li {
    text-align: left;
    margin: 2.5px 0;
}

.locationMessage {
    color: #01E774;
}

.entranceMessage {
    color: #658CD2;
}

.playerMessage, .itemMessage {
    font-weight: bold;
}

.thisPlayerMessage {
    color: #FA00FA;
}

.otherPlayerMessage {
    color: #EDEEC9;
}

/* Just for filler items. This is overridden for any item that is non-filler. */
.itemMessage {
    color: #00E8E8;
}

/* Just for items that are progression and nothing else. This is overridden for items with multiple flags. */
.itemMessage.progressionItemMessage {
    color: #A38FDF;
}

/* Just for items that are useful and nothing else. This is overridden for items with multiple flags. */
.itemMessage.usefulItemMessage {
    color: #718AD6;
}

/* Just for items that are progression and useful, but not traps. This is overridden for items with all three flags. */
.itemMessage.progressionItemMessage.usefulItemMessage {
    color: rgb(255, 223, 0);
}

/* Just for items that are traps and nothing else. This is overridden for items with multiple flags. */
.itemMessage.trapItemMessage {
    color: rgb(211, 113, 102);
}

/* Just for items that are progression and traps, but not useful. This is overridden for items with all three flags. */
.itemMessage.progressionItemMessage.trapItemMessage {
    color: rgb(255, 172, 28);
}

/* Just for items that are useful and traps, but not progression. This is overridden for items with all three flags. */
.itemMessage.usefulItemMessage.trapItemMessage {
    color: rgb(174, 120, 196);
}

/* Items that are progression, useful, and traps all at once somehow. */
.itemMessage.progressionItemMessage.usefulItemMessage.trapItemMessage {
    color: rgb(128, 255, 128);
}

/* Classes for color messages from the server */
.bold {
    font-weight: bold;
}

.underline {
    text-decoration: underline;
}

.black {
    color: black;
}

.red {
    color: red;
}

.green {
    color: green;
}

.yellow {
    color: yellow;
}

.blue {
    color: blue;
}

.magenta {
    color: magenta;
}

.cyan {
    color: cyan;
}

.white {
    color: white;
}

.black_bg {
    background-color: black;
    color: white;
}

.red_bg {
    background-color: red;
    color: black;
}

.green_bg {
    background-color: green;
    color: black;
}

.yellow_bg {
    background-color: yellow;
    color: black;
}

.blue_bg {
    background-color: blue;
    color: white;
}

.magenta_bg {
    background-color: magenta;
    color: black;
}

.cyan_bg {
    background-color: cyan;
    color: black;
}

.white_bg {
    background-color: white;
    color: black;
}