style.css

body {
 font-family: Arial;
 margin: 0;
 font-size: 15px;
}

main {
 padding-top: 90px;
}

nav {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 color: white;
 vertical-align: middle;
 -webkit-transition: 0.2s;
 transition: 0.2s;
}

nav, nav.scrolled {
 background-color: navy;
}

nav.transparent {
 background-color: transparent;
}

.right {
 text-align: right;
}

nav .right {
 float: right;
 height: 102px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 position: relative;
}

.logo {
 display: inline-block;
 height: 100%;
}

.logo img {
 width: 68px;
}

.mobile-nav {
 display: none;
}

.menu-icon {
  max-height: 30px;
  margin-right: 30px;
}

nav a {
 -webkit-transition: 0.2s;
 transition: 0.2s;
 text-decoration: none;
}

nav a:hover {
 opacity: 0.8;
}

nav a.button {
 background-color: transparent;
}

nav ul, footer ul {
 list-style-type: none;
}

nav ul li, footer ul li {
 display: inline;
}

nav a, nav span {
 color: white;
 padding: 15px;
 vertical-align: middle;
 margin-right: 5px;
}

.dropdown {
 position: relative;
}

.dropdown-content {
 font-size: 1em;
 display: none;
 position: absolute;
 top: 2em;
 right: 0;
}

.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content {
 display: block;
}

.dropdown-content > ul {
 padding: 0;
 border-top: 2px solid #00043b;
 background-color: white;
}

.dropdown-content li > ul {
 padding: 0;
 padding-left: 1em;
}

.dropdown-content a {
 padding: 25px 40px;
 color: navy;
 display: block;
 text-align: left;
 opacity: 1 !important;
 margin: 0;
}

.dropdown-content a:hover {
 color: rgba(0, 0, 128, 0.8);
}

.container {
 max-width: 700px;
 margin: 0 auto;
}

.button {
 border: white 1px solid;
 border-radius: 5px;
 color: white;
 padding: 15px;
 background: navy;
 text-decoration: none;
 margin: 5px;
 display: inline-block;
 vertical-align: middle;
}

.button:hover {
 color: navy;
 background: white;
 border-color: navy;
 opacity: 1;
}

header {
 padding-top: 73px;
 background-color: navy;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#03034D), to(#000080));
 background-image: linear-gradient(to bottom, #03034D, #000080);
 color: white;
 text-align: center;
 border-bottom-left-radius: 50%;
 border-bottom-right-radius: 50%;
}

header img {
 display: block;
 margin: 0 auto;
 width: calc(100% - 5px);
 max-width: 700px;
}

.inline div {
 padding: 2%;
}

.inline {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}

.landing-icons {
 height: 5em;
}

section {
 padding: 2%;
 background: white;
 color: navy;
 text-align: center;
}

h2 {
 text-align: center;
}

section.dark {
 background: navy;
 color: white;
}

a {
 color: inherit;
}

section a.button {
 margin: 5px;
}

footer {
 padding: 2%;
 background: #00043b;
 color: white;
 position: relative;
}

footer li a {
 text-decoration: none;
 margin: 1em;
}

@media only screen and (max-width: 575px) {
 .inline {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
 }

 .desktop-md-nav {
  display: none;
 }

 .mobile-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 }

 footer {
  text-align: center;
 }

 footer ul {
  margin: 0;
  padding: 0;
 }

 footer ul li {
  display: block;
  text-align: center;
  padding: 15px;
 }

 footer .right {
  text-align: center !important;
 }
}