ul {

  list-style-type: none;
  width: 500px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
  width: 33.33%;
}

li a {
  display: block;
  font-weight: bold;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #292b2c;
}

li a.active {
  color: white;
  background-color: #0275d8;
}



body{
  color: #40514E;
  margin: 0;
  text-align: center;
  background-color: #E4F9F5;
}
.top_container{
  background-color: #E4F9F5;
  text-align: center;
  position: relative;
  padding-top: 100px;
}

h1 {
  font-size: 5.62rem;
  margin: 50px auto 0 auto;
  font-family: 'Sacramento', cursive;
  color: #66BFBF;
}
h2 {
  font-family: 'Montserrat', sans-serif;
  color: #66BFBF;
  font-size: 30px;
}
.cloud {
  position: absolute;
  top: 60px;
  right: 31.25em;
}
.cloud2 {
  position: absolute;
  top: 27.875em;
  left: 36.25em;
}
.programmer {

  font-size: 2.5rem;
  font-weight: normal;
  font-family: inherit;
}
a {
  color: #11999E;
  font-family: 'Montserrat', sans-serif;
  margin-left: 20px;
  margin-right: 20px;
  text-decoration: none;
}
a:hover {
  color: black;
}