Update style.css

Author: E-waste25

web-gallery/style.css

@@ -1,24 +1,32 @@
+/* Global Reset */
 html {
     box-sizing: border-box;
     background: yellow;
     font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
     font-size: 20px;
     font-weight: 200;
-  }
-  *,
-  *:before,
-  *:after {
+}
+
+*,
+*:before,
+*:after {
     box-sizing: inherit;
-  }
-  body {
+}
+
+/* Body Reset */
+body {
     margin: 0;
-  }
-  .photos {
+}
+
+/* Container for Photos */
+.photos {
     min-height: 100vh;
     overflow: hidden;
     display: flex;
-  }
-  .photo {
+}
+
+/* Individual Photo Styling */
+.photo {
     color: rgb(8, 3, 75);
     background: #6b0f9c;
     box-shadow: inset 0 0 0 5px rgba(12, 21, 105, 0.1);
@@ -28,67 +36,6 @@ html {
     font-size: 20px;
     background-size: cover;
     background-position: center;
-    flex: 1;
     justify-content: center;
     display: flex;
-    flex-direction: column;
-    transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
-      flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
-  }
-  .neha {
-    background-image: url("./img/neha.jpg");
-  }
-  .nishat {
-    background-image: url("./img/tat.jpg");
-  }
-  .mahee {
-    background-image: url("./img/khatai.jpg");
-  }
-  .nura {
-    background-image: url("./img/nams.jpg");
-  }
-  .nedu {
-    background-image: url("./img/nedu.jpg");
-  }
-  
-  .photo > * {
-    margin: 0;
-    width: 100%;
-    transition: transform 0.5s;
-    flex: 1 0 auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .photo > *:first-child {
-    transform: translateY(-100%);
-  }
-  .photo.open-active > *:first-child {
-    transform: translateY(0);
-  }
-  .photo > *:last-child {
-    transform: translateY(100%);
-  }
-  .photo.open-active > *:last-child {
-    transform: translateY(0);
-  }
-  
-  .photo p {
-    font-family: 'Pacifico', cursive;
-    text-shadow: 0 0 4px rgb(54 211 38 / 72%), 0 0 14px rgb(231 20 109 / 75%);
-    font-size: 2em;
-  }
-  .photo p:nth-child(2) {
-    font-size: 3em;
-  }
-  
-  .photo.open-active > *:nth-child(2) {
-    display: none;
-  }
-  
-  .photo.open {
-    flex: 5;
-    font-size: 40px;
-  }
-  
+    flex-direction