From beca781996390e2a798ed545b2c9231190aeb324 Mon Sep 17 00:00:00 2001
From: Notoric <tom@acornes.com>
Date: Sat, 24 Feb 2024 00:07:38 +0000
Subject: [PATCH] Added support for mobile too

---
 css/styles.css | 39 ++++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 5ad1c6f..baf37c3 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -9,6 +9,7 @@
   
 }
 
+
 body {
   font-family: 'Outfit', sans-serif;
   margin: 0;
@@ -16,6 +17,8 @@ body {
   box-sizing: border-box;
 }
 
+/* LANDING STYLES */
+
 @keyframes fadeImage {
   0% {
     opacity: 1;
@@ -104,8 +107,10 @@ h1 {
   font-size: 1.5em;
 }
 
+/* CAROUSEL STYLES */
+
 #carousel {
-  height: 910px;
+  height: 100vh;
   background-color: #0d0d0d;
   position: relative;
   display: flex;
@@ -113,6 +118,7 @@ h1 {
 
 #carousel-container {
   display: flex;
+  flex-direction: column;
   width: 100%;
   padding: 50px;
 }
@@ -120,15 +126,15 @@ h1 {
 .carousel-item {
   position: relative;
   display:block;
-  height: 800px;
-  width: 150px;
-  min-width: 150px;
-  margin-inline: 12px;
+  height: 150px;
+  width: 96%;
+  min-height: 150px;
+  margin: 12px;
   border-radius: 81px;
   border: 5px solid black;
   overflow: hidden;
 
-  transition: width 1s ease;
+  transition: width 1s ease, height 1s ease;
 }
 
 .carousel-item .carousel-id {
@@ -162,7 +168,7 @@ h1 {
 }
 
 #carousel-container .active {
-  width:100%;
+  height:100%;
 }
 
 #carousel-container #carousel-1 {
@@ -204,5 +210,24 @@ h1 {
 @media screen and (min-width: 1000px) {
 
   /* applies to screens wider than 999px */
+  #carousel {
+    height: 910px;
+  }
+
+  #carousel-container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .carousel-item {
+    min-width: 200px;
+    height: 800px;
+    width: 150px;
+    min-width: 150px;
+  }
+
+  #carousel-container .active {
+    width:100%;
+  }
 
 }