:root {
  --main-lite-color: #f3ecdf;
  --main-dark-color: #233551;
  --main-hilite-color: #ab413c;
}
nav, nav ul {
  flex-direction: column;
}

@media (min-width: 576px) {
  nav, nav ul {
    flex-direction: row;
  }
}

html {
  background-color: var(--main-lite-color);
  color: var(--main-dark-color);
  font-family: sans-serif;
  font-size: 1em;
}
.nav-menu a {
  /*
   * color: var(--main-lite-color);
  background-color: var(--main-dark-color);
  */
  margin: 0px 2px;
  font-family: 2em;
  font-weight: bold;
}
.nav-logo img {
  height: 100px;
  border: 0.5px solid var(--main-dark-color);
}
.reg-btn {
	color: var(--main-lite-color);
	background-color: var(--main-dark-color);
}
.reg-btn a { color: var(--main-lite-color); }
.reg-btn a:hover { color: var(--main-hilite-color); }
.box { display: flex; }
.box-grid { padding: 20px; flex: auto; }