body {
    margin: 0;
    padding: 0;
    font-family: monospace;
    background-color: #111111;
    color: #EEE;
    overflow: hidden;
}

#output {
    height: calc(100vh - 60pt);
    padding: 10px;
    overflow-y: scroll;
    font-size:16pt;
    background-color: #300A24;
    scrollbar-color: #26001A;
    order: 1;

    display: flex;
    flex-direction: column;
}

#output p {
    margin: 2pt;
}

#output pre {
    margin: 2pt;
}


::-webkit-scrollbar-track {

    border-radius: 10px;
    background-color: #26001A;
  }

  ::-webkit-scrollbar-corner {
    background-color: #26001A;
  }
  
::-webkit-scrollbar {
    width: 12px;
    background-color: #26001A;
  }
  
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #AAAAAA;
  }



#input {
    background-color: #26001A;
    color: #EEE;
    border: none;
    width: 100%;
    height: 18pt;
    font-family: monospace;
    font-size: 16pt;
    padding: 5px;
    box-sizing: border-box;
    order: 2;
}

.red {
    color: #F44336;
}

.green {
    color: #4CAF50;
}

footer {
    margin: 5pt;
    display: table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    height:10pt;
    order:3;
}

a, a:visited {
    color:white;
}
a:hover {
    color:#CCCCCC;
}


#container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Reverse order for mobile (max-width < 600 px) or @media (pointer:coarse) */
@media (pointer:coarse)  {
    #output {
        order: 2;
        flex-direction: column-reverse;
        padding-bottom: 100vh;
        margin-top:2pt;
    }
    body {
        padding-top: 4pt;
        padding-left:2pt;
        padding-right:2pt;
    }
    #input {
        order: 1;
        background-color: #111111;
        height: 30pt;
        margin-bottom: 2pt;
        margin-top:1pt;
    }
    footer {
        order: 3;
    }

}