Added darkmode styles and optimized class structure

Introduced dark mode styling across sections and improved CSS for better readability and maintainability. Replaced generic class names with more descriptive ones and reorganized structure for consistency. Adjusted responsive design to ensure better display on various screen sizes.

frontend/src/app/home/home.component.scss

@@ -19,7 +19,30 @@
   background-size: cover;
 }
 
+main .container {
+  padding: 80px 0;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
 
+.customContainer {
+  width: 80%;
+  max-width: 1020px;
+  margin: auto;
+  padding: 80px 0;
+  text-align: center;
+}
+
+// Discord Widget
+#discord-widget {
+  margin: 0 auto;
+  width: 40%;
+  max-width: 380px;
+  height: 400px;
+}
+
+//Scroll button/anchorpoint
 #scroll-button {
   position: absolute;
   bottom: 50px;
@@ -118,3 +141,215 @@
     opacity: 0;
   }
 }
+
+// Survival Shaped by You section
+.survivalShapedContainerPlugins {
+  display: flex;
+  justify-content: space-between;
+}
+
+.pluginColumn {
+  width: 250px;
+}
+
+.pluginColumn div {
+  margin-top: 30px;
+}
+
+.pluginColumn h2 {
+  color: var(--white);
+  font-size: 1.4em;
+  margin-bottom: 10px;
+}
+
+.pluginColumn p {
+  color: var(--white);
+}
+
+// Community builds section, removed if on mobile
+.sliderWrapper, .sliderContent {
+  display: flex;
+  margin: auto;
+}
+
+.sliderContent {
+  position: relative;
+  box-shadow: 8px 8px 25px 0 rgba(0, 0, 0, 0.2);
+}
+
+.indexSlider {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: rgba(0, 0, 0, 0.9);
+  font-size: 21px;
+  text-align: center;
+  border-radius: 5px;
+}
+
+.goLeft, .goRight {
+  display: block;
+  text-align: center;
+  position: absolute;
+  width: 250px;
+}
+
+.goRight:hover, .goLeft:hover {
+  background: rgba(155, 155, 155, 0.3);
+  box-shadow: -2px 0 15px rgba(200, 200, 200, 0.5);
+  cursor: pointer;
+}
+
+.goLeft {
+  height: 100%;
+  color: white;
+  left: 0;
+}
+
+.goRight {
+  height: 100%;
+  color: white;
+  right: 0;
+}
+
+.slide {
+  border-radius: 5px;
+}
+
+.display > span {
+  animation: fadein 1.5s;
+}
+
+.display > span {
+  width: 700px;
+  height: 400px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.dots {
+  text-align: center;
+  position: absolute;
+  bottom: 3%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+
+.dot {
+  position: relative;
+  cursor: pointer;
+  height: 1rem;
+  width: 1rem;
+  border: 1px solid rgb(255, 255, 255);
+  opacity: 0.5;
+  margin: 0 5px;
+  border-radius: 50%;
+  display: inline-block;
+  transition: all 0.3s ease;
+}
+
+.dot:hover {
+  box-shadow: -2px 0 10px 5px rgba(200, 200, 200, 0.3);
+  background-color: rgba(200, 200, 200, 0.8);
+  border: 1px solid rgb(255, 255, 255);
+  transform: scale(1.2);
+}
+
+// Different resolution changes
+@media (max-width: 1150px) {
+  .container {
+    width: 90%;
+  }
+
+  h1 {
+    font-size: 3em;
+  }
+
+  .title h2 {
+    font-size: 1em;
+  }
+
+  #homeh2 {
+    font-size: 1.6em;
+  }
+
+  .title {
+    height: calc(100% - 150px);
+    margin-top: 0;
+  }
+
+  .container, .customContainer {
+    width: 90%;
+  }
+
+  #header-img {
+    width: 45%;
+  }
+}
+
+@media (max-width: 900px) {
+  .removemobile {
+    display: none;
+  }
+}
+
+@media (max-width: 690px) {
+  #discordwidget {
+    margin: 0 auto;
+    width: 60%;
+    max-width: 380px;
+    height: 400px;
+  }
+
+  #discordp {
+    margin: 50px auto;
+  }
+
+  .title h2 {
+    font-size: 0.9em;
+  }
+
+  #homeh2 {
+    font-size: 1.4em;
+    width: 100%;
+  }
+
+  #header-img {
+    width: 65%;
+  }
+
+  .title {
+    height: calc(100% - 110px);
+    margin-top: 100px;
+  }
+
+  .columnContainer {
+    width: 100%;
+    text-align: center;
+  }
+
+  main .container {
+    text-align: center;
+    width: 90%;
+    padding: 30px 0;
+  }
+
+  .paragraph {
+    width: 80%;
+    margin: 0 auto 30px auto;
+  }
+
+  .survivalShapedContainerPlugins {
+    display: block;
+  }
+
+  .pluginColumn {
+    margin: 30px auto;
+  }
+
+  #quote {
+    font-size: 1em;
+  }
+}