:root {
    --bg-color: #091121;
    --maintext-color: #c8ecff;
    --link-color: #00c2ff;
    --subdued-color: #ddd;
    --highlight-bg-color: #ffa400;
    --highlight-text-color: #091121;
    background-color: var(--bg-color);
    color: var(--maintext-color);
    font-family: 'Open Sans', 'Roboto', sans-serif;
}

html, body, input {
    background-color: var(--bg-color);
    color: var(--maintext-color);
    font-family: 'Open Sans', 'Roboto', sans-serif;
}

#lineinput-prefix {
    background-color: var(--bg-color);
    color: var(--maintext-color);
}

#lineinput-field {
    background-color: var(--bg-color);
    color: var(--maintext-color);
}

.lighttext {
    color: var(--subdued-color);
}

/* Left column for the sidebar with the list of commands */
.column-left {
	position: fixed;
	top: 0;
    bottom: 0;
	left: 0;
    padding: 8px;
    width: 15%;
	background-color: var(--bg-color);
    color: var(--subdued-color);
    overflow: auto;
    box-sizing: border-box;
    border-right-style: solid;
	border-width: thin;
	border-color: var(--subdued-color);
    /* scrollbar for Firefox: 
    (but one should also try what the default looks like, could be okay) */
    scrollbar-color: var(--highlight-bg-color) var(--bg-color);
    font-size: medium;
}

/* customized scrollbar for the left column */
/* works on Chrome and probably Safari, but not on Firefox */
.column-left::-webkit-scrollbar {
    width: 12px;
    background-color: var(--bg-color);
}

/* scrollbar handle */
::-webkit-scrollbar-thumb {
  background: var(--bg-color);
  border-radius: 20px;
  border: 1px solid var(--subdued-color);
}

/* scrollbar handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--highlight-bg-color); 
}

/* links (for commands) inside the left sidebar */
.column-left a {
	display: block;
	padding: .1em 0.5em .1em 1em;
	color:var(--link-color);
    text-decoration: none;
}

.column-left a:hover {
	background-color: var(--highlight-bg-color);
    color: var(--highlight-text-color);
}

/* column at the right of the screen, for the location image and the inventory */
.image-and-inventory-container {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40%;
    background-color: var(--bg-color);
    color: var(--subdued-color);
    box-sizing: border-box;
    padding: 5px;
    border-left-style: solid;
	border-width: thin;
	border-color: var(--subdued-color);
    overflow: auto;
}

.image-container-rightside {
    position: relative;
    top: 0;
    box-sizing: border-box;
}

.status-line-rightside {
    position: relative;
    box-sizing: border-box;
    color: var(--maintext-color);
}

/* links (for directions) in the exit list */
.status-line-rightside a {
    display: inline;
	color:var(--link-color);
    text-decoration: none;
}

.status-line-rightside a:hover {
	background-color: var(--highlight-bg-color);
    color: var(--highlight-text-color);
}

.inventory-container-rightside {
    position: relative;
    box-sizing: border-box;
    color: var(--maintext-color);
}

/* links (for objects) in the inventory */
.inventory-container-rightside a {
    display: inline;
	color:var(--link-color);
    text-decoration: none;
}

.inventory-container-rightside a:hover {
	background-color: var(--highlight-bg-color);
    color: var(--highlight-text-color);
}

/* vex is for the modal windows/dialogs */
body .vex.vex-theme-plain .vex-content {
    max-width: 1000px;
    width: 90%;
}

.vex.vex-theme-plain {
  padding-top: 30px;        /* original: 160px */
  padding-bottom: 30px;     /* original: 160px */
}

.vex.vex-theme-plain .vex-content {
    background: #000;
    color: var(--maintext-color);
    /*
    padding: 1em;
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    width: 450px;
    font-size: 1.1em;
    line-height: 1.5em;
    */
    border: double 5px;
}

.vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="text"] {
    background: #00105d;
}

.vex a {
    display: inline;
	color:var(--link-color);
    text-decoration: none;
}

.vex a:hover {
	background-color: var(--highlight-bg-color);
    color: var(--highlight-text-color);
}

/* the column in the middle where the main game text and prompt shall appear */
#output {
    max-width: 960px;
    position: relative;
	top: 0;
    left: 15%;
    margin: 0px;
    padding: 20px;
    width: 45%;
    box-sizing: border-box;
    background-color: var(--bg-color);
    color: var(--maintext-color);
    font-size: large;
}

#output a {
	color:var(--link-color);
    text-decoration: none;
}

#output a:hover {
	background-color: var(--highlight-bg-color);
    color: var(--highlight-text-color);
}

#output a.clandestine-link {
    color: var(--maintext-color);
    text-decoration: none;
}

#output a.clandestine-link:hover {
	background-color: var(--highlight-bg-color);
    color: var(--highlight-text-color);
}

/* the container for the compass rose buttons */
.compassrose {  
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-content: space-around;
    top: 0;
    left: 0;
    background-color: var(--bg-color);
    text-align: center;
    font-size: medium;
}

/* the buttons themselves */
.compassrose a {     
    background-color: var(--bg-color);
    color: var(--link-color);
    padding: 1px;
    margin: 2px;
    border: 1px solid gray;
    display: inline-block;
}

/* the currently invalid directions */
.compassrose-notlinked {
    padding: 1px 1px;
    margin: 2px;
    border: 1px solid gray;
    display: inline-block;
}