:root {
  --content: #ffffff;
}

body {
  font-family: 'Nunito', sans-serif;
  margin: 0;
  background-color: #F7F2EB;
}
/* screen sizing */
#container {
  max-width: 900px;
  margin: 0 auto;
}

/* navigation bar */
#navbar {
  height: 40px;
  width: 100%;
}
#navbar ul {
   display: flex;  
  justify-content: space-evenly;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
#navbar li {
  padding-top: 10px;
}
#navbar li a {
  color: #394f98;
  font-weight: 800;
  text-decoration: none;
}
#navbar li a:hover {
  color: #394f98;
  text-decoration: underline;
}

/* sets all images into a grid container and places them all in 1 column and row */
.images {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative; 
  width: 100%;
  height: auto;
}
.img1 {
  position: absolute;  /* remove from document flow, position relative to nearest positioned ancestor */
  top: 10%;             /* move downward % of the container’s height */
  left: 90%;             /* move rightward % of the container’s width */
  width: 20%;            /* scale the image to % of the container’s width */
  height: auto;          /* keep intrinsic aspect ratio */
  z-index: 1;            /* stacking order (higher = on top) */
}
.img2 {
  position: absolute;  
  top: 50%;             
  left: 50%;            
  width: 50%;           
  height: auto;         
  z-index: 2;            
}

/* only activates for smaller screens*/
@media only screen and (max-width: 800px) {
  #images {
    flex-wrap: wrap;
  }
  aside {
    width: 100%;
  }
  #navbar ul {
    flex-wrap: wrap;
  }


}