1 files changed, 41 insertions, 10 deletions

diff --git a/styles/styles.css b/styles/styles.css
index dcbb506..c246d36 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -150,8 +150,6 @@ blink {
     margin-bottom: 5px;
 }
 
-
-
 .discord-status {
     display: flex;
     align-items: center;
@@ -162,25 +160,25 @@ blink {
     margin-top: 20px;
     margin-bottom: 10px;
     background: #7289da;
-  }
+}
 
-  .discord-status img {
+.discord-status img {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     margin-right: 20px;
-  }
+}
 
-  .discord-status h2 {
+.discord-status h2 {
     font-size: 1.2rem;
-  }
+}
 
-  .discord-status p {
+.discord-status p {
     font-size: 1rem;
     opacity: 0.8;
-  }
+}
 
-  @keyframes crazy-animation {
+@keyframes crazy-animation {
     0% {
         transform: rotate(0deg) scale(1) translateX(0) skew(0deg) rotateY(0deg);
         filter: hue-rotate(0deg) blur(0px);
@@ -234,4 +232,37 @@ blink {
 .crazy-image:hover + .fullscreen-text {
     opacity: 1;
     visibility: visible;
+}
+
+/* Media Queries for Mobile Devices */
+@media (max-width: 768px) {
+    .container {
+        width: 100%;
+        padding: 10px;
+    }
+    .sidebar, .content {
+        float: none;
+        width: 100%;
+        margin-top: 10px;
+    }
+    .header {
+        font-size: 1.5em;
+    }
+    .footer {
+        font-size: 0.7em;
+    }
+    .discord-status {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .discord-status img {
+        margin-right: 0;
+        margin-bottom: 10px;
+    }
+    .discord-status h2 {
+        font-size: 1rem;
+    }
+    .discord-status p {
+        font-size: 0.9rem;
+    }
 }
\ No newline at end of file