Update styles.css

Techiral · Jul 4, 2024 · 99ca960 · 99ca960
1 parent 0e7312e
commit 99ca960
Showing 1 changed file with 65 additions and 82 deletions.
diff --git a/styles.css b/styles.css
@@ -1,10 +1,25 @@
-body {
+/* Reset styles */
+* {
     margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
     font-family: 'Arial', sans-serif;
-    background-color: #1a1a1a;
-    color: #f0f0f0;
+    background-color: #111;
+    color: #fff;
+    overflow-x: hidden; /* Prevent horizontal scroll */
+}
+
+/* Global styles */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
 }
 
+/* Hero section */
 .hero-section {
     position: relative;
     height: 100vh;
@@ -14,7 +29,6 @@ body {
     align-items: center;
     text-align: center;
     color: #fff;
-    animation: slideIn 1s ease-out;
 }
 
 .hero-section .overlay {
@@ -29,134 +43,103 @@ body {
 .hero-section .content {
     position: relative;
     z-index: 1;
-    animation: fadeIn 2s ease-in-out;
 }
 
 .hero-section h1 {
     font-size: 4em;
-    margin: 0;
-    animation: fadeInDown 1s ease-out;
+    margin-bottom: 20px;
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
 }
 
 .hero-section p {
     font-size: 1.5em;
-    animation: fadeInUp 1.5s ease-out;
+    margin-bottom: 30px;
 }
 
 .cta-button {
     display: inline-block;
     padding: 15px 30px;
-    margin-top: 20px;
-    background-color: #fa5c5c;
+    background-color: #fa5c5c; /* Neon red */
     color: #fff;
     text-decoration: none;
     border-radius: 5px;
     transition: background-color 0.3s, transform 0.3s;
-    animation: bounceIn 2s ease-out;
 }
 
 .cta-button:hover {
-    background-color: #d34b4b;
+    background-color: #ff4f4f; /* Lighter red on hover */
     transform: scale(1.05);
 }
 
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes fadeInDown {
-    from {
-        opacity: 0;
-        transform: translateY(-50px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(50px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes bounceIn {
-    0%, 20%, 40%, 60%, 80%, 100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-10px);
-    }
-}
-
-section {
-    padding: 50px 20px;
-    text-align: center;
-}
-
-h2 {
-    font-size: 2.5em;
-    margin-bottom: 20px;
-    animation: fadeIn 2s ease-in-out;
-    color: #fa5c5c; /* Reddish accent color */
-}
-
-ul {
-    list-style: none;
-    padding: 0;
-    animation: fadeIn 2s ease-in-out;
-}
-
-ul li {
-    margin-bottom: 10px;
+/* Character cards */
+.character-cards {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 30px;
 }
 
 .character-card {
     background-color: #333;
     padding: 20px;
     border-radius: 10px;
-    margin: 20px 0;
+    text-align: center;
     transition: transform 0.3s, box-shadow 0.3s;
-    animation: fadeIn 2s ease-in-out;
+    width: 300px;
 }
 
 .character-card:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
+    transform: translateY(-10px);
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
 }
 
+.character-card h3 {
+    font-size: 2em;
+    margin-bottom: 10px;
+}
+
+/* Screenshot carousel */
 .screenshot-carousel {
     display: flex;
     overflow-x: auto;
-    animation: fadeIn 2s ease-in-out;
+    gap: 20px;
+    margin-top: 30px;
 }
 
 .screenshot-carousel img {
-    width: 300px;
+    width: 400px;
     height: auto;
-    margin-right: 20px;
     border-radius: 10px;
+    transition: transform 0.3s, box-shadow 0.3s;
 }
 
-video {
-    width: 80%;
+.screenshot-carousel img:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+}
+
+/* Video container */
+.video-container {
+    position: relative;
+    overflow: hidden;
+    padding-top: 56.25%; /* Aspect ratio for 16:9 video */
+    margin-top: 30px;
+}
+
+.video-container video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     border-radius: 10px;
+    object-fit: cover;
 }
 
+/* Footer */
 footer {
     text-align: center;
     padding: 20px;
-    background-color: #111;
+    background-color: #222;
     color: #999; /* Lighter gray text color */
 }