body{
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


header > nav {
  margin-left: 10vw;
}

header > nav > a:visited{
  font-weight: normal;
  color:white;
}

header > nav > a:link{
  color:white;
  font-weight: bold;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
}


header > nav > a:hover{
  color:white;
  background-color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

header > nav > a{
  display: inline-block;
  text-align: left;
  padding-left: 1vw;
  padding-right: 3vw;
  height:3.5vh;
  line-height: 3.5vh;
  font-size: 24px; font-size: 1.25vw;
}

main{
  margin-left: 2vw;
  margin-right: 2vw;
  width:96vw;
}

header{
  height:3.5vh;
  background-color: #5778C6;
}

.central{
  text-align: center;
  color: #5778C6;
}

.central-image{
  background-image: url(vectordemo.png);
  background-size: cover;
  background-color: #192C58;
  width:80vw;
  height:45.25vh;
  margin: 0vh 10vw;
  display: block;
  border: 1px solid rgba(15, 54, 93, 0.25);
  box-shadow: 0px 2px 2px rgba(15, 54, 93, 0.25) ;
}


main .note::before{
  content:"Note: ";
}

main .note {
  border-radius: 5px;
  background: rgba(87, 120, 198, 0.3);
  padding: 5px;
}

h1{
  color: #5778C6;
}

h2{
  color: #24499D;
}

h3{
  color: #2A344D;
}

@media screen and (max-width: 768px) {
  body{
    font-size: 24pt;
  }
  pre {
    white-space: pre-line;
  }
  .hide-mobile {
    display:none;
  }
  nav > a{
    display:block;
    width:100%;
    text-align: center;
    padding: 0;
  }

  header{
    height:17vh;
  }
}

/* Config style */
.config-example li{
  list-style: none;
}

.config-example > li {
  font-size: 16pt;
}


.config-example > ul > li {
  font-size: 14pt;
}

.config-example p {
  font-size: 12pt;
  font-family: monospace;
  margin-top: 0;
}

.config-example span {
  color: #24499D;
  display: block;
  margin: 0;
  font-family: monospace;
}