/* README
  - the sidebar was pushed way down the page, so I had to use a whole lot of margins to force it back into the proper place. It feels unethical, but it worked, and I definitely would not be using grid like this on a real website build out
  - the new grid template on the nav worked really well. Got the icons to show up.
  - really good challenge! Although it's an unconventional use case, it worked my brain once again proving to me that building websites isn't just fun and games :)
*/
/* local styles - just a quick refactoring  */
 :root {
    --main-grid: repeat(2, 1fr);
    --sub-grid: repeat(4, 1fr);
    --grid-gap: 1rem;
 }
 /* cosmetics */

 @import url(https://fonts.googleapis.com/css?family=Muli);

 * {
   margin: 0;
   padding: 0;
 }

 li {
   list-style-type: none;
 }

 /* page layout */

 body {
   display: grid; /* puts all children of the body in a grid */
   grid-template-columns: var(--main-grid);

   /* cosmetics */
   padding: 1em;
   font-family: "Muli", sans-serif;
 }

 img {
  display: block;
  padding: 0;
  margin: 0;
   width: 100%;
 }
 /* My stuff  */
 .gallery {
    display: grid;
    grid-template-columns: var(--sub-grid);
    gap: var(--grid-gap);
    grid-column: 2/4;
 }
 .gallery li {
    transition: 0.3s ease-in-out;
 }
 .gallery li:hover {
    transform: scale(80%);
 }
aside {
  scale: 80%;
  grid-column: 1/2;
  margin-top: -86rem;
}


header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column: 1/4;
    align-items: center;
}
header h1 {
  font-size: 2rem;
}
nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}
.nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
}
.nav li a {
    color: black;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
}

.sn {
    display: grid;
    grid-template-columns: repeat(2, 50%);
}
.sn img {
    scale: 30%;
} 

footer {
    grid-row-start: 4;
    grid-row-end: 4;
}