:root {
  --background-primary: #f7fafa;
  --text-primary: #1A1C24;
  --text-opposite: #f7fafa;
  --accent-1: #a67f8e;
  --accent-2: #30323D;
  --accent-3: #B0C5CA;

}



body {
  font-family: Source Serif Pro;
  display: grid;
  height: 100vh;
  grid-template: 100vh 5vh / 25vh auto;
  background-color: var(--background-primary);
  color: var(--text-primary);
  margin: -0.01rem;
}

main {
  background: var(--background-primary);
  grid-column: 2 / 4;
}

main p {
  font-size: 18px;
  display: block;
  margin: 40px;
  max-width: 42rem;
}

main h1 {
  font-size: 70px;
  display: block;
  margin: 40px;
}

/* sidebar */
.sidebar {
  background: var(--accent-1);
  grid-column: 1 / 2;

}

.navigation {
  display: block;
  margin-top: 100%;

}


.navLink {
  font-style: italic;
  color: var(--text-opposite);
  display: block;
  text-align: center;
  margin: 20px;

}

.navLink a {
  color: var(--text-opposite);
  text-decoration: none;
  font-size: 22px;
}

/* footer */

footer {
  background: var(--accent-2);
  text-align: center;
  grid-column: 1 / 4;
}

footer p {
  display: block;
  color: var(--text-opposite);
  font-size: 18px;
  margin: 7px;
}

footer a {
  display: block;
  color: var(--text-opposite);
  text-decoration: none;
  font-size: 18px;
  margin: 7px;
}

footer a:hover {
  color: lightgreen;
  transition: color .5s;
}

/* pseudos */
/*text selection */

::-moz-selection { /* Code for Firefox */
  color: white;
  background: var(--accent-3);
}

::selection {
  color: white;
  background: var(--accent-3);
}

a {
  color: var(--text-primary);
  text-decoration: none;
}


a:hover {
  color: var(--text-primary);
  transition: color .5s;
}

a:visited {
/* removed due to overwriting a:hover after transitioning */
}


/* grid/portfolio*/
.container {
  display: grid;
  grid-template-columns: 250px 250px;
  grid-template-rows: 250px 250px;
  grid-gap: 1em;
  background-color: var(--background-primary);
  color: var(--text-primary);
  margin-top: 5vh;
  margin-left: 25%;
  margin-right: 50%;
}



.box {
/* placeholder */
}
.box:hover {
  transition: .5s;
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14) , 0px 3px 1px -2px rgba(0,0,0,0.12) , 0px 1px 5px 0px rgba(0,0,0,0.2) ;
  /* 0px 8px 17px 2px rgba(0,0,0,0.14) , 0px 3px 14px 2px rgba(0,0,0,0.12) , 0px 5px 5px -3px rgba(0,0,0,0.2) ; */
}