* {
    box-sizing: border-box;
    font-family: monospace;
}
body
{
    font-size: 20px;
    background-color: rgba(20 20 20);
    color: white;

    font-family: monospace;

    margin: 0px;
    padding: 0px;
}
form
{
    margin: 0px;
}
button:hover
{
    cursor: pointer;
}
.hidden
{
    display: none;
}



/* HOME PAGE */
#login input
{
    padding: 0.2em;
    font-size: 1em;
}
#login button
{
    font-size: 1em;
}










:root
{
    --system-color: #78da78;
    --system-bg-color: rgb(80 80 80);

    --tile-land-color: green;
    --map-tile-px-size: 32px;
}
#the_game
{
    display: grid;
    grid-template-columns: 50dvw 50dvw;
}
@media (max-width: 768px)
{
    #the_game 
    {
        grid-template-rows: 1fr max-content;
        grid-template-columns: none;
    }
}
#the_game .left
{
    display: grid;
    grid-template-rows: 1fr max-content;
    max-height: 100dvh;
}
#the_game .right
{
    display: grid;
    /*grid-template-rows: max-content 1fr;*/
    grid-template-rows: 68dvh 4dvh 28dvh;
}
form#input
{
    display: grid;
    grid-auto-flow: column;

    height: 40px;
}

#messages
{
    height: 100%;
    overflow-y: scroll;
    padding: 8px;
}
#messages div
{
    margin-bottom: 0.25em;
    padding: 6px;
}
#messages .system
{
    color: var(--system-color);
    background-color: var(--system-bg-color);
}
#messages .error
{
    color: var(--error-color);
    background-color: var(--error-bg-color);
    font-weight: bold;
}
#messages .success
{
    color: var(--success-color);
    background-color: var(--success-bg-color);
    font-weight: medium;
}
#messages .info
{
    color: var(--info-color);
    background-color: var(--info-bg-color);
}
#messages .attack
{
    color: white;
    background-color: rgb(255 0 0)
}
#messages .tile_description
{
    background-color: rgb(0 100 0);
}
#messages .npc_description
{
    background-color: rgb(0 0 100);
}
#messages .shout
{
    background-color: white;
    color: black;
    max-width: 100%;
    overflow-wrap: anywhere;
}
#messages .say
{
    background-color: rgb(100 100 100);
    color: white;
    max-width: 100%;
    overflow-wrap: anywhere;
}
#messages .help
{
    background-color: yellow;
    color: black;
}

#map
{
    display: grid;
    justify-items: center;
    align-items: center;
    justify-content: center;
}
#map .tile
{
    width: var(--map-tile-px-size);
    height: var(--map-tile-px-size);
    text-align: center;
}
#map .tile:hover
{
    cursor: pointer;
    background-color: rgb(20 20 20);
}

#info_box {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 1em;
}
#movement_buttons
{
    display: grid;
    grid-auto-flow: column;
}
#stats
{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
#players .player
{
    display: grid;
    grid-auto-flow: column;
}
#players .player > div
{
    color: #5abd5a;
}
#npcs .npc
{
    display: grid;
    grid-auto-flow: column;
}
#npcs .npc > div
{
    color: #c94747;
}
#players .player .player_action,
#npcs .npc .npc_action
{
    text-decoration: underline;
}
#players .player .player_action:hover,
#npcs .npc .npc_action:hover
{
    cursor: pointer;
}