nav {
    width: 20%;
    float: left;
    display: inline;
    height: 100%;
    margin: 2px;
    padding: 2px;
    margin-right: 10px;
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    overflow-x: hidden; /*Disable horizontal scroll */
    overflow-y: scroll; 
    padding-top: 20px;
    text-decoration: none;
}


section#main {
    width: 70%;
    float: left;
    margin: 10;
    padding: 10;
    display: inline;
    margin-left: 20%;
}

.closebtn {
    position: absolute;
    top: 40px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}



<!--
/* Font Definitions */
@font-face {
    font-family: Wingdings;
    panose-1: 5 0 0 0 0 0 0 0 0 0;
}

@font-face {
    font-family: "Cambria Math";
    panose-1: 2 4 5 3 5 4 6 3 2 4;
}

@font-face {
    font-family: Calibri;
    panose-1: 2 15 5 2 2 2 4 3 2 4;
}

@font-face {
    font-family: "Calibri Light";
    panose-1: 2 15 3 2 2 2 4 3 2 4;
}

@font-face {
    font-family: "Segoe UI";
    panose-1: 2 11 5 2 4 2 4 2 2 3;
}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal {
    margin-top: 0cm;
    margin-right: 0cm;
    margin-bottom: 8.0pt;
    margin-left: 0cm;
    line-height: 107%;
    font-size: 11.0pt;
    font-family: "Calibri",sans-serif;
}

h1 {
    mso-style-link: "Heading 1 Char";
    margin-top: 10.0pt;
    margin-right: 0cm;
    margin-bottom: 0cm;
    margin-left: 0cm;
    margin-bottom: .0001pt;
    line-height: 107%;
    page-break-after: avoid;
    font-size: 19.0pt;
    font-family: "Calibri Light",sans-serif;
    color: #2F5496;
    font-weight: normal;
}

h2 {
    mso-style-link: "Heading 2 Char";
    margin-top: 12.0pt;
    margin-right: 0cm;
    margin-bottom: 0cm;
    margin-left: 0cm;
    margin-bottom: .0001pt;
    line-height: 107%;
    page-break-after: avoid;
    font-size: 16.0pt;
    font-family: "Calibri Light",sans-serif;
    color: #2F5496;
    font-weight: normal;
}

h3 {
    mso-style-link: "Heading 3 Char";
    margin-top: 2.0pt;
    margin-right: 0cm;
    margin-bottom: 0cm;
    margin-left: 0cm;
    margin-bottom: .0001pt;
    line-height: 107%;
    page-break-after: avoid;
    font-size: 1.2em;
    font-family: "Calibri Light",sans-serif;
    color: #1F3763;
    font-weight: normal;
}

h4
	{mso-style-priority:9;
	mso-style-qformat:yes;
	mso-style-link:"Heading 4 Char";
	mso-style-next:Normal;
	margin-top:2.0pt;
	margin-right:0cm;
	margin-bottom:0cm;
	margin-left:0cm;
	line-height:107%;
	mso-pagination:widow-orphan lines-together;
	page-break-after:avoid;
	mso-outline-level:4;
	font-size:11.0pt;
	font-family:"Calibri Light",sans-serif;
	mso-ascii-font-family:"Calibri Light";
	mso-ascii-theme-font:major-latin;
	mso-fareast-font-family:"Times New Roman";
	mso-fareast-theme-font:major-fareast;
	mso-hansi-font-family:"Calibri Light";
	mso-hansi-theme-font:major-latin;
	mso-bidi-font-family:"Times New Roman";
	mso-bidi-theme-font:major-bidi;
	color:#2F5496;
	mso-themecolor:accent1;
	mso-themeshade:191;
	mso-fareast-language:EN-US;
	font-weight:normal;
	font-style:italic;}


p.MsoToc1, li.MsoToc1, div.MsoToc1 {
    margin-top: 0cm;
    margin-right: 0cm;
    margin-bottom: 5.0pt;
    margin-left: 0cm;
    line-height: 107%;
    font-size: 11.0pt;
    font-family: "Calibri",sans-serif;
}

p.MsoToc2, li.MsoToc2, div.MsoToc2 {
    margin-top: 0cm;
    margin-right: 0cm;
    margin-bottom: 5.0pt;
    margin-left: 11.0pt;
    line-height: 107%;
    font-size: 11.0pt;
    font-family: "Calibri",sans-serif;
}

p.MsoToc3, li.MsoToc3, div.MsoToc3 {
    margin-top: 0cm;
    margin-right: 0cm;
    margin-bottom: 5.0pt;
    margin-left: 22.0pt;
    line-height: 107%;
    font-size: 11.0pt;
    font-family: "Calibri",sans-serif;
}

p.MsoHeader, li.MsoHeader, div.MsoHeader {
    mso-style-link: "Header Char";
    margin: 0cm;
    margin-bottom: .0001pt;
    font-size: 11.0pt;
    font-family: "Calibri",sans-serif;
}

p.MsoFooter, li.MsoFooter, div.MsoFooter {
    mso-style-link: "Footer Char";
    margin: 0cm;
    margin-bottom: .0001pt;
    font-size: 11.0pt;
    font-family: "Calibri",sans-serif;
}

p.MsoTitle, li.MsoTitle, div.MsoTitle {
    mso-style-link: "Title Char";
    margin: 0cm;
    margin-bottom: .0001pt;
    font-size: 28.0pt;
    font-family: "Calibri Light",sans-serif;
    letter-spacing: -.5pt;
}

p.MsoTitleCxSpFirst, li.MsoTitleCxSpFirst, div.MsoTitleCxSpFirst {
    mso-style-link: "Title Char";
    margin: 0cm;
    margin-bottom: .0001pt;
    font-size: 28.0pt;
    font-family: "Calibri Light",sans-serif;
    letter-spacing: -.5pt;
}

p.MsoTitleCxSpMiddle, li.MsoTitleCxSpMiddle, div.MsoTitleCxSpMiddle {
    mso-style-link: "Title Char";
    margin: 0cm;
    margin-bottom: .0001pt;
    font-size: 28.0pt;
    font-family: "Calibri Light",sans-serif;
    letter-spacing: -.5pt;
}

p.MsoTitleCxSpLast, li.MsoTitleCxSpLast, div.MsoTitleCxSpLast {
    mso-style-link: "Title Char";
    margin: 0cm;
    margin-bottom: .0001pt;
    font-size: 28.0pt;
    font-family: "Calibri Light",sans-serif;
    letter-spacing: -.5pt;
}

a:link, span.MsoHyperlink {
    color: #0563C1;
    text-decoration: none;
}

a:visited, span.MsoHyperlinkFollowed {
    color: #0563C1;
    text-decoration: none;
}

p.MsoAcetate, li.MsoAcetate, div.MsoAcetate {
    mso-style-link: "Balloon Text Char";
    margin: 0cm;
    margin-bottom: .0001pt;
    font-size: 9.0pt;
    font-family: "Segoe UI",sans-serif;
}

p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph {
    margin-top: 0cm;
    margin-right: 0cm;
    margin-bottom: 8.0pt;
    margin-left: 36.0pt;
    line-height: 107%;
    font-size: 11.0pt;
    font-family: "Calibri",sans-serif;
}

p.MsoListParagraphCxSpFirst, li.MsoListParagraphCxSpFirst, div.MsoListParagraphCxSpFirst {
    margin-top: 0cm;
    margin-right: 0cm;
    margin-bottom: 0cm;
    margin-left: 36.0pt;
    margin-bottom: .0001pt;
    line-height: 107%;
    font-size: 11.0pt;
    font-family: "Calibri",sans-serif;
}

p.MsoListParagraphCxSpMiddle, li.MsoListParagraphCxSpMiddle, div.MsoListParagraphCxSpMiddle {
    margin-top: 0cm;
    margin-right: 0cm;
    margin-bottom: 0cm;
    margin-left: 36.0pt;
    margin-bottom: .0001pt;
    line-height: 107%;
    font-size: 11.0pt;
    font-family: "Calibri",sans-serif;
    padding: 5pt 0pt 5pt 0pt;
}

p.MsoListParagraphCxSpLast, li.MsoListParagraphCxSpLast, div.MsoListParagraphCxSpLast {
    margin-top: 0cm;
    margin-right: 0cm;
    margin-bottom: 8.0pt;
    margin-left: 36.0pt;
    line-height: 107%;
    font-size: 11.0pt;
    font-family: "Calibri",sans-serif;
}

p.MsoTocHeading, li.MsoTocHeading, div.MsoTocHeading {
    margin-top: 12.0pt;
    margin-right: 0cm;
    margin-bottom: 0cm;
    margin-left: 0cm;
    margin-bottom: .0001pt;
    line-height: 107%;
    page-break-after: avoid;
    font-size: 16.0pt;
    font-family: "Calibri Light",sans-serif;
    color: #2F5496;
}

span.Heading1Char {
    mso-style-name: "Heading 1 Char";
    mso-style-link: "Heading 1";
    font-family: "Calibri Light",sans-serif;
    color: #2F5496;
}

span.Heading2Char {
    mso-style-name: "Heading 2 Char";
    mso-style-link: "Heading 2";
    font-family: "Calibri Light",sans-serif;
    color: #2F5496;
}

span.BalloonTextChar {
    mso-style-name: "Balloon Text Char";
    mso-style-link: "Balloon Text";
    font-family: "Segoe UI",sans-serif;
}

span.TitleChar {
    mso-style-name: "Title Char";
    mso-style-link: Title;
    font-family: "Calibri Light",sans-serif;
    letter-spacing: -.5pt;
}

span.Heading3Char {
    mso-style-name: "Heading 3 Char";
    mso-style-link: "Heading 3";
    font-family: "Calibri Light",sans-serif;
    color: #1F3763;
}

span.HeaderChar {
    mso-style-name: "Header Char";
    mso-style-link: Header;
}

span.FooterChar {
    mso-style-name: "Footer Char";
    mso-style-link: Footer;
}

.MsoChpDefault {
    font-family: "Calibri",sans-serif;
}

.MsoPapDefault {
    margin-bottom: 8.0pt;
    line-height: 107%;
}
/* Page Definitions */
@page WordSection1 {
    size: 595.3pt 841.9pt;
    margin: 2.0cm 72.0pt 2.0cm 72.0pt;
}

div.WordSection1 {
    page: WordSection1;
}
/* List Definitions */
ol {
    margin-bottom: 0cm;
}

ul {
    margin-bottom: 0cm;
}
-->

/* top navigation bar */

.topnav {
  overflow: hidden;
  background-color: #333;
  background-image: linear-gradient(to right, white , #333);

}

.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: sans-serif;
  font-weight: normal;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.customIndent {
  margin-left: 4em;
}