h2 {
  margin: 10px;
  font-size: 35px;
}
h3 {
  margin: 0px;
  font-size: 27px;
  text-decoration: underline;
}

body{
  width: 100vw;
}

.notesGridContainer {
	  width: 100%;
	  margin: 0 auto;  /*Centers the div in middle of page*/
	  display: flex;
      border: none;
      flex-direction: row;
	  flex-wrap: wrap;
	  align-items: flex-start;      /*--moves flex items to middle of container*/
	  justify-content: center;
	  align-content: space-around;
}


.notesGridContainer > a, .notesGridContainer > div  {
    margin: 5px;
    padding: 2.5px;

    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    height: 23vw;
    width: 23vw;
    justify-content: center;
    align-items: center;
    transition: all 80ms linear;
}
.notesGridContainer > a:hover, .notesGridContainer > div:hover {
    padding: 0px;
    width: calc(23vw + 5px);
    height: calc(23vw + 5px);
}


.notesGridContainer > a:active, .notesGridContainer > div:active {
    position:relative;
    top:2px;
}


img{
  object-fit: cover;    /*makes the image fill the gallery box as a square*/
  width:100%;
  height:100%;
}