html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Comic Neue" !important;
  min-height: 100vh; 
  background-color: #EADDCA;
  overflow-x: hidden;
}

#editor-surface {
  height: 500px;
  display: block;
  background: white;
 border: 2px solid #D2B48C;
}


#jig-logo {
  /* this is the box around the logo */
  position: absolute;
  left: 40px;
  width: 80px;
  height: 80px;
  top: 60px;
  background-color: #D2B48C; 
  border: 1px solid #333;    
}
  
  #jLogo{
    /* the J itself */
  display: flex;
  box-sizing: border-box;
  align-items: flex-end;    
  justify-content: flex-end; 
  color: #333;
  font-family: 'Lato', sans-serif;
  font-size: 85px;
  line-height: 1.1;
  user-select: none; 
  
}


#jigHeader{
  position: relative;
  left: 600px;
  bottom: 130px;
  text-align: center;
  font-family:"Comic Neue", "comic Sans MS";
  font-size: 60px;
  user-select: none;
}
.CodeMirror{
position: relative !important;
transform: translateX(200px);
border: 3px solid #ccc !important;
border-radius: 4px;  
}

    .navbar{
       background-color:#ffcc99;
       height: 150px;
       border-bottom:2px solid grey;
       display: flex;
        align-items: flex-end;
        flex-direction: row;
     }
     
     .navitem{
       display: flex;
       text-decoration: none;
       color: #000000;
       padding: 10px;
       margin-left:10px;
       margin-right:10px;
       font-size: 30px;
       font-weight: bold;
       align-items: flex-end;
       flex-direction: row;
        
     }
.selected{
  display: flex;
       text-decoration: none;
       color: #000000;
       padding: 10px;
       font-size: 30px;
       font-weight: bold;
       align-items: flex-end;
       background-color: #584738;
       flex-direction: row;
       
     }


#runButton{
  position: relative;
  left: 1500px;
  top: 60px;
}
#ver{
  position: absolute;
  top: 50px;
  left: 90px;
  width: 80px;
}