#wrapper {
  width: auto;
  border: 1px solid black;
  overflow: hidden;
  margin:10px;
  padding:30px;
}

.bar-button1 {
  border: 1px solid powderblue;
  background-color: #720CD9;
  padding: 15px;
  width: 40%;
  margin:5px;
  text-align:center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float:left;
}

.bar-button1:hover {
  background-color: #2F71E2
}

.bar-button1.active {
  background-color: #7E2DE6
}


#navigation {
    width: 100%;
    height: 50px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
    background-color:grey;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

#navigation div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */
    flex: 1;
    margin: 2px;
    text-align: center;
    padding: 20% 0px 0px 0px;
}

.nav-button {
  background-color: coral;
  color: black;
}

.nav-button:hover {
  background-color:black;
  color: orange;
}

.nav-button:active {
  background-color: #303030;
}