Update dev server

resources/styles/main.css

@@ -524,12 +524,26 @@ h1 {
   }
 }
 
+@keyframes fullscreen-image-appear {
+  from {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  to {
+    width: 100%;
+    height: 100vh;
+  }
+}
 #fullscreen {
+  margin: 0;
+  padding: 0;
   display: none;
   align-items: center;
   justify-content: center;
-  width: 99vw;
+  width: 100%;
   height: 100vh;
+  background: black;
 }
 #fullscreen #fullscreen-img {
   max-width: 100%;
@@ -538,21 +552,47 @@ h1 {
   cursor: pointer;
 }
 
+.gallery-text {
+  overflow: auto;
+  background: linear-gradient(to left, #1d60b5, #3b8fff);
+}
+.gallery-text h1 {
+  margin: 2.5vh 0;
+  text-align: center;
+  font: 600 2.5vw "Montserrat", sans-serif;
+  color: white;
+}
+
 .gallery {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+  overflow: hidden;
 }
-.gallery .photo {
+.gallery .photo-container {
   margin: 1vh 1vw;
   width: 25%;
   height: 25%;
-  cursor: pointer;
+  overflow: hidden;
 }
-.gallery .photo:hover {
-  filter: brightness(1.3);
+.gallery .photo-container .photo {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  transition: 750ms all ease-in-out;
+  filter: brightness(80%);
+}
+.gallery .photo-container .photo:hover {
+  filter: brightness(100%);
+  transform: scale(1.3);
+}
+@media (hover: hover) and (pointer: fine) {
+  .gallery .photo-container .photo:active {
+    filter: brightness(100%);
+    transform: scale(1.3);
+  }
 }
 
 #header {