hw-js-16-GraphQL-Redux-React-Navigation/src/components/Navigation/Button/Button.module.css

.button_navigation {
  background-color: #b3b3b3;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Mountains of Christmas', cursive;
  text-align: center;
  display: flex;
  justify-content: center;
  justify-items: center;
  text-align: center;
  cursor: pointer;
  width: 80px;
  font-size: 16px;
  height: auto;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.button_navigation {
  margin-right: 2%;
}



.navigation_link {
  display: block;
  width: 72px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}

.navigation_link_active {
  color: rgb(37, 156, 253);
}

@media (min-width: 767px) {
  .button_navigation {
    width: 100px;
    font-size: 18px;
  }
  .navigation_link {
    width: 90px;
  }
}

@media (min-width: 1400px) {
  .button_navigation {
    width: 120px;
    font-size: 20px;
  }
  .navigation_link {
    width: 110px;
  }
}