added challenges

Author: RanitManik

FrontendMentor30—tip-calculator-app/src/output.css

@@ -578,10 +578,6 @@ video {
   min-height: 100vh;
 }
 
-.max-w-\[1000px\] {
-  max-width: 1000px;
-}
-
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -868,18 +864,6 @@ input[type="number"] {
 }
 
 @media (min-width: 640px) {
-  .sm\:min-w-\[90\%\] {
-    min-width: 90%;
-  }
-
-  .sm\:min-w-\[min\(90\%\2c _1440px\)\] {
-    min-width: min(90%, 1440px);
-  }
-
-  .sm\:min-w-\[min\(90\%\2c _1000px\)\] {
-    min-width: min(90%, 1000px);
-  }
-
   .sm\:min-w-\[min\(90\%\2c _900px\)\] {
     min-width: min(90%, 900px);
   }
@@ -896,14 +880,6 @@ input[type="number"] {
 }
 
 @media (min-width: 1024px) {
-  .lg\:max-w-\[1440px\] {
-    max-width: 1440px;
-  }
-
-  .lg\:max-w-\[1600px\] {
-    max-width: 1600px;
-  }
-
   .lg\:gap-3 {
     gap: 0.75rem;
   }

FrontendMentor31—newsletter-sign-up-with-success-message/design/active-states.jpg

@@ -0,0 +1,36 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.
+
+## Colors
+
+### Primary
+
+- Tomato: hsl(4, 100%, 67%)
+
+### Neutral
+
+- Dark Slate Grey: hsl(234, 29%, 20%)
+- Charcoal Grey: hsl(235, 18%, 26%)
+- Grey: hsl(231, 7%, 60%)
+- White: hsl(0, 0%, 100%)
+
+## Typography
+
+### Body Copy
+
+- Font size (paragraph): 16px
+
+### Font
+
+- Family: [Roboto](https://fonts.google.com/specimen/Roboto)
+- Weights: 400, 700
+
+> 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma.