body {
    font-family: 'Courier New', Courier, monospace;
    font-size: small;
    font-weight: 700;
    color: black;

    margin: 0 0;
    padding: 0 0;

    background-color: firebrick;
}

div.active {
    background-color: #eeeeee80;
    border: 3px dashed yellow;

    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;

    font-weight: 800;
    font-size: x-large;
}

div.layout {
    background-color: aqua;

    display: grid;

    grid-template-areas:
        "content    content content log log"
        "content    content content log log"
        "content    content content log log"
        "content    content content log log"
        "content    content content detail detail"
        "content    content content detail detail"
        "content    content content detail detail"
        "content    content content detail detail"
        "error      error   error error error";
        
    height: 100vh;
    width: 100vw;
}

div.content {
    grid-area: content;

    border: 1px solid purple;
}

div.detail {
    grid-area: detail;
}

div.error {
    grid-area: error;
    font-weight: 500;
    color: red;
    border: 0px;
    text-align:center;
    visibility: hidden;

    opacity: 0;
}

div.error.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 100ms ease-in, visibility 0ms ease-in 250ms;
}

div.hideoverlay {
    opacity: 0;
    transition: opacity 20s;
}

div.log {
    grid-area: log;

    border: 1px solid brown;
    padding: 1vh 1vw;

    background-color: blanchedalmond;

    overflow: scroll;

    width: 100%;
    height: 60vh;
}

div.modal {
    position: absolute;
    top: 0vh;
    left: 0vw;
    right: 0vw;
    bottom: 0vh;

    background-color: rgba(149, 165, 166, 0.7);

    padding: 0px;
}

div.modal-content {
    margin-bottom: 15vh;
    margin-top: 15vh;
    margin-left: 15vw;
    margin-right: 15vw;

    height: 70vh;
    opacity: 100%;

    background-color: bisque;

    border: 3px solid rgb(149, 165, 166);

    padding: 5vh 5vw;
}

div.npc {
    border: 1px solid orange;
    text-align: center;
}

div#overlay {
    display: none;
    position: absolute;
    top: 100px;
    left: 100px;
    width: 400px;
    height: 400px;
    /* background-color: orange; */
    z-index: 0;

    text-align: center;
}

div.pc {
    text-align: center;
}

table#field {
    border: 1px solid green;
    height: 100%;
    width: 100%;
    border-spacing: 0px;
}

table#field td {
    height: 9%;
    width: 9%;
    margin: 0.1%;
    text-align: center;
}

.terrain-tree {
    background: 
    radial-gradient(#13bc27 1vw, #000000 19%, transparent 20%)
    , 
    radial-gradient(#8B9556 1vw, transparent 15%)
    , greenyellow
    ;
  background-position: top left, 1vw .5vw;
  background-repeat:repeat;
}


.terrain-rock {
    background:
      repeating-conic-gradient(
        from 0deg at 80% 50%,
        #85878680 0% 8.25%,
        #CAB7A280 8.25% 16.5%,
        #BFB59E80 16.5% 25%
      ),
      repeating-conic-gradient(
        from 15deg at 50% 50%,
        #B4ADA380 0% 8.25%,
        #C4B1AE80 8.25% 16.5%,
        #e7f83080 16.5% 25%
      ),
      repeating-conic-gradient(
        from 0deg at 20% 50%,
        #410B13ff 0% 8.25%,
        #252323ff 8.25% 16.5%,
        #5A3A31ff 16.5% 25%
      )
      ;
  }
  


.terrain-water {
    /* background-color: #3F88C5; 
    
    
    
    1B4965
    62B6CB
    BEE9E8
    CAE9FF
    5FA8D3
    
    */
    background: 
        repeating-radial-gradient(#3F88C530, #65AFFF30 50%, transparent 20%),
        repeating-radial-gradient(#5FA8D330, #CAE9FF30 20%, transparent 40%)
    ;
}

.terrain-path {
    /* background-color: #3F88C5; */
    background: linear-gradient(#F2D398, #F19953, #F2D398,#F2D398, #F19953, #F2D398,#F2D398, #F19953, #F2D398,#F2D398, #F19953, #F2D398,#F2D398, #F19953, #F2D398,#F2D398, #F19953, #F2D398,#F2D398, #F19953, #F2D398);
}