body {
  margin: 0;
  font-family: 'Open Sans','Noto Sans', Verdana, Arial, Tahoma, sans-serif;
  font-size: 20px;
}

button {
  font-family: inherit;
}

math {
  font-family: 'Open Sans', 'Noto Sans Math', 'STIX Two Math', Verdana;
}

h1 {
  margin-bottom: 5px;
}


#menu {
  height: 50px;
  overflow: hidden;
  background-color: #006699;
}

.select-button {
  background-color: #006699;
  color: white;
}
.selected-button {
  background-color: #04AA6D;
  color: white;
}
.select-button a:hover {
  background-color: #ddd;
  color: black;
}

h1 {
  color: #005580;
}
#menu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

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

#menu a.active {
  background-color: #04AA6D;
  color: white;
  margin: auto;
}

#project-title {
  padding-top:10px;
  font-size: 20px;
  color: white;
  float: right;
}

#menu span {
  height: 100%;
  width: 200px;
}

#menu-icon {
  height: 50px;
  color: white;
  background-color: #333;
  border: none;
  float: right;
  display: none;
}
#main {
  margin: auto;
  max-width: 810px;
  padding-left: 100px;
}

#links-container {
  width: 500px;
  margin: auto;
}

#main p {
  margin-top: 5px;
}

@media screen and (max-width: 700px) {
  #project-title {
    float: left;
    padding-left: 10px;
  }
  #menu a {display: none;}
  #menu #menu-icon {
    float: right;
    display: block;
  }
  #main {
    max-width: 450px;
    padding-left: 20px;
    padding-right: 20px;
  }
  #menu.responsive {
    height: auto;
    position: relative;
    }
  #menu.responsive #menu-icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  #menu.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  #project-title.responsive {
    display: none;
  }
}