#logo{position:absolute;top:4px;right:0px;}
#main{position:absolute;top:0px;left:4px;font-size:400%;letter-spacing:2px;height:7%;color:lightblue;margin:0 0;font-family:"Palatino";font-weight:bold} 
#sub{position:absolute;top:58px;left:68px;color:white;padding:0 64;margin:0 0;font-family:Consolas,"Courier New";font-weight:bold;font-size:150%}

html {
  scroll-behavior: smooth;
}

html {
  height: 100%;
  font-family: "Garamond";
  line-height: 1.4;
  font-size: 14px;
  color:steelblue;
}

body {
    height: 100%;
    width: 100%;
    margin: 0px;
    /*removes default style*/
    box-sizing: border-box;
    position: relative;
  }
  
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
tr,
td,
th,
dd,
dt {
 background-color:#090011;
}


h1, h2, h3, .intro-header {
    color: royalblue;
/*    color: #663300;*/
}
  
h1 {
    margin: 32px 0 0 0;
    font-size:24px;
    font-weight: 400;
    border-top: 1px solid royalblue
}
  
h2 {
    margin: 16px 0 0 0;
    font-size:20px;
    font-weight: 200;
}
  
h3 {
    margin: 16px 0 0 0;
    font-size:18px;
    font-weight: 200;
}
  
a {
  color: #839496;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

p {
  margin: 16px 0 0 0;
}

pre {
  overflow: auto;
  font:14px "Lucida Console",Consolas,monospace;
  margin: 8px 0 0 0;
}

pre code {
    border-radius: 4px;
    font-size: 14px;
    padding: 0px;
}

.option {
    font-family: 'Courier New', Courier, monospace;
    color: darkgray;
}

* {
  min-width: 0;
  /* Otherwise <pre> blocks take up more space then they should. Needed for flexbox. */
  box-sizing: border-box;
}
    
#header {
  display: flex;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
}

#header .header-inside {
  justify-content: left;
  font-size: 48px;
  color: royalblue;
   margin:100px 0 20px 16px;
}

.body-wrapper {
  display: flex;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0 8px 0 8px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

#left {
  font-size: 14px;
  top: 120px;
  position: sticky;
  order:1;
}
   
/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
    .body-wrapper {
      flex-direction: column;
    }

    #left {
        top: 0px;
        position:relative;
    }
}

#left ol {
    padding: 0;
    margin: 16px;
}

#left ol > ol {
    margin-left: 16px;
}

#left li {
    margin-top: 8px;
    list-style: none;
}

#left .active a {
    color: #002b36;
}

#left .sidebar-header {
  border-bottom: 1px solid #eee;
  margin-top: 3px;
}

#left .sidebar-header .sidebar-title a {
  display: flex;
  justify-content: left;
  font-size: 24px;
  color: white;
  flex:1;
}

#left .sidebar-header .sidebar-title a:hover {
  text-decoration: none;
}

#right {
  margin-left: 32px;
  width: 800px;
  flex: Initial;
  order:2;
}

#right a {
  color: #2aa198;
}