Home page and shopping-cart

dist/css/main.css

@@ -16,149 +16,186 @@ ORDER: Base + typography > general layout + grid > page layout > components
 1em = 16px
 */
 
+
 /* Orbitron */
+
 @font-face {
-  font-family: "Orbitron";
-  src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Orbitron";
-  src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
-  font-weight: 500;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Orbitron";
-  src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Orbitron";
-  src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
-  font-weight: 700;
-  font-style: normal;
-}
-/* Orbitron end */
-/* Satoshi */
-@font-face {
-  font-family: "Satoshi";
-  src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Satoshi";
-  src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
-  font-weight: 500;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Satoshi";
-  src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
-  font-weight: 700;
-  font-style: normal;
+    font-family: "Orbitron";
+    src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
+    font-weight: 400;
+    font-style: normal;
 }
 
+@font-face {
+    font-family: "Orbitron";
+    src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Orbitron";
+    src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Orbitron";
+    src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
+    font-weight: 700;
+    font-style: normal;
+}
+
+
+/* Orbitron end */
+
+
+/* Satoshi */
+
+@font-face {
+    font-family: "Satoshi";
+    src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Satoshi";
+    src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Satoshi";
+    src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
+    font-weight: 700;
+    font-style: normal;
+}
+
+
 /* Satoshi end */
+
 *,
 *::after,
 *::before {
-  margin: 0;
-  padding: 0;
-  box-sizing: inherit; 
-
-  font-family: "Orbitron" ,sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+    font-family: "Orbitron", sans-serif;
 }
 
-.satoshi_font{
-  font-family: "Satoshi", sans-serif;
+.satoshi_font {
+    font-family: "Satoshi", sans-serif;
 }
 
 html {
-  font-size: 100%; }
+    font-size: 100%;
+}
 
 body {
-  box-sizing: border-box; 
-  overflow-x: hidden;
+    box-sizing: border-box;
+    overflow-x: hidden;
 }
-  @media only screen and (max-width: 56.25em) {
+
+@media only screen and (max-width: 56.25em) {
     body {
-      padding: 0; } 
-  }
+        padding: 0;
+    }
+}
 
 .bg-green {
-  background-color: #3bb78f;
-  background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%); }
+    background-color: #3bb78f;
+    background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
+}
 
 .font-3 {
-  font-size: 3rem; }
+    font-size: 3rem;
+}
 
 .font-1_5 {
-  font-size: 2rem; }
+    font-size: 2rem;
+}
 
 .font-1_7 {
-  font-size: 1.7rem; }
+    font-size: 1.7rem;
+}
 
 .font-2 {
-  font-size: 2.2rem; }
+    font-size: 2.2rem;
+}
 
 .font-2_2 {
-  font-size: 2.2rem; }
+    font-size: 2.2rem;
+}
 
 .subtitle_1 {
-  font-size: 1.5rem; }
+    font-size: 1.5rem;
+}
 
 .gap-1 {
-  gap: 0.7rem; }
+    gap: 0.7rem;
+}
 
 .banner_heading_4 {
-  font-size: 3rem; }
+    font-size: 3rem;
+}
 
 .padding_top_14 {
-  padding-top: 14rem; }
+    padding-top: 14rem;
+}
 
 .padding_top_10 {
-  padding-top: 10rem; }
+    padding-top: 10rem;
+}
 
 .p-6 {
-  padding: 5rem; }
+    padding: 5rem;
+}
 
 .vh_60 {
-  height: 60vh; }
+    height: 60vh;
+}
 
 .vh-77 {
-  height: 77vh; }
+    height: 77vh;
+}
 
 .vh-85 {
-  height: 85vh; }
+    height: 85vh;
+}
 
 .vh-15 {
-  height: 15vh; }
+    height: 15vh;
+}
 
 .fw-600 {
-  font-weight: 600; }
+    font-weight: 600;
+}
 
-  .fw-700 {
-    font-weight: 700; }
+.fw-700 {
+    font-weight: 700;
+}
 
 .h-200p {
-  height: 200px; }
-/* button */
-.button_dark {
-  clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
-  padding-right: 1.7rem;
-  padding-bottom: 0.6rem;
-  padding-top: 0.6rem;
-  border-radius: 10px; }
-/* footer */
-.footer-wrapper {
-  background-color: rgb(0, 0, 0);
-  border-radius: 0 275px 0 0;
-  clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
+    height: 200px;
 }
+
+
+/* button */
+
+.button_dark {
+    clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
+    padding-right: 1.7rem;
+    padding-bottom: 0.6rem;
+    padding-top: 0.6rem;
+    border-radius: 10px;
+}
+
+
+/* footer */
+
 .footer-wrapper li {
-  line-height: 2rem;
+    line-height: 2rem;
 }