Fix responsive layout

css/styles.css

@@ -120,12 +120,12 @@ h1 {
     width: 100%;
     border-radius: 2.5%;
     background-color: #005380;
-    box-shadow: 2.5px 5px #FF8B00;
+    box-shadow: 5px 10px #FF8B00;
     cursor: pointer;
 }
 
 .card:hover {
-    box-shadow: 6px 12px #FF8B00;
+    box-shadow: 10px 20px #FF8B00;
     transition: box-shadow 0.25s ease-in-out;
     -webkit-transition: box-shadow 0.25s ease-in-out;
     -o-transition: box-shadow 0.25s ease-in-out;
@@ -172,7 +172,8 @@ h1 {
 }
 
 .card-image-box {
-    padding: 20px;
+    padding-left: 10px;
+    padding-right: 10px;
     padding-bottom: 5px;
     padding-top: 5px;
     width: 100%;
@@ -194,7 +195,7 @@ h1 {
     height: fit-content;
 }
 
-@media only screen and (max-width: 850px) {
+@media only screen and (max-width: 1100px) {
     .Navbar__Items,
     .Navbar {
         flex-direction: column;