@import "library.css";

:root {
  --bg: hsla(132, 21%, 29%, 1); /* tom-thumb, main bg */
  --elevation: hsla(120, 24%, 38%, 1); /* hippy */
  --muted: hsla(97, 28%, 50%, 1); /* asparagus, dates, captions, disabled text */
  --contrast: hsla(74, 42%, 72%, 1); /* deco, use for text, option to reduce opacity to 85% */
  --accent: hsla(40, 59%, 64%, 1); /* apache, use sparingly */
}

* {
  box-sizing: border-box; /* height & width of all boxes includes padding & border */
}

body {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  min-width: 100vw;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 15px;
}

#navbar {
  padding: 20px;
  border-bottom: 1px solid var(--accent);
}

nav li {
  color: var(--contrast);
  background-color: var(--elevation);
  padding: 3px;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  list-style-type: none; /* Remove bullets */
  box-shadow: -3px 3px 3px rgb(9, 27, 6);
}

nav li:hover {
  color: var(--accent);
  cursor: default;
  transition: 0.2s ease-in-out;
  transform: translate(2px, -2px);
  box-shadow: -9px 9px 9px rgb(9, 27, 6);
}

main {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 50% 1fr;
  grid-template-rows: 80% 1fr;
  justify-content: center;
}

section {
  background-color: var(--elevation);
  padding: 20px;
  grid-column: 2;
  grid-row: 1;
}

footer {
  margin-top: 20px;
  color: var(--accent);
  font-size: 0.9rem;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

@media (max-width: 600px) {
  .site {
    margin: 16px;
    padding: 16px;
  }
}