/*//////////////*/
/* General CSS  */
/*//////////////*/
@font-face {
    font-family: respawn;
    src: url("https://lost.crowtastic.com/fonts/TreeFTR.ttf");
  }

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background: #01141b;
}
p {
    line-height: 1.4em;
    margin-bottom:1em;
}
.container {
    background: #01141b;
}

.u-Center{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
br {
    display: block;
    content: "";
    border-bottom: 6px solid transparent; /*Works in Chrome/Safari*/
}

/*//////////////*/
/*  Main Menu  */
/*//////////////*/
.mainMenuBGImg {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box; 
    content:URL("https://lost.crowtastic.com/images/MainMenu/MainMenu_Portrait.jpg");
}
.logo {
    position: relative;
    top: 8px;
    margin-top:8px;
    font-size: 14.0rem; 
    line-height: 0.1;  
    letter-spacing: -1.0rem;
    color:#f6f7fb;
    text-shadow:
    -4px -4px 0 #02151d,
     0   -4px 0 #02151d,
     4px -4px 0 #02151d,
     4px  0   0 #02151d,
     4px  4px 0 #02151d,
     0    4px 0 #02151d,
    -4px  4px 0 #02151d,
    -4px  0   0 #02151d;
}

/* Buttons & Links */
.menuLinkHolder{
    text-align: center;
    margin-top: 8px;
}
.menuLink{
    color: #f6f7fb;
    text-decoration: none;
    font-size: 2.5rem; line-height: 1.5;  letter-spacing: -.1rem; 
}
.menuLink:hover,
.menuLink:focus
{
    color: #8ea5ff;
}


/*/////////////////////*/
/*  Game Space Layout  */
/*/////////////////////*/
.menuBtn{
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    width:28px;
    height:28px;
    line-height: 0;
    padding: 0;
    color: #f6f7fb;
    background: #01141bbd;
    z-index: 999;
}
button.navLink { 
    display: none;
    padding:0px;
    color:#a6a6af;
    width:28%;
    margin:0 6px;
    background:none; 
    border:none; 
    box-sizing: border-box; 
}
button.navLink:hover,
button.navLink:focus {
    color: #8ea5ff;
    box-sizing: border-box; 
}
.graphicHolder{
    position: relative;
    margin-left: 0 !important;
}
.textHolder{
    position: relative;
    background: green;
}
.outputTB{
    position: relative;
    padding: 8px;
    height: 300px;
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    overflow: auto;
    overflow-y: auto;
    color: #f6f7fb;
}
.inputTB{
    position: relative;
    margin-top: 16px;
    padding: 8px;
    background: blue;
}
.mapImage{
    position: relative;
    width:100%;
    height:auto;
    overflow: hidden; 
}




/*//////////////*/
/*  Text Input  */
/*//////////////*/
pre {
    background: transparent;
    color: #f6f7fb;
    font-family: "Raleway";
    border: 1px solid transparent;
    margin: 0;
    width: 100%;
    height: 48px !important;
    overflow: hidden;
    white-space: pre-wrap; 
    word-wrap: break-word;
    padding: 1px;
    outline: none;
    caret-color: transparent;
}
pre:focus {
    border: 0px solid transparent;
    outline: none;
}
.myInput.caret-bar > span {
    animation: blink 1s step-end infinite;
    border-left: 12px solid white;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    pointer-events: none;
}
.myInput.caret-bar > span :empty{
    padding-right:1em;
}
@keyframes blink {
    from,
    to {
      border-color: transparent;
    }
    50% {
      border-color: #fff;
    }
}


/*//////////////*/
/*  Text Output  */
/*//////////////*/
.parser-text-intro {
    font-weight: bold;
}
.parser-text {
    margin-top: 16px;
    opacity: 0;
}



/*//////////////*/
/*  Responsive  */
/*//////////////*/
/* For devices larger than 550px */
@media (min-width: 550px) {
    .logo {
        top: 8px;
        left: -120px;
        margin-top: 4px;
        font-size: 22.0rem; 
        line-height: 1.0;  
    }
    .mainMenuBGImg {
        max-width: 100%;
        content:URL("https://lost.crowtastic.com/images/MainMenu/MainMenu_Landscape.jpg");
    }
    .menuLinkHolder{
        text-align: right;
        margin-top: 16px;
        margin-right: 64px;
    }
    .menuLink{
        font-size: 3.0rem; line-height: 1.5;  letter-spacing: -.1rem; 
    }
    .menuBtn{
        display: none;
    }
    button.navLink { 
        display: block;
    }
    .outputTB{
        height: 350px;
    }
    
}