+
diff --git a/main.css b/main.css
index ec21daa..42c166b 100644
--- a/main.css
+++ b/main.css
@@ -27,7 +27,7 @@
@layer utilities {
details {
- @apply w-[923px] bg-purple text-deep-purple rounded-[30px] py-2.5 px-12;
+ @apply lg:w-[923px] bg-purple text-deep-purple rounded-[30px] py-2.5 lg:px-12 px-4;
}
details summary {
diff --git a/styles.css b/styles.css
index dc75a30..5a3fecd 100644
--- a/styles.css
+++ b/styles.css
@@ -683,18 +683,22 @@ h1, h2, h3, h4, h5, h6 {
margin: 0.25rem;
}
-.mb-24 {
- margin-bottom: 6rem;
+.mb-16 {
+ margin-bottom: 4rem;
}
-.mb-\[150px\] {
- margin-bottom: 150px;
+.mb-24 {
+ margin-bottom: 6rem;
}
.mt-2 {
margin-top: 0.5rem;
}
+.mb-5 {
+ margin-bottom: 1.25rem;
+}
+
.box-border {
box-sizing: border-box;
}
@@ -806,10 +810,6 @@ h1, h2, h3, h4, h5, h6 {
width: 100%;
}
-.flex-\[0_0_454px\] {
- flex: 0 0 454px;
-}
-
.flex-none {
flex: none;
}
@@ -1330,6 +1330,10 @@ h1, h2, h3, h4, h5, h6 {
justify-items: stretch;
}
+.gap-12 {
+ gap: 3rem;
+}
+
.gap-16 {
gap: 4rem;
}
@@ -1358,18 +1362,26 @@ h1, h2, h3, h4, h5, h6 {
gap: 1.25rem;
}
-.gap-7 {
- gap: 1.75rem;
+.gap-6 {
+ gap: 1.5rem;
}
-.gap-\[53px\] {
- gap: 53px;
+.gap-7 {
+ gap: 1.75rem;
}
.gap-\[77px\] {
gap: 77px;
}
+.gap-10 {
+ gap: 2.5rem;
+}
+
+.gap-8 {
+ gap: 2rem;
+}
+
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1831,10 +1843,6 @@ h1, h2, h3, h4, h5, h6 {
background-image: url('img/website-bg.svg');
}
-.bg-fireflies {
- background-image: url('img/website-bg2.png');
-}
-
.bg-groundboi {
background-image: url('img/sticker2-no_border.png');
}
@@ -1974,16 +1982,26 @@ h1, h2, h3, h4, h5, h6 {
padding-right: 2.5rem;
}
-.px-12 {
- padding-left: 3rem;
- padding-right: 3rem;
-}
-
.px-24 {
padding-left: 6rem;
padding-right: 6rem;
}
+.px-5 {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+}
+
+.px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+}
+
+.px-9 {
+ padding-left: 2.25rem;
+ padding-right: 2.25rem;
+}
+
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
@@ -1994,6 +2012,11 @@ h1, h2, h3, h4, h5, h6 {
padding-bottom: 6rem;
}
+.py-4 {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
@@ -2087,9 +2110,9 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
-.text-6xl {
- font-size: 3.75rem;
- line-height: 1;
+.text-base {
+ font-size: 1rem;
+ line-height: 1.5rem;
}
.text-xl {
@@ -2506,18 +2529,25 @@ h1, h2, h3, h4, h5, h6 {
}
details {
- width: 923px;
border-radius: 30px;
--tw-bg-opacity: 1;
background-color: rgb(182 115 235 / var(--tw-bg-opacity));
padding-top: 0.625rem;
padding-bottom: 0.625rem;
- padding-left: 3rem;
- padding-right: 3rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
--tw-text-opacity: 1;
color: rgb(27 0 44 / var(--tw-text-opacity));
}
+@media (min-width: 1024px) {
+ details {
+ width: 923px;
+ padding-left: 3rem;
+ padding-right: 3rem;
+ }
+}
+
details summary {
display: flex;
align-items: center;
@@ -2573,22 +2603,6 @@ details p {
src: url("fonts/fivo-sans/FivoSans/FivoSans-Bold.otf") format("opentype");
}
-:root {
- --lavender: #e5ccff;
- --purple: #b673eb;
- --deep-purple: #1b002c;
- --violet: #5e38be;
- --indigo: #241d63;
-}
-
-footer .coc {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 20px;
-}
-
@media (min-width: 640px) {
.sm\:container {
width: 100%;
@@ -2653,6 +2667,152 @@ footer .coc {
}
}
+@media (min-width: 1024px) {
+ .lg\:relative {
+ position: relative;
+ }
+
+ .lg\:mb-\[150px\] {
+ margin-bottom: 150px;
+ }
+
+ .lg\:mb-0 {
+ margin-bottom: 0px;
+ }
+
+ .lg\:block {
+ display: block;
+ }
+
+ .lg\:inline {
+ display: inline;
+ }
+
+ .lg\:flex {
+ display: flex;
+ }
+
+ .lg\:flex-\[0_0_454px\] {
+ flex: 0 0 454px;
+ }
+
+ .lg\:flex-row {
+ flex-direction: row;
+ }
+
+ .lg\:items-start {
+ align-items: flex-start;
+ }
+
+ .lg\:gap-0 {
+ gap: 0px;
+ }
+
+ .lg\:gap-14 {
+ gap: 3.5rem;
+ }
+
+ .lg\:gap-2 {
+ gap: 0.5rem;
+ }
+
+ .lg\:gap-2\.5 {
+ gap: 0.625rem;
+ }
+
+ .lg\:gap-20 {
+ gap: 5rem;
+ }
+
+ .lg\:self-start {
+ align-self: flex-start;
+ }
+
+ .lg\:bg-fireflies {
+ background-image: url('img/website-bg2.png');
+ }
+
+ .lg\:bg-groundboi {
+ background-image: url('img/sticker2-no_border.png');
+ }
+
+ .lg\:bg-\[length\:344px_auto\] {
+ background-size: 344px auto;
+ }
+
+ .lg\:bg-center-top {
+ background-position: center top;
+ }
+
+ .lg\:bg-no-repeat {
+ background-repeat: no-repeat;
+ }
+
+ .lg\:bg-repeat-y {
+ background-repeat: repeat-y;
+ }
+
+ .lg\:px-0 {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+
+ .lg\:px-10 {
+ padding-left: 2.5rem;
+ padding-right: 2.5rem;
+ }
+
+ .lg\:px-12 {
+ padding-left: 3rem;
+ padding-right: 3rem;
+ }
+
+ .lg\:py-0 {
+ padding-top: 0px;
+ padding-bottom: 0px;
+ }
+
+ .lg\:py-5 {
+ padding-top: 1.25rem;
+ padding-bottom: 1.25rem;
+ }
+
+ .lg\:px-24 {
+ padding-left: 6rem;
+ padding-right: 6rem;
+ }
+
+ .lg\:py-12 {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+ }
+
+ .lg\:text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ }
+
+ .lg\:text-4xl {
+ font-size: 2.25rem;
+ line-height: 2.5rem;
+ }
+
+ .lg\:text-5xl {
+ font-size: 3rem;
+ line-height: 1;
+ }
+
+ .lg\:text-6xl {
+ font-size: 3.75rem;
+ line-height: 1;
+ }
+
+ .lg\:text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ }
+}
+
@media (prefers-color-scheme: dark) {
@media (min-width: 1024px) {
.dark\:lg\:hover\:\[paint-order\:markers\]:hover {