1 files changed, 35 insertions, 11 deletions

diff --git a/styles/styles.css b/styles/styles.css
index c246d36..8c2bf9c 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,10 +1,12 @@
 body {
-    background: url('bg.webp');
-    background-size: 100px 100px, 100% 100%;
-    font-family: 'Courier New', monospace;
+    background: url("bg.webp");
+    background-size:
+        100px 100px,
+        100% 100%;
+    font-family: "Courier New", monospace;
     color: #333;
     background-color: pink;
-    cursor: url('cursor.gif'), auto;
+    cursor: url("cursor.gif"), auto;
 }
 .container {
     width: 80%;
@@ -185,22 +187,26 @@ blink {
         opacity: 1;
     }
     10% {
-        transform: rotate(30deg) scale(1.3) translateX(10px) skew(10deg) rotateY(90deg);
+        transform: rotate(30deg) scale(1.3) translateX(10px) skew(10deg)
+            rotateY(90deg);
         filter: hue-rotate(50deg) blur(2px);
         opacity: 0.8;
     }
     25% {
-        transform: rotate(45deg) scale(1.5) translateX(20px) skew(-10deg) rotateY(180deg);
+        transform: rotate(45deg) scale(1.5) translateX(20px) skew(-10deg)
+            rotateY(180deg);
         filter: hue-rotate(120deg) blur(4px);
         opacity: 0.6;
     }
     50% {
-        transform: rotate(-45deg) scale(0.8) translateX(-30px) skew(15deg) rotateY(270deg);
+        transform: rotate(-45deg) scale(0.8) translateX(-30px) skew(15deg)
+            rotateY(270deg);
         filter: hue-rotate(200deg) blur(6px);
         opacity: 1;
     }
     75% {
-        transform: rotate(90deg) scale(1.8) translateX(15px) skew(-15deg) rotateY(360deg);
+        transform: rotate(90deg) scale(1.8) translateX(15px) skew(-15deg)
+            rotateY(360deg);
         filter: hue-rotate(300deg) blur(3px);
         opacity: 0.7;
     }
@@ -225,7 +231,9 @@ blink {
     font-size: 2em;
     opacity: 0;
     visibility: hidden;
-    transition: opacity 0.5s, visibility 0.5s;
+    transition:
+        opacity 0.5s,
+        visibility 0.5s;
     z-index: 10;
 }
 
@@ -234,13 +242,29 @@ blink {
     visibility: visible;
 }
 
+@media (max-width: 1024px) {
+    .container {
+        width: 90%;
+    }
+
+    .main-content {
+        flex-direction: column;
+    }
+
+    .sidebar,
+    .content {
+        width: 100%;
+    }
+}
+
 /* Media Queries for Mobile Devices */
 @media (max-width: 768px) {
     .container {
         width: 100%;
         padding: 10px;
     }
-    .sidebar, .content {
+    .sidebar,
+    .content {
         float: none;
         width: 100%;
         margin-top: 10px;
@@ -265,4 +289,4 @@ blink {
     .discord-status p {
         font-size: 0.9rem;
     }
-}
\ No newline at end of file
+}