reworked art

complete redesign of css, needs cleaning up

pages/mainpage.css

@@ -9,15 +9,14 @@
 body{
     color: #ffd256;
     font-family: "roboto";
-    background-color: #221A0F;
-    background-image: url("../images/BackGroundTestNoGlow.png");
+    background-color: #181818;
+    /*background-image: url("../images/BackGroundTestNoGlow.png");*/
     background-position: bottom;
     
 }
 
 
-h1, h2, h3{
-    border-radius: 5px;
+h1, h2, h3, h4{
     font-size: clamp(12px, 1vw, 50px);
     padding: 1.3vh;
 }
@@ -46,30 +45,44 @@ h2, h3{
 
 }
 
+h4{
+    margin-top: 20vh;
+    margin-bottom: 30vh;
+    margin-left: 27vw;
+    margin-right: 27vw;
+
+}
+
 button{
     background-color: transparent;
     border: none;
     color: #ffd256;
 }
 
-
-
-.orangeBack{ /*for anything that isnt a <h> tag*/
+.orangeBorder{
+    border: 2px solid #ffd256;
     border-radius: 5px;
     padding: 5px;
 }
 
-.orangeBorder{
-    border: 5px outset #ffd256;
-    border-radius: 5px;
-}
-
 .textBox{
     text-align: center;
     padding: 2.5vh;
     font-size: 1.3vw;
 }
 
+.galleryDescriptor{
+    font-size: 1vw;
+    vertical-align: text-bottom;
+    grid-column:2/13;
+    grid-row: 1;
+
+    padding-left: 7px;
+
+    font-size: clamp(13px, 1vw, 40px);
+
+}
+
 #galleryHeader{
     margin-left: 35vw; 
     margin-right: 35vw;
@@ -80,7 +93,7 @@ button{
 #programGallery{
     display: grid;
     grid-template-columns: repeat(12, 1fr);
-    grid-template-rows: repeat(10, 1fr);
+    grid-template-rows: repeat(11, 1fr);
 
     height: 70vh;
     width: 70vw;
@@ -96,7 +109,7 @@ button{
 #personalGallery{
     display: grid;
     grid-template-columns: repeat(12, 1fr);
-    grid-template-rows: repeat(10, 1fr);
+    grid-template-rows: repeat(11, 1fr);
 
     height: 70vh;
     width: 70vw;
@@ -106,12 +119,13 @@ button{
 
     margin-left: auto;
     margin-right: auto;
+    margin-bottom: 10vh;
     margin-top: 10vh;
 }
 
-.GalleryImage{ /*all images should be 700x700*/
+.galleryImage{ /*all images should be 700x700*/
     grid-column: 2/8;
-    grid-row: 2/11;
+    grid-row: 3/12;
 
     object-fit: cover;
 
@@ -119,18 +133,17 @@ button{
     height: 100%;
 }
 
-img.GalleryImage{
+img.galleryImage{
     border: 2px solid #ffd256;
     border-bottom-left-radius: 5px;
-    border-top-right-radius: 5px;
     box-sizing: border-box;
 
     padding: 5;
 }
 
-.GalleryTitle{
+.galleryTitle{
     grid-column: 2/12;
-    grid-row: 1;
+    grid-row: 2;
 
     padding: 5px;
 
@@ -145,29 +158,37 @@ img.GalleryImage{
     border-right: 2px solid #ffd256;
 }
 
-.GalleryCaption{
+.galleryCaption{
     grid-column: 8/12;
-    grid-row: 2/11;
+    grid-row: 3/12;
 
     border-radius: 0;
     border-bottom-right-radius: 5px;
 
     border-bottom: 2px solid #ffd256;
     border-right: 2px solid #ffd256;
+    border-top: 2px solid #ffd256;
+
+    padding: 5px;
 }
 
-.GalleryLeftArrow{
+.galleryLeftArrow{
     grid-column: 1;
-    grid-row: 5/6;
+    grid-row: 6/7;
     font-size: 7vw;
 }
 
-.GalleryRightArrow{
+.galleryRightArrow{
     grid-column: 12;
-    grid-row: 5/6;
+    grid-row: 6/7;
     font-size: 7vw;
 }
 
+button:focus {
+    border: none;
+    outline: none;
+}
+
 
 #socialBar{
     position: fixed;
@@ -237,9 +258,13 @@ img.GalleryImage{
         margin-right: 0;
     }
 
-    .GalleryImage{ /*all images should be 700x700*/
+    .galleryDescriptor{
         grid-column: 1/13;
-        grid-row: 2/7;
+    }
+
+    .galleryImage{ /*all images should be 700x700*/
+        grid-column: 1/13;
+        grid-row: 3/8;
         border-bottom-left-radius: 0;
     
         object-fit: cover;
@@ -247,35 +272,47 @@ img.GalleryImage{
         width: 100%;
         height: 100%;
     }
+
+    img.galleryImage{
+        border: 0;
+        padding-left: 0;
+        padding-right: 0;
+
+    }
     
-    .GalleryTitle{
+    .galleryTitle{
         grid-column: 1/13;
-        grid-row: 1;
+        grid-row: 2;
     
         padding: 5px;
     
-        font-size: 5vh;
+        font-size: 3.5vh;
     
         border-radius: 0;
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 2px solid #ffd256;;
     }
 
-    .GalleryCaption{
+    .galleryCaption{
         grid-column: 1/13;
-        grid-row: 7/12;
+        grid-row: 8/13;
     
         border-radius: 0;
-        font-size: 3.2vw; 
+        font-size: 2vw; 
+        border-left: 0;
+        border-right: 0;
     }
     
-    .GalleryLeftArrow{
+    .galleryLeftArrow{
         grid-column: 1;
-        grid-row: 12;
+        grid-row: 13;
         font-size: 7vw;
     }
     
-    .GalleryRightArrow{
+    .galleryRightArrow{
         grid-column: 12;
-        grid-row: 12;
+        grid-row: 13;
         font-size: 7vw;
     }
 }