shrine responsiveness, eyes and text decoration

home/shrine/styles.css

@@ -1,17 +1,22 @@
 
 body, html {
-    overflow: hidden; /* Prevents scrollbar from appearing */
+    overflow: hidden;
+    margin: 1%;
+    justify-content: center;
+    align-items: center;
 }
+/* 
 #menu {
-    width: 1300px; /* Sets the width of the div to 80% of the viewport */
-    max-width: 80%; /* Ensures the div does not exceed 80% of the viewport width */
-    margin: 0 auto; /* Centers the div horizontally */
-    display: flex;
+    width: 25%; 
+    margin: 0 auto; 
+    display: block;
     flex-direction: row;
     justify-content: center;
     align-items: center;
   }
 
+
+
 #menu img {
     max-height: 50%;
     max-width: 50%;
@@ -19,4 +24,48 @@ body, html {
     height: auto;
     object-fit: contain;
     overflow: hidden;
+}
+* {
+    box-sizing: border-box;
+  } */
+
+#eyes {
+    width: 75%;
+    float: left;
+    text-align: center;
+}
+
+
+.grid-container {
+display: grid;
+grid-template-columns: 40% 60%;
+grid-template-rows: 100vh;
+justify-content: center;
+align-items: center;
+
+}
+
+#aphrodite{
+    
+    max-width: 100%; /* Ensures the image doesn't exceed its container's width */
+    max-height: 90vh;
+    height: auto; /* Maintains the aspect ratio of the image */
+    object-fit: contain;
+    justify-content: center;
+    align-items: center;
+    
+    
+
+}
+
+/* Eye class */
+.eye{
+    display: flex;
+    justify-content: space-around;
+}
+
+.eye ~ a{
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
 }