navbar {

border-bottom: 1px solid lightgrey;

}

navbar-navigation {

grid-area: navigation;
display: grid;
height: 100%;
background: white;

}

logo {

grid-area: logo;
height: 100%;
display: none;

}

@media only screen and (min-width: 600px) {

#navbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "logo navigation";
}

#navbar-navigation {
  display: flex;
  justify-content: flex-end;
}

#logo {
  display: flex;
}

.nav-button {
  min-width: 88px;
}

}

navbar-navigation a {

text-decoration: none;
color: #505050;

}

.nav-item {

grid-row: 1;

}

.nav-button {

height: 100%;
width: 100%;
color: rgba(0, 0, 0, 0.87);
font-size: 0.875rem;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
font-weight: 500;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
border: 0;
cursor: pointer;
outline: none;
position: relative;
align-items: center;
user-select: none;
vertical-align: middle;
justify-content: center;
-moz-appearance: none;
text-decoration: none;
background-color: transparent;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;

}

.nav-button:hover {

text-decoration: none;
background-color: rgba(0, 0, 0, 0.12);

}