Fixed all styling for rules page.

Reorganized SCSS files for better structure and maintainability. Updated layouts to ensure consistent spacing, alignment, and responsiveness across components. Note: "Show exceptions" still needs to be fixed.
Also fixed social icon spacing in the footer.

frontend/src/app/footer/footer.component.scss

@@ -34,7 +34,7 @@ footer ul, footer p {
 }
 
 .followUs {
-  padding-top: 15px;
+  padding-top: 5px;
 }
 
 .followUs img {

frontend/src/app/rules/rules.component.html

@@ -1,5 +1,6 @@
 <ng-container>
-  <app-header [current_page]="'rules'" background_image="/public/img/backgrounds/trees.jpg" height="460px">
+  <app-header [current_page]="'rules'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              background-size="">
     <div class="title" header-content>
       <h1>Server Rules</h1>
       <h2>We aim to be an inclusive community server where players of all ages can find something to enjoy.</h2>

frontend/src/app/rules/rules.component.scss

@@ -1,21 +1,6 @@
-@media (max-width: 1000px) {
+.paragraph {
-  main .container {
+  width: 100%;
-    text-align: left;
+  margin-bottom: -25px;
-  }
-
-  .list {
-    text-align: left;
-  }
-}
-
-@media (max-width: 670px) {
-  main .container {
-    text-align: center;
-  }
-
-  .list {
-    margin-left: 50px;
-  }
 }
 
 .highlighted-content {
@@ -40,6 +25,10 @@
   transition: 0.5s ease;
 }
 
+.full-page-list li {
+  padding-bottom: 10px;
+}
+
 .full-page-list-2 {
   margin-left: 70px;
   font-family: 'opensans', sans-serif;
@@ -53,6 +42,31 @@
   transition: 0.5s ease;
 }
 
+.hide {
+  display: none;
+}
+
 .copy-link {
   cursor: pointer;
 }
+
+// Different resolution changes
+@media (max-width: 1000px) {
+  main .container {
+    text-align: left;
+  }
+
+  .list {
+    text-align: left;
+  }
+}
+
+@media (max-width: 670px) {
+  main .container {
+    text-align: center;
+  }
+
+  .list {
+    margin-left: 50px;
+  }
+}

frontend/src/styles.scss

@@ -221,6 +221,13 @@ tr {
   transition: 0.5s ease;
 }
 
+main .container {
+  padding: 80px 0;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
 .container {
   width: 80%;
   max-width: 1020px;
@@ -229,7 +236,6 @@ tr {
   align-items: center;
 }
 
-
 .title {
   height: calc(100% - 110px);
   display: flex;