html
{ 
    margin:0; 
    padding:0; 
 } 

body
{
    font-family: 'Courier New', courier, Calibri, Arial, modern, monospace, sans-serif;
    font-size: 80%;
    color: #00DD00;
    background-color: black;
    scrollbar-base-color: black;
    scrollbar-track-color: black;
    scrollbar-face-color: #006600;
    scrollbar-arrow-color: #006600;

}

hr
{
    color: #00DD00;
    background-color:#00DD00;
    border-width:0;
    height:1px;
}

::-webkit-scrollbar
{
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb
{
    border:1px solid;
    border-radius:5px;
    color: black;
    background: #006600;
}

::-webkit-scrollbar-button
{
    border:1px solid;
    border-radius:5px;
    height: 10px;
    width: 10px;
    color: black;
    background: #006600;
}

::-webkit-scrollbar-corner
{
    color: black;
    background: black;
}

a:link {
    color: #00FFFF;
}

.textbox
{
    font-family: 'Courier New', courier, Calibri, Arial, modern, monospace, sans-serif;
    color: #00DD00;
    border: 0px;
    background-color: black;
    width: 90%; 
    height: 95%
}

.textbox:focus
{
    outline:none;
}

.left
{
    float: left;
    position: relative;
}
.right
{
    float: right;
    position: relative;
}

.textRight
{
    text-align: right;
}

.softBorder
{
    border:2px solid;
    border-radius:5px;
    padding:3px;
}

.noBorder
{
    border:0px;
    padding:1px;
    border-spacing: 0px;
    border-collapse: collapse;
}

.verticalScroll
{
   overflow-y:auto; 
   overflow-x: hidden;
}

.spacer
{
    height:1px;
    width: 99.9%;
}

.mainGrid
{
    max-height:97%;
}

.historyBox
{
    max-width: 99.9%;
}

.pictureBox
{
    position: inherit;
    right: 0;
}

.stateBox
{
    max-width: 99.9%;
}

.boxNormal
{
        grid-column: 1 / span 3; 
        width:99.9%;
}

.boxNarrow
{
        grid-column: 1 / span 2; 
}

.inputLineBox
{
    width:99.9%;
}

.statusBarBox
{
    transition:color 0.5s;
    -webkit-transition:color 0.5s;
    -moz-transition:color 0.5s;
    -o-transition:color 0.5s;
}

.statusBarText
{   
    min-height:9px; 
    max-height:16px; 
    width:99.9%;  
    vertical-align: middle;
}

.emoji 
{
    margin-left: 5px;
}

.noFilter {filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%);} /* no change */
.darkGreenFilter {filter: invert(0%) sepia(80%) saturate(1000%) hue-rotate(80deg) brightness(20%);} /*#006600*/
.brightGreenFilter {filter: invert(0%) sepia(80%) saturate(1000%) hue-rotate(80deg) brightness(80%);} /*#00FF00*/
.brightYellowFilter {filter: invert(0%) sepia(80%) saturate(1000%) hue-rotate(0deg) brightness(100%);} /*#FFFF00*/
.amberFilter {filter:  invert(0%) sepia(80%) saturate(1000%) hue-rotate(0deg) brightness(50%);} /*#FF9900*/
.brightRedFilter {filter: invert(0%) sepia(90%) saturate(1000%) hue-rotate(309deg) brightness(40%);} /*#FF0000*/
.darkRedFilter {filter: invert(0%) sepia(90%) saturate(1000%) hue-rotate(309deg) brightness(15%);} /*#770000*/

img{
    position: inherit;
    aspect-ratio: auto 1 / 1;
    filter: invert(0%) sepia(100%) saturate(1000%) hue-rotate(80deg) brightness(120%); /*sepia is not 0 on colour wheel it's a deep orange*/
    max-width: 99.9%;
    max-height: 99.9%;
    object-fit: contain;
    position: relative;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

.softBorder.historyBox{}
.softBorder.inputLineBox{}
.softBorder.statusBarBox{}
.softBorder.stateBox.verticalScroll{}
.softBorder.historyBox.verticalScroll{}
.softBorder.pictureBox{}

.fadeIn {
    -webkit-animation: fadein 0.5s linear forwards;
    animation: fadein 0.5s linear forwards;
}

.fadeOut {
    -webkit-animation: fadeout 0.5s linear forwards;
    animation: fadeout 0.5s linear forwards;
}

@-webkit-keyframes fadein {
  100% { opacity: 1; }
  0% { opacity: 0; }
}

@keyframes fadein {
  100% { opacity: 1; }
  0% { opacity: 0; }
}
@-webkit-keyframes fadeout {
  100% { opacity: 0; }
  0% { opacity: 1; }
}

@keyframes fadeout {
  100% { opacity: 0; }
  0% { opacity: 1; }
}

/* css grid layout */
            #mainGrid {
                display: grid;
                grid-template-columns: 4fr 1fr 1fr;
                grid-template-rows: 1fr 1fr 1fr 1fr 1fr 18px 3px 16px;
            
                gap: 2px;
                width: 99.5%;
                height: 96dvh;
            }
            #interaction {min-height:20dvh; grid-row: 1 / span 2;}
            #images {min-height:20dvh; width:99.9%; grid-column: 3; grid-row: 1 / span 2;}
            #current_state {min-height:35dvh; grid-row: 3 / span 3;}
            #user_input {min-height:14px; max-height:18px; font-size:85%; width:99.9%; grid-column: 1 / span 3; grid-row: 6; }
            #status_bar {min-height:14px; max-height:16px; font-size: 85%; width:99.9%; grid-column: 1 / span 3; grid-row: 8;}

            /* portrait on mobile */
            /* try something like window.matchMedia("(pointer: coarse)").matches window.innerWidth <= 768;*/
            @media (pointer: coarse) and (max-width: 800px ) {
                #mainGrid {
                grid-template-columns: 4fr 1fr 1fr;
                grid-template-rows: 16px 2px 18px 1px auto auto;
                gap: 1px;
                width: 99.5%;
                height: 96dvh;
                }
                #status_bar { min-height:9px; max-height:16px; font-size: 80%; width:99.9%; font-size: 80%; grid-column: 1 / span 3; grid-row: 1;}
                #user_input {min-height:10px; max-height:18px; font-size:90%; width:99.9%; grid-column: 1 / span 3; grid-row: 3;}
                #current_state {min-height:35dvh; grid-row: 5;}
                #images {width:99.9%; grid-column: 1 / span 3; grid-row: 6;}
                #interaction {grid-row: 6; display:none}
            }