/* turning body into a grid + styling ; left and right columns are always equal width */
body {
	color: #FEEBE7;
	background-color: #121212;
  	margin: 0;
  	font-family: , sans-serif; /* change font here */
    display: grid;
    grid-template-columns: minmax(150px, 1fr) fit-content(45vw) minmax(150px, 1fr);
	grid-template-rows: auto;
  	justify-items: center;
    line-height: 1.5;
}

/* ui bars styling + left & right ui bars as grid elements */
#ui-bar {
	background-color: #121212;
    text-align: center;
  	z-index: 50;
    width: 100%;
    display: flex;  
    justify-content: center;
    align-items: center;
    position: fixed;
}
#left-ui-bar, #right-ui-bar {
    border: 1px solid #FEEBE7;
    height: 350px;
  	padding: 10px;
  	padding-top: 15px;
    align-content: top;
    font-size: 90%;
    max-height: calc(100vh - 100px);
	margin: 0;
    width: 195px;
    margin-top: 4.5em;
    overflow-y: scroll;
}
#left-ui-bar {
  	grid-area: 2 / 1 / 3 / 2;
  	margin-right: 0.5em; 
  	margin-left: 1em;
    justify-self: end;
}
#right-ui-bar {
  	grid-area: 2 / 3 / 3 / 4;
  	margin-right: 1em; 
    margin-left: 0.5em;
    justify-self: start;
}
#left-ui-bar.stowed, #right-ui-bar.stowed {
	visibility: hidden;
}

/* removing ui stowing button & styling history arrow buttons */
#ui-bar-toggle {
    display: none;
}
#ui-bar-tray {
	display: ; /* add 'none' to remove history buttons */
}
#ui-bar-tray button {
    background: none;
	color: salmon;
    border: none;
    padding-right: 10px;
}
#ui-bar-tray button::before {
  	font-family:sc-icons!important;
  	font-style:normal;
    font-weight:400;
  	font-variant:normal;
  	speak:never;
    text-rendering:auto;
  	text-transform:none;
    display:block;
  	font-size:1.1em;
 	width:1em;
}
#ui-bar-tray #history-backward::before {
    content:"\f060"
}
#ui-bar-tray #history-forward::before {
    content:"\f061"
}

/* ui-bar-body: removing title & menu styling */
#title {
 	display: none; 
}
#menu li a {
    display: block;
    padding: .25em .75em;
    text-transform: uppercase;
  	color: salmon;
}
#menu li a:hover {
    font-weight:bold;
  	background-color: transparent;
  	text-decoration: none;
}
#menu ul {
    list-style: outside none none; 
    padding: 0;
  	display: inline-flex;
}
#menu-core {
  	justify-content: center;
}
#menu-core li[id|=menu-item] a::before {
    font-family: sc-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    margin-right: .35em;
}
#menu-item-restart a::before {
    content: "\f011";
}
#menu-item-saves a::before {
    content: "\f0c7";
}
#menu-item-history-forward a::before {
    content: "\f0c7";
}

/* story as grid element + styling */
#story { 
	margin: 1em;
    grid-area: 2 / 2 / 3 / 3;
    text-align: justify;
    min-width: 45vw;
  	padding: 5px;
    font-size: 100%; /* 90 */
    padding-right: 3%; 
    max-height: calc(100vh - 100px);
    overflow-y: scroll;
    line-height: 1.5;
	margin-top: 4em;
}
#story.wide {
    max-height: 100%;
    overflow-y: visible;
}

/* media query for teeny screens (story & sidebars width adjustments) */
@media only screen and (max-width: 900px) {
#story {
    min-width: unset;
}
#left-ui-bar, #right-ui-bar {
    width: auto;
}
}

/* passage styling */
#passages {
max-width: 45em;
}
#passages a {
	color: salmon;
}
#passages a:hover {
    font-weight: 600;
	text-decoration: none;
}
#passages s1 {
  font-size: 75%;
  text-align: center;
  cursor: default;
}
#passages s2 {
    font-weight:bold;
}
#passages s3, #left-ui-bar s3, #right-ui-bar s3 {
	color: salmon;
}

/* listbox styling */
.macro-listbox input, select, textarea {
  color: salmon;
  font-style: italic;
  background-color: transparent;
  border: none;
  font-size: ;
}
.macro-listbox select:hover {
  background-color: #333;
}