/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1.5;
    font-size: 16px;
    background-color: black;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* ====== FONTS & BUTTONS ====== */
@font-face {
    font-family: "LibreFranklin";
    src: url("../fonts/libre-franklin.woff") format("woff");
    src: url("../fonts/libre-franklin.woff2") format("woff2");
}

@font-face {
    font-family: "Changa";
    src: url("../fonts/Changa-Regular.woff") format("woff");
    src: url("../fonts/Changa-Regular.woff2") format("woff2");
}

b, strong {
    font-weight: bold;
}

i, em {
    font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    display: block;
    font-family: 'Changa', Arial, Helvetica, sans-serif;
    line-height: 100%;
}

h1 {
    font-weight: bold;
    font-size: 2em;
    margin: 0 auto 1em auto;
    color: white;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}

p {
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
}

button, input[type=submit] {
    font-family: 'Changa', Arial, Helvetica, sans-serif;
    font-weight: bold;
    cursor: pointer;
}


/* ====== GLOBAL BEHAVIOR CLASSES ======*/
.hidden {
    display: none !important;
}

.no-scroll {
    overflow-y: hidden;
}


/* ====== STRUCTURE CSS ====== */
body {
    font-family: 'LibreFranklin', 'Times New Roman', Times, serif;
    font-weight: 500;
    color: black;
    background-color: rgb(238, 238, 238);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: url(../img/global/glitch-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#mobile-notice {
    box-sizing: border-box;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: black;
    color: white;
    padding: 5%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media screen and (max-width: 767px) {
        #mobile-notice {
            display: flex;
        }
  }

#main-title {
    width: 100%;
}

#game-frame {
    position: relative;
    text-align: center;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 5%;
    box-sizing: border-box;
}


/* ===== DESKTOP ICONS ===== */
#desktop-icons-wrapper {
    position: fixed;
    top: 5%;
    right: 5%;
}

#desktop-icons-wrapper .desktop-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50px;
    margin-left: auto;
    margin-bottom: 2em;
    cursor: pointer;
    color: white;
}

#desktop-icons-wrapper .desktop-icon a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#desktop-icons-wrapper figure {
    width: 50px;
    margin-bottom: 5px;
    display: inline-block;
}

#desktop-icons-wrapper figure img {
    border-radius: 0;
    height: auto;
    width: auto;
}

#desktop-icons-wrapper figcaption {
    white-space: nowrap;
    font-size: .8em;
    line-height: 1.25;
    font-weight: bold;
}

/* ======SEARCH WINDOW UNIQUE STYLES====== */
#searchResultHighlight {
    background-color: yellow;
}


/* ===== MATERIAL MODALS ===== */
.material-window {
    margin: auto;
    position:absolute;
    z-index: 995;
    display: flex;
    flex-direction: column;
    width: 40vw;
    height: 30vw;
    border: 2px solid black;
    background-color: #cccccc;
    box-sizing: border-box;
    transition: transform .3s;
}

.prompt-window-open {
    transform: scale(1);
    z-index: 999;
}

.prompt-window-close {
    transform: scale(0);
    z-index: 0;
}

.ui-draggable-handle {
	cursor: grab;
}

.audio-window-open {
    transform: scale(1);
    z-index: 999;
}

.audio-window-close {
    transform: scale(0);
    z-index: 0;
}

.manuscript-window-open {
    transform: scale(1);
    z-index: 999;
}

.manuscript-window-close {
    transform: scale(0);
    z-index: 0;
}

.material-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    border-style: solid;
    border-width: 2px 2px 0;
    border-color: #e0e0e0;
    background-color: #cccccc;
    background: url(../img/global/lex-background-left.svg) left no-repeat, url(../img/global/lex-background-right.svg) right no-repeat, url(../img/global/lex-background.svg) repeat;
    background-size: auto 24px;
}

.material-header h3 {
    text-align: center;
    background-color: #cccccc;
    padding: .25em;
    margin-top: 1px;
}

.material-header button {
    height: 15px;
    width: 15px;
    margin: .5em .5em .5em 0;
    position: absolute;
    right: .25em;
}

.material-window article {
    height: 100%;
    width: calc(100% - 10px);
    border: 2px solid black;
    margin: 5px;
    box-sizing: border-box;
    background-color: white;
    padding: 2%;
    text-align: left;
    overflow-y: auto;
}

#audio-window {
	left: 37%;
    top: 8%;
}

#audio-window audio {
    width: 100%;
}

#manuscript-window {
	left: 40%;
    top: 10%;
}

#prompt-window {
    left: 2%;
    top: 12%;
    height: auto;
    width: auto;
    white-space: nowrap;
}

#prompt-window article {
    padding: 30px;
}

#cassette-showcase {
    width: 100%;
    text-align: center;
}

#cassette-showcase img {
    width: 100%;
}

.window-list li {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid black;
}

.window-list li:hover {
    font-weight: bold;
}

/* ===== GAME FILES WINDOW =====*/

#file-window {
    margin: auto;
    position:absolute;
    display: flex;
    flex-direction: column;
    width: 40vw;
    height: 30vw;
    border: 2px solid black;
    background-color: #cccccc;
    box-sizing: border-box;
    transition: transform .3s;
    left: 34%;
    top: 6%;
}

.file-window-open {
    transform: scale(1);
    z-index: 999;
}

.file-window-close {
    transform: scale(0);
    z-index: 0;
}

.file-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    border-style: solid;
    border-width: 2px 2px 0;
    border-color: #e0e0e0;
    background-color: #cccccc;
    background: url(../img/global/lex-background-left.svg) left no-repeat, url(../img/global/lex-background-right.svg) right no-repeat, url(../img/global/lex-background.svg) repeat;
    background-size: auto 24px;
}

.file-header h3 {
    text-align: center;
    background-color: #cccccc;
    padding: .25em;
    margin-top: 1px;
}

.file-header button {
    height: 15px;
    width: 15px;
    margin: .5em .5em .5em 0;
    position: absolute;
    right: .25em;
}

#file-window article {
    height: 100%;
    width: calc(100% - 10px);
    border: 2px solid black;
    margin: 5px;
    box-sizing: border-box;
    background-color: white;
    padding: 2%;
    text-align: left;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
}

#file-window button img {
    width: 50%;
    max-width: 50px;
}

#file-window article button {
    background-color: transparent;
    border: none;
    margin: 25px;
    max-width: 100px;
    width: 20%;
    line-height: 1;
}

#file-window button span {
    display: block;
}

#file-window .greyed-out {
    opacity: .3;
    pointer-events: none;
}

/* ===== navCard WINDOW =====*/
.nav-card-window-open {
    transform: scale(1);
}

.nav-card-window-close {
    transform: scale(0);
}

.nav-card-container {
    transition: transform .3s;
}

/* ===== GAME WINDOW =====*/

.game-window-open {
    transform: scale(1);
}

.game-window-close {
    transform: scale(0);
}

#game-window {
    border: 2px black solid;
    background-color: #cccccc;
    width: 52.5vw;
    height: 41.25vw;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: transform .3s;
}

@media screen and (max-width: 1000px) {
    #game-window {
        width: 72.5vw;
        height: 61.25vw;
    }
  }

#window-bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    border-style: solid;
    border-width: 2px 2px 0;
    border-color: #e0e0e0;
    background-color: #cccccc;
    background: url(../img/global/lex-background-left.svg) left no-repeat, url(../img/global/lex-background-right.svg) right no-repeat, url(../img/global/lex-background.svg) repeat;
    background-size: auto 24px;
}

#window-bar header {
    text-align: center;
    background-color: #cccccc;
    padding: .25em;
    margin-top: 1px;
}

#window-bar button {
    height: 15px;
    width: 15px;
    margin: .5em .5em .5em 0;
    position: absolute;
    right: .25em;
}

/* ===== COLUMN STYLING ===== */

.main-content-window {
    box-sizing: border-box;
    background-color: #ffffff;
    overflow-y: hidden;
    overflow-x: hidden;
    border: 2px solid black;
    width: calc(100%-10px);
    height: 100%;
    margin: 5px;
}

#flex-container {
    height: 100%;
}

#content-header {
    margin: auto;
    width: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    display: none;
}

#column-one,
#column-two,
.column-one,
.column-two {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.main-content-window section {
    height: 100%;
}

.main-content-window .col-wrapper {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.main-content-window .col-wrapper .column-one {
    overflow: hidden;
}

.main-content-window .col-wrapper .column-one img {
    height: 100%;
}

.main-content-window .col-wrapper .column-one a {
    height: 100%;
}

/* ===== ONE COLUMN STYLING ===== */
.main-content-window.one-col {
    text-align: center;
}

.main-content-window.one-col>#column-two {
    display: none;
}

.main-content-window.one-col>.main-content-window header {
    height: 5%;
}

.main-content-window.one-col #column-one {
    box-sizing: border-box;
    display: inline-block;
    margin: auto;
    text-align: left;
    width: 100%;
    padding: 2%;
}


/* ===== TWO COLUMN STYLING ===== */

.main-content-window .col-wrapper {
    background-size: cover;
}

.main-content-window .col-wrapper .column-two {
    overflow-y: auto;
    width: 100%;
}

.main-content-window section {
    
    flex-direction: row;
}

.main-content-window.two-col>#flex-container {
    display: flex;
    margin: auto;
    text-align: left;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
}

.main-content-window.two-col>header {
    flex: 100%;
}

.main-content-window.two-col .flex-col {
    padding: 0;
    width: 50%;
}

.main-content-window.two-col .flex-col:first-of-type {
    width: 50%;
}

.main-content-window.two-col .flex-col:first-of-type div img {
    width: 100%
}

.main-content-window.two-col .flex-col:last-of-type {
    flex: 1;
}

.main-content-window.full-span>#column-one,
.main-content-window.full-span>#flex-container {
    width: 100%;
}

#content-header.hidden~#column-one,
#content-header.hidden~#flex-container {
    height: 100%;
}

#column-one.no-scroll,
#column-two.no-scroll {
    overflow-y: hidden;
    overflow: hidden;
}
  
#column-one img {
    height: 100%;
}


/* ===== FEATURE STYLING ===== */
.main-content-window.feature-window #column-one {
    overflow: hidden;
}


/* ====== NAV STYLES ====== */
#game-nav {
    height: 5%;
    width: auto;
    margin: 0;
    text-align: right;
    width: 51%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 0;
    z-index: 999;
}

#game-window.top-nav>#game-nav ul,
#game-window.bottom-nav>#game-nav ul {
    margin: .5em;
}

#game-nav button {
    height: 100%;
    width: 100%;
    border: 2px solid black;
    border-left: 0;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 10%;
}

#game-nav button:first-of-type {
    border-left: 2px solid black;
}

#game-nav button:last-of-type {
    border-right: 0;
}

#game-nav button img {
    height: 100%;
    width: 20px;
}


/* ===== BOTTOM NAV CSS TWEAKS ===== */
#game-window.bottom-nav>#game-nav {
    position: absolute;
    bottom: 6px;
    right: 7px;
}


/* --- FULL-WIDTH CSS CLASS TO EXPAND NAV BAR ACROSS BOTTOM OF PAGE --- */
#game-nav.full-bottom {
    width: calc(100% - 14px);
    border-left: 1px solid white;
}


/* --- SIDE NAV CSS TWEAKS --- */
#game-window.side-nav {
    text-align: justify;
}

#game-window.side-nav>#game-nav {
    position: absolute;
    left: 5px;
    top: 32px;
    box-sizing: border-box;
    background-color: #cccccc;
    height: calc(100% - 37px);
    width: 7%;
    padding: 0 5px 0 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border-right: 2px solid black;
}

#game-window.side-nav>#game-nav button {
    width: 100%;
    height: 50px;
    background-color: white;
    margin-bottom: 5px;
    border: 2px solid black;
    padding: 5px;
}

#game-window.side-nav>#game-nav button img {
    height: 100%;
    max-width: 100%;
}

#game-window.side-nav .main-content-window {
    padding-left: 7%;
}