diff --git a/src/public/style.css b/src/public/style.css
index efaa1c7..132ad8f 100644
--- a/src/public/style.css
+++ b/src/public/style.css
@@ -1,92 +1,101 @@
-h1{
-    color: white;
-    text-align: center;
+h1 {
+  color: white;
+  text-align: center;
 }
 
-h2{
-    color: white;
-    text-align: center;
-    margin-top: 50px;
+h2 {
+  color: white;
+  text-align: center;
+  margin-top: 30px;
+  margin-bottom: 10px;
 }
 
-body{
-    background-color: black;
-    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+body {
+  background-color: black;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
 }
 
-p{
-    color: white;
-    text-align: center;
+p {
+  color: white;
+  text-align: center;
 }
 
-.navButton{
-    background-color: black;
-    color: white;
-    border-style: solid;
-    border-radius: 25px;
-    border-color: white;
-    width: 200px;
-    height: 75px;
+.navButton {
+  background-color: black;
+  color: white;
+  border-style: solid;
+  border-radius: 25px;
+  border-color: white;
+  width: 200px;
+  height: 75px;
 }
 
-.navButton:hover{
-    background-color: white;
-    color: black;
+.navButton:hover {
+  background-color: white;
+  color: black;
 }
 
-.socialIcon{
-    background-color: white;
-    border-image-width: 15%;
-    border-radius: 10px;
-    margin: 5px 5px;
-    width: 50px;
-    height: 50px;
+.socialIcon {
+  background-color: white;
+  border-image-width: 15%;
+  border-radius: 10px;
+  margin: 5px 5px;
+  width: 50px;
+  height: 50px;
 }
 
-.socialIcon:hover{
-    opacity: 0.6;
+.socialIcon:hover {
+  opacity: 0.6;
 }
 
-.centerButtons{
-    display: flex;
-    justify-content: center;
-    row-gap: 50%;
+.centerButtons {
+  display: flex;
+  justify-content: center;
+  row-gap: 50%;
 }
 
-.logo{
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    width: 200px;
-    height: 200px;
+.logo {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 200px;
+  height: 200px;
 }
 
 .gridSize {
-    display: grid;
-    align-content: center;
-    gap: 15px 25px;
-    grid-template-columns: auto auto auto;
-    padding: 50px;
+  display: grid;
+  justify-content: center;
+  align-content: start;
+  gap: 30px 30px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  padding: 20px 10vw;
+  margin-top: 30px;
 }
 
 .gridSize > .pageOuter {
-    border: 5px solid white;
-    background-size: cover;
-    border-radius: 25px;
-    color: white;
-    padding: 100px;
-    font-size: 25px;
-    text-align: center;
-    overflow: hidden;
+  border: 5px solid white;
+  background-size: cover;
+  border-radius: 25px;
+  color: white;
+  padding: 40px 20px;
+  font-size: 25px;
+  text-align: center;
+  overflow: hidden;
+  min-width: 0;
 }
 
 .pageInner {
-    font-size: 10px;
-    text-align: center;
-    overflow: hidden;
+  font-size: 10px;
+  text-align: center;
+  overflow: hidden;
 }
 
-.pageOuter:hover{
-    background-color: white;
-    color: black;
-}
\ No newline at end of file
+.pageOuter:hover {
+  background-color: white;
+  color: black;
+}
+
+.topThings {
+  margin-bottom: 20px;
+}