@font-face {
    font-family:vt323;
    /* 
        vt323 font by Peter Hull, available for free on Google Fonts.
        https://fonts.google.com/specimen/VT323
    */
    src:url(VT323-Regular.ttf);
}

@font-face {
    font-family:hack;
    /* 
        Hack font by Chris Simpkins and David van Gemeren, available for free w/ MIT license.
        https://sourcefoundry.org/hack/
    */
    src:url(Hack-Regular.ttf);
}

* {
    padding:0;
    margin:0;
}


/* width */
::-webkit-scrollbar {
  width: 1px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px transparent;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
}

BODY {
    /*position:relative;
    top:0%;
    left:0%;
    height:100%;
    width:100%; 
    overflow:hidden;  */  
}

A { text-decoration:underline; }
A:hover { text-decoration:none; }

#monitor {
    background-color:black;
    position:absolute;
    top:0%;
    left:0%;
    height:100%;
    width:100%; 
    overflow:hidden; 
    z-index:100; 
}

#webampContainer {
    background-color: blue;
    position:absolute;
    top:0%;
    left:0%;
    height:100%;
    width:100%; 
    overflow:hidden;
    z-index:10;
}

#webamp {
    z-index:200!important;
}

#screen { 
}

#cursor {
    /* padding-top:0.5ch; */
}

#screenContainer, #commandLineInputBox, INPUT, A {
    /* retro amber monitor color from: https://www.wambooli.com/blog/?p=6451 */
    background-color:black;
    color:rgba(255, 127, 0, 1);
    font-family:hack;
    font-size:18px;   
    font-kerning:none;
    text-transform:full-width;
}

#screenContainer {
    position:relative;
    margin:auto;
    margin-top:2%;
    height:85%;
    max-height:85%;
    /* you're totally right! old terminals were 80 characters, 
    but then the cool ojfs ascii art would wrap, wouldn't it? */
    width:85ch; 
    border:1px solid rgba(255, 127, 0, 1);
    overflow-wrap: break-word;
    padding:1ch;
    overflow-y:scroll;    
}

#commandLineInputBox,
#commandLineInputBox:focus,
#commandLineInputBox:focus:not(:focus-visible) {
    width:90%;
    border:0;
    outline:0;
    -webkit-appearance:none;
    outline:none!important;
    caret-color:rgba(255, 127, 0, 1);
    margin-bottom:5px;
}

#commandLineInputButton {
    border:1px dotted orange;
    padding:3px 5px;
    margin-bottom:5px;
}

#webamp {
    /*top:100px!important;*/
}

@media only screen and (max-width:600px) {
    * {}

    BODY {
        height:100%;
        width:100%;       
    }

    #monitor {
        text-transform:none;
    }

    #screenContainer, #commandLineInputBox, INPUT, A {
        text-transform:none!important;
        color:#66FF66!important;
        font-size:12px;   
    }

    #webamp {
        top:10px!important;
    }

    #screenContainer {
        height:94%;
        margin:2%;
        padding:2%;
        max-height:none;
        width:92%;
        max-width:92%;
        border:1px solid #66FF66;
    }

    #commandLineInputBox,
    #commandLineInputBox:focus,
    #commandLineInputBox:focus:not(:focus-visible) {
        caret-color:#66FF66;
        font-size:12px;
        color:#66FF66!important;
    }

    #commandLineInputButton {
        border:1px dotted #66FF66;
    }
}