:root {
    --Campbell_black: #0c0c0c;
    --Campbell_gray0: #767676;
    --Campbell_gray1: #cccccc;
    --Campbell_white: #f2f2f2;
    --Campbell_blue0: #0037da;
    --Campbell_blue1: #3a96dd;
    --Campbell_blue2: #3b78ff;
    --Campbell_blue3: #61d6d6;
    --Campbell_red0: #c50f1f;
    --Campbell_red1: #e74856;
    --Campbell_yellow0: #c19c00;
    --Campbell_yellow1: #f9f1a5;
    --Campbell_green0: #13a10e;
    --Campbell_green1: #16c60c;
    --Campbell_purple0: #881789;
    --Campbell_purple1: #b4009e;
    --CGA_black: #000000;
    --CGA_gray0: #555555;
    --CGA_gray1: #aaaaaa;
    --CGA_white: #ffffff;
    --CGA_blue0: #0000aa;
    --CGA_blue1: #5555ff;
    --CGA_green0: #00aa00;
    --CGA_green1: #55ff55;
    --CGA_cyan0: #00aaaa;
    --CGA_cyan1: #55ffff;
    --CGA_red0: #aa0000;
    --CGA_red1: #ff5555;
    --CGA_purple0: #aa00aa;
    --CGA_purple1: #ff55ff;
    --CGA_brown: #aa5500;
    --CGA_yellow: #ffff55;
    --DOS_black: var(--Campbell_black);
    --DOS_gray0: #7e7e7e;
    --DOS_gray1: #bebebe;
    --DOS_white: var(--CGA_white);
    --DOS_red0: #7e0000;
    --DOS_red1: #fe0000;
    --DOS_green0: #047e00;
    --DOS_green1: #06ff04;
    --DOS_yellow0: #7e7e00;
    --DOS_yellow1: #ffff04;
    --DOS_blue0: #00007e;
    --DOS_blue1: #0000ff;
    --DOS_purple0: #7e007e;
    --DOS_purple1: #fe00ff;
    --DOS_cyan0: #047e7e;
    --DOS_cyan1: #06ffff;
}

html {

    color: var(--CGA_green1);
    background-color: var(--Campbell_black);

    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 2ch;
    line-height: 1.2ch;
    font-family: 'Courier New', Courier, monospace;

    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    
    border: none;
}

a {
    color: inherit;
    background-color: inherit;
}

a:hover {
    filter: invert(1);
}

#term {
    font-size: calc(100vw/37.5);    
}
#title {
    font-size: calc(100vw/95);
}

#title, #term {
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    max-width: 156ch;
    line-height: 1.2;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
}

#surveyBtn {
    background-color: var(--CGA_black);
    color: var(--CGA_green1);
    position: fixed;
    bottom:2vw;
    right:2vw;
    z-index: 999;
    
    border: 1px solid var(--DOS_green1);
    
    height:5ch;
}

element {
    display: auto;
    position: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;

    color: auto;
    background-color: auto;

    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 2ch;
    line-height: 1.2ch;
    font-family: 'Courier New', Courier, monospace;

    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    
    border: none;

}

#touchBtn {
    display: auto;
    position:fixed;
    top: 0;
    right: 5vw;   
    z-index: 999;

    color: var(--DOS_green1);
    background-color: var(--CGA_black);

    border: 1px dashed var(--DOS_green1);

    height: min-content;
    width: 90vw;
}

#touch-overlay {
    z-index: 998;
    background-color: rgba(100, 100, 100, 0.2);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    display: none;
}

#touch {
    border: 1px dashed var(--DOS_green1);
    background-color: var(--DOS_black);
    width: 50vw;
    height: max-content;
    position: fixed;
    top: 25vh;
    right: 25vw;
    display: inline-block;
}

#touch nav {
    width: 100%;
    position: absolute;
    top: 0;
    height: 3.25vh;
    text-align: center;
    background-color: var(--DOS_green1);
    color: var(--DOS_black);
    font-family: monospace;
}

span.modal-label {
    margin: 0;
    padding: 0;
}

.touch-close {
    position: absolute;
    top: 0;
    right: 0;
    width: min-content;
    background-color: var(--DOS_black);
    color: var(--DOS_green1);
    border: 1px solid var(--DOS_green1);
}

.touch-buttons {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.touch-button {
    width: 100%;
    background-color: #000;
    color: var(--DOS_green1);
    border: 1px dashed var(--DOS_green1);
    height: 5vh;
}


#loadingContainer {
    width: 100vw;
    text-align: left;
    display: inline;
}

#loadingContainer p {
    font-size: 3vw;
    text-align: center;
    margin: 0;
    width: 100vw;
    display: inline;
    text-align: left;
};