finalises prototype gallery

pages/mainpage.css

@@ -98,12 +98,18 @@ h1{
     display: flex;
     margin-left: 10vw;
     margin-right: 10vw;
-    height: 10vw;
+    height: 19vh;
+    margin-bottom: 0vh;
+    transition: margin-bottom 0.5s;
+    justify-content: space-evenly;
+}
+
+.gallery:hover{
+    margin-bottom: 36vh;   
 }
 
 .galleryItem{
-    margin-left: 4vw;
-    height: 10vw;
+    height: 13vw;
 }
 
 
@@ -112,14 +118,19 @@ h1{
     opacity: 1;
 }
 
-.popupImage:hover, .galleryPopup{
+.galleryItem:hover .popupTongue{
     visibility: visible;
     opacity: 1;
 }
 
-.galleryPopup a{
-    width: 100%;
-    height: 100%;
+.galleryPopup:hover{
+    visibility: visible;
+    opacity: 1;
+}
+
+.galleryPopup:hover .popupTongue{
+    visibility: visible;
+    opacity: 1;
 }
 
 .galleryPopup{
@@ -132,11 +143,20 @@ h1{
     background-color: #ffd256;
     border-radius: 2px;
     color: #181818;
-    width: 67.5vw;
-    height: 15vw;
-    margin-left: 4vw;
-    text-decoration: none;
+    width: 78.5vw;
+    height: 19vh;
     transition: visibility 0.3s, opacity 0.5s;
+    margin-top: 14.85vw;
+}
+
+.popupTongue{
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0.3s, opacity 0.5s;
+
+    width: 1.85vw;
+    height: 1.85vw;
+    margin-left: 5vw;
 }
 
 .popupImage{
@@ -152,12 +172,12 @@ h1{
 .galleryImage{
     width: 100%;
     height: 100%;
-    padding: 10px;
 }
 
 .galleryImageContainer{
-    height: 13.5vw;
-    width: 13.5vw;
+    height: 100%;
+    width: 100%;
+    display: block;
 }
 
 .galleryTitle{ 
@@ -165,7 +185,7 @@ h1{
 }
 
 #outroText{
-    margin-top: 20vh;
+    margin-top: 12vh;
     margin-bottom: 20vh;
     margin-left: 27vw;
     margin-right: 27vw;