@import url("/assets/color-variables-fa54e5bd.css");

body {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 1rem;
  background-color: var(--main-background);
  color: var(--main-text);
  /* margin-left: 5vw; */
}

.grid-container {
  display: grid;
  /* grid-template-columns: 1fr 2fr 7fr;
  grid-template-rows: 1fr; */
  /* grid-template-rows: 1fr 2fr 7fr; */
  grid-template-rows: 10vh 20vh 70vh;
  grid-template-columns: 1fr;
  grid-template-areas:
  "nav"
  "header"
  "main"
  ;
}

.nav {
  grid-area: nav;
  /* margin-top: 2vh; */
  /* margin-bottom: 8vh; */
  /* display: flex;
  align-items: flex-start; */
}

.header {
  grid-area:header;
  margin-left: 3vw;
}

.main {
  grid-area: main;
  margin-left: 3vw;
}


.link {
  background-color: var(--main-secondary-accent);
  align-self: center;
  padding: 1rem 2rem;
  text-decoration: none;
  font-size: 1rem;
  border-radius: 1rem;
  color: var(--main-background);
  transition: all 0.3s ease;
}

.link:hover {
  color: var(--main-text);
  padding: 1.1rem 2.2rem;
  font-size: 1.1rem;
  border-radius: 1.1rem;
}

.nav-link {
  display: inline-block;
}

.button {
  background-color: var(--main-secondary-accent);
  color: var(--main-background);
  border: none;
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  color: var(--main-text);
  padding: 1.1rem 2.2rem;
  font-size: 1.1rem;
  border-radius: 1.1rem;
}

h1 {
  font-size: 3rem;
}