@import url("fonts.css");
@import url("color.css");

:root {
  box-sizing: border-box;
  line-height: 1.4;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

img {
  max-width: 100%;
  height: auto;
}

html,
body {
  width: 100%;
  height: 100%;
}

nav {
  width: 100%;
  height: 4em;

  display: grid;
  grid-template-columns: auto 1fr;

  border-bottom: 1px solid var(--color-zinc-300);
}

nav #brand {
  display: flex;
  align-items: center;
  padding-left: 4em;
  height: 100%;
}

nav #brand #brand-text {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 2.05em;
}

nav #brand #brand-logo {
  height: 80%;
}

nav #nav-links {
  display: grid;
  margin: 0 4em;
  grid-template-columns: repeat(6, auto);
  text-align: center;
  align-items: center;
  height: 100%;

  text-decoration: none;
}

nav #nav-links a {
  height: 100%;
  display: grid;
  align-items: center;
  text-align: center;
}

nav #nav-links a:hover {
  transition: all 0.2s ease-in-out;
  background-color: var(--color-zinc-100);
}

/* remove defualt link styles */
nav #nav-links a:link,
nav #nav-links a:visited {
  color: inherit;
  text-decoration: none;
}
nav #nav-links a:active,
nav #nav-links a:focus {
  outline: none;
}

main {
  padding: 4em;
}