@jaisocx/css-clean-start-2 1.0.0 → 1.0.1

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_portrait__CssCleanStart_2__theme_base.css

@@ -9,25 +9,29 @@ These styles for a display size in this primary template for a site from scratch
 That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
 
 */
-@media only screen and (min-width: 321px) and (max-width: 374px) and (orientation: portrait) {
+@media only screen and (min-width: 321px) and (max-width: 375px) and (min-height: 321px) and (max-height: 99999px) and (orientation: portrait) {
 
   .jsx {
+    --theme_name: CssCleanStart_2__theme_base;
     --theme_name__CssCleanStart_2: theme_base;
-    --responsive_size: responsive_size_e04_mobile_s_portrait;
-    --responsive_size__CssCleanStart_2__theme_base: responsive_size_e04_mobile_s_portrait__CssCleanStart_2__theme_base;
 
     --responsive_size: responsive_size_e04_mobile_s_portrait;
 
     --responsive_size__min-width: 321px;
-    --responsive_size__max-width: 374px;
+    --responsive_size__max-width: 375px;
+
+    --responsive_size__min-height: 321px;
+    --responsive_size__max-height: 99999px;
 
 
 
-    --theme_name__CssCleanStart_2: theme_base;
     --responsive_size__CssCleanStart_2__theme_base: responsive_size_e04_mobile_s_portrait__CssCleanStart_2__theme_base;
 
     --responsive_size__CssCleanStart_2__theme_base__min-width: 321px;
-    --responsive_size__CssCleanStart_2__theme_base__max-width: 374px;
+    --responsive_size__CssCleanStart_2__theme_base__max-width: 375px;
+
+    --responsive_size__CssCleanStart_2__theme_base__min-height: 321px;
+    --responsive_size__CssCleanStart_2__theme_base__max-height: 99999px;
 
 
 
@@ -74,7 +78,7 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
     /* --jsx--css-clean-start-2--site--overflow-x: hidden; */
     /* --jsx--css-clean-start-2--site--overflow-y: visible; */
 
-    /* --jsx--css-clean-start-2--site--width: 70%; */
+    --jsx--css-clean-start-2--site--width: 100%;
     /* --jsx--css-clean-start-2--site--max-width: 100%; */
     --jsx--css-clean-start-2--site--min-width: 100%;
 
@@ -122,8 +126,8 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
     /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
     /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
 
-    /* --jsx--css-clean-start-2--all-tags--font-size: 0.85rem; */
-    /* --jsx--css-clean-start-2--all-tags--line-height: 1rem; */
+    --jsx--css-clean-start-2--all-tags--font-size: 1rem;
+    --jsx--css-clean-start-2--all-tags--line-height: 1.2rem;
 
     /* --jsx--css-clean-start-2--all-tags--border-color: green; */
     /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_landscape__CssCleanStart_2__theme_base.css

@@ -9,25 +9,29 @@ These styles for a display size in this primary template for a site from scratch
 That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
 
 */
-@media only screen and (min-width: 668px) and (max-width: 736px) and (orientation: landscape) {
+@media only screen and (min-width: 376px) and (max-width: 99999px) and (min-height: 376px) and (max-height: 430px) and (orientation: landscape) {
 
   .jsx {
+    --theme_name: CssCleanStart_2__theme_base;
     --theme_name__CssCleanStart_2: theme_base;
-    --responsive_size: responsive_size_e06_mobile_sm_landscape;
-    --responsive_size__CssCleanStart_2__theme_base: responsive_size_e06_mobile_sm_landscape__CssCleanStart_2__theme_base;
 
     --responsive_size: responsive_size_e06_mobile_sm_landscape;
 
-    --responsive_size__min-width: 668px;
-    --responsive_size__max-width: 736px;
+    --responsive_size__min-width: 376px;
+    --responsive_size__max-width: 99999px;
+
+    --responsive_size__min-height: 376px;
+    --responsive_size__max-height: 430px;
 
 
 
-    --theme_name__CssCleanStart_2: theme_base;
     --responsive_size__CssCleanStart_2__theme_base: responsive_size_e06_mobile_sm_landscape__CssCleanStart_2__theme_base;
 
-    --responsive_size__CssCleanStart_2__theme_base__min-width: 668px;
-    --responsive_size__CssCleanStart_2__theme_base__max-width: 736px;
+    --responsive_size__CssCleanStart_2__theme_base__min-width: 376px;
+    --responsive_size__CssCleanStart_2__theme_base__max-width: 99999px;
+
+    --responsive_size__CssCleanStart_2__theme_base__min-height: 376px;
+    --responsive_size__CssCleanStart_2__theme_base__max-height: 430px;
 
 
 
@@ -122,8 +126,8 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
     /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
     /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
 
-    /* --jsx--css-clean-start-2--all-tags--font-size: 0.85rem; */
-    /* --jsx--css-clean-start-2--all-tags--line-height: 1rem; */
+    --jsx--css-clean-start-2--all-tags--font-size: 1rem;
+    --jsx--css-clean-start-2--all-tags--line-height: 1.2rem;
 
     /* --jsx--css-clean-start-2--all-tags--border-color: green; */
     /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_portrait__CssCleanStart_2__theme_base.css

@@ -9,26 +9,30 @@ These styles for a display size in this primary template for a site from scratch
 That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
 
 */
-@media only screen and (min-width: 375px) and (max-width: 430px) and (orientation: portrait) {
+@media only screen and (min-width: 376px) and (max-width: 430px) and (min-height: 376px) and (max-height: 99999px) and (orientation: portrait) {
 
   .jsx {
+    --theme_name: CssCleanStart_2__theme_base;
     --theme_name__CssCleanStart_2: theme_base;
-    --responsive_size: responsive_size_e06_mobile_sm_portrait;
-    --responsive_size__CssCleanStart_2__theme_base: responsive_size_e06_mobile_sm_portrait__CssCleanStart_2__theme_base;
 
     --responsive_size: responsive_size_e06_mobile_sm_portrait;
 
-    --responsive_size__min-width: 375px;
+    --responsive_size__min-width: 376px;
     --responsive_size__max-width: 430px;
 
+    --responsive_size__min-height: 376px;
+    --responsive_size__max-height: 99999px;
+
 
 
-    --theme_name__CssCleanStart_2: theme_base;
     --responsive_size__CssCleanStart_2__theme_base: responsive_size_e06_mobile_sm_portrait__CssCleanStart_2__theme_base;
 
-    --responsive_size__CssCleanStart_2__theme_base__min-width: 375px;
+    --responsive_size__CssCleanStart_2__theme_base__min-width: 376px;
     --responsive_size__CssCleanStart_2__theme_base__max-width: 430px;
 
+    --responsive_size__CssCleanStart_2__theme_base__min-height: 376px;
+    --responsive_size__CssCleanStart_2__theme_base__max-height: 99999px;
+
 
 
 
@@ -74,7 +78,7 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
     /* --jsx--css-clean-start-2--site--overflow-x: hidden; */
     /* --jsx--css-clean-start-2--site--overflow-y: visible; */
 
-    /* --jsx--css-clean-start-2--site--width: 70%; */
+    --jsx--css-clean-start-2--site--width: 100%;
     /* --jsx--css-clean-start-2--site--max-width: 100%; */
     --jsx--css-clean-start-2--site--min-width: 100%;
 
@@ -122,8 +126,8 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
     /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
     /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
 
-    /* --jsx--css-clean-start-2--all-tags--font-size: 0.85rem; */
-    /* --jsx--css-clean-start-2--all-tags--line-height: 1rem; */
+    --jsx--css-clean-start-2--all-tags--font-size: 1rem;
+    --jsx--css-clean-start-2--all-tags--line-height: 1.2rem;
 
     /* --jsx--css-clean-start-2--all-tags--border-color: green; */
     /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_landscape__CssCleanStart_2__theme_base.css

@@ -9,25 +9,29 @@ These styles for a display size in this primary template for a site from scratch
 That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
 
 */
-@media only screen and (min-width: 737px) and (max-width: 812px) and (orientation: landscape) {
+@media only screen and (min-width: 431px) and (max-width: 99999px) and (min-height: 431px) and (max-height: 480px) and (orientation: landscape) {
 
   .jsx {
+    --theme_name: CssCleanStart_2__theme_base;
     --theme_name__CssCleanStart_2: theme_base;
-    --responsive_size: responsive_size_e08_mobile_md_landscape;
-    --responsive_size__CssCleanStart_2__theme_base: responsive_size_e08_mobile_md_landscape__CssCleanStart_2__theme_base;
 
     --responsive_size: responsive_size_e08_mobile_md_landscape;
 
-    --responsive_size__min-width: 737px;
-    --responsive_size__max-width: 812px;
+    --responsive_size__min-width: 431px;
+    --responsive_size__max-width: 99999px;
+
+    --responsive_size__min-height: 431px;
+    --responsive_size__max-height: 480px;
 
 
 
-    --theme_name__CssCleanStart_2: theme_base;
     --responsive_size__CssCleanStart_2__theme_base: responsive_size_e08_mobile_md_landscape__CssCleanStart_2__theme_base;
 
-    --responsive_size__CssCleanStart_2__theme_base__min-width: 737px;
-    --responsive_size__CssCleanStart_2__theme_base__max-width: 812px;
+    --responsive_size__CssCleanStart_2__theme_base__min-width: 431px;
+    --responsive_size__CssCleanStart_2__theme_base__max-width: 99999px;
+
+    --responsive_size__CssCleanStart_2__theme_base__min-height: 431px;
+    --responsive_size__CssCleanStart_2__theme_base__max-height: 480px;
 
 
 
@@ -122,8 +126,8 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
     /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
     /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
 
-    /* --jsx--css-clean-start-2--all-tags--font-size: 0.85rem; */
-    /* --jsx--css-clean-start-2--all-tags--line-height: 1rem; */
+    --jsx--css-clean-start-2--all-tags--font-size: 1rem;
+    --jsx--css-clean-start-2--all-tags--line-height: 1.2rem;
 
     /* --jsx--css-clean-start-2--all-tags--border-color: green; */
     /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_portrait__CssCleanStart_2__theme_base.css

@@ -9,26 +9,30 @@ These styles for a display size in this primary template for a site from scratch
 That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
 
 */
-@media only screen and (min-width: 431px) and (max-width: 480px) and (orientation: portrait) {
+@media only screen and (min-width: 431px) and (max-width: 480px) and (min-height: 431px) and (max-height: 99999px) and (orientation: portrait) {
 
   .jsx {
+    --theme_name: CssCleanStart_2__theme_base;
     --theme_name__CssCleanStart_2: theme_base;
-    --responsive_size: responsive_size_e08_mobile_md_portrait;
-    --responsive_size__CssCleanStart_2__theme_base: responsive_size_e08_mobile_md_portrait__CssCleanStart_2__theme_base;
 
     --responsive_size: responsive_size_e08_mobile_md_portrait;
 
     --responsive_size__min-width: 431px;
     --responsive_size__max-width: 480px;
 
+    --responsive_size__min-height: 431px;
+    --responsive_size__max-height: 99999px;
+
 
 
-    --theme_name__CssCleanStart_2: theme_base;
     --responsive_size__CssCleanStart_2__theme_base: responsive_size_e08_mobile_md_portrait__CssCleanStart_2__theme_base;
 
     --responsive_size__CssCleanStart_2__theme_base__min-width: 431px;
     --responsive_size__CssCleanStart_2__theme_base__max-width: 480px;
 
+    --responsive_size__CssCleanStart_2__theme_base__min-height: 431px;
+    --responsive_size__CssCleanStart_2__theme_base__max-height: 99999px;
+
 
 
 
@@ -74,7 +78,7 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
     /* --jsx--css-clean-start-2--site--overflow-x: hidden; */
     /* --jsx--css-clean-start-2--site--overflow-y: visible; */
 
-    /* --jsx--css-clean-start-2--site--width: 70%; */
+    --jsx--css-clean-start-2--site--width: 100%;
     /* --jsx--css-clean-start-2--site--max-width: 100%; */
     --jsx--css-clean-start-2--site--min-width: 100%;
 
@@ -122,8 +126,8 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
     /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
     /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
 
-    /* --jsx--css-clean-start-2--all-tags--font-size: 0.85rem; */
-    /* --jsx--css-clean-start-2--all-tags--line-height: 1rem; */
+    --jsx--css-clean-start-2--all-tags--font-size: 1rem;
+    --jsx--css-clean-start-2--all-tags--line-height: 1.2rem;
 
     /* --jsx--css-clean-start-2--all-tags--border-color: green; */
     /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */

package/MediaAndStyles/themes/theme_base/responsive/{responsive_size_h03_tablet_sm_landscape__CssCleanStart_2__theme_base.css → responsive_size_h03_tablet_s_landscape__CssCleanStart_2__theme_base.css}

@@ -9,25 +9,29 @@ These styles for a display size in this primary template for a site from scratch
 That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
 
 */
-@media only screen and (min-width: 813px) and (max-width: 960px) and (orientation: landscape) {
+@media only screen and (min-width: 481px) and (max-width: 99999px) and (min-height: 481px) and (max-height: 767px) and (orientation: landscape) {
 
   .jsx {
+    --theme_name: CssCleanStart_2__theme_base;
     --theme_name__CssCleanStart_2: theme_base;
-    --responsive_size: responsive_size_h03_tablet_sm_landscape;
-    --responsive_size__CssCleanStart_2__theme_base: responsive_size_h03_tablet_sm_landscape__CssCleanStart_2__theme_base;
 
-    --responsive_size: responsive_size_h03_tablet_sm_landscape;
+    --responsive_size: responsive_size_h03_tablet_s_landscape;
 
-    --responsive_size__min-width: 813px;
-    --responsive_size__max-width: 960px;
+    --responsive_size__min-width: 481px;
+    --responsive_size__max-width: 99999px;
 
+    --responsive_size__min-height: 481px;
+    --responsive_size__max-height: 767px;
 
 
-    --theme_name__CssCleanStart_2: theme_base;
-    --responsive_size__CssCleanStart_2__theme_base: responsive_size_h03_tablet_sm_landscape__CssCleanStart_2__theme_base;
 
-    --responsive_size__CssCleanStart_2__theme_base__min-width: 813px;
-    --responsive_size__CssCleanStart_2__theme_base__max-width: 960px;
+    --responsive_size__CssCleanStart_2__theme_base: responsive_size_h03_tablet_s_landscape__CssCleanStart_2__theme_base;
+
+    --responsive_size__CssCleanStart_2__theme_base__min-width: 481px;
+    --responsive_size__CssCleanStart_2__theme_base__max-width: 99999px;
+
+    --responsive_size__CssCleanStart_2__theme_base__min-height: 481px;
+    --responsive_size__CssCleanStart_2__theme_base__max-height: 767px;
 
 
 

package/MediaAndStyles/themes/theme_base/responsive/{responsive_size_h03_tablet_sm_portrait__CssCleanStart_2__theme_base.css → responsive_size_h03_tablet_s_portrait__CssCleanStart_2__theme_base.css}

@@ -9,26 +9,30 @@ These styles for a display size in this primary template for a site from scratch
 That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
 
 */
-@media only screen and (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
+@media only screen and (min-width: 481px) and (max-width: 767px) and (min-height: 481px) and (max-height: 99999px) and (orientation: portrait) {
 
   .jsx {
+    --theme_name: CssCleanStart_2__theme_base;
     --theme_name__CssCleanStart_2: theme_base;
-    --responsive_size: responsive_size_h03_tablet_sm_portrait;
-    --responsive_size__CssCleanStart_2__theme_base: responsive_size_h03_tablet_sm_portrait__CssCleanStart_2__theme_base;
 
-    --responsive_size: responsive_size_h03_tablet_sm_portrait;
+    --responsive_size: responsive_size_h03_tablet_s_portrait;
 
     --responsive_size__min-width: 481px;
     --responsive_size__max-width: 767px;
 
+    --responsive_size__min-height: 481px;
+    --responsive_size__max-height: 99999px;
 
 
-    --theme_name__CssCleanStart_2: theme_base;
-    --responsive_size__CssCleanStart_2__theme_base: responsive_size_h03_tablet_sm_portrait__CssCleanStart_2__theme_base;
+
+    --responsive_size__CssCleanStart_2__theme_base: responsive_size_h03_tablet_s_portrait__CssCleanStart_2__theme_base;
 
     --responsive_size__CssCleanStart_2__theme_base__min-width: 481px;
     --responsive_size__CssCleanStart_2__theme_base__max-width: 767px;
 
+    --responsive_size__CssCleanStart_2__theme_base__min-height: 481px;
+    --responsive_size__CssCleanStart_2__theme_base__max-height: 99999px;
+
 
 
 
@@ -74,8 +78,8 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
     /* --jsx--css-clean-start-2--site--overflow-x: hidden; */
     /* --jsx--css-clean-start-2--site--overflow-y: visible; */
 
-    /* --jsx--css-clean-start-2--site--width: 70%; */
-    /* --jsx--css-clean-start-2--site--max-width: 100%; */
+    --jsx--css-clean-start-2--site--width: 100%;
+   /* --jsx--css-clean-start-2--site--max-width: 100%; */
     --jsx--css-clean-start-2--site--min-width: 100%;
 
 
@@ -122,8 +126,8 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
     /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
     /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
 
-    /* --jsx--css-clean-start-2--all-tags--font-size: 0.85rem; */
-    /* --jsx--css-clean-start-2--all-tags--line-height: 1rem; */
+    --jsx--css-clean-start-2--all-tags--font-size: 1rem;
+    --jsx--css-clean-start-2--all-tags--line-height: 1.2rem;
 
     /* --jsx--css-clean-start-2--all-tags--border-color: green; */
     /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */

package/MediaAndStyles/themes/theme_base/responsive/{responsive_size_h05_tablet_md_portrait__CssCleanStart_2__theme_base.css → responsive_size_h05_tablet_sm_landscape__CssCleanStart_2__theme_base.css}

@@ -9,26 +9,30 @@ These styles for a display size in this primary template for a site from scratch
 That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
 
 */
-@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {
 
   .jsx {
+    --theme_name: CssCleanStart_2__theme_base;
     --theme_name__CssCleanStart_2: theme_base;
-    --responsive_size: responsive_size_h05_tablet_md_portrait;
-    --responsive_size__CssCleanStart_2__theme_base: responsive_size_h05_tablet_md_portrait__CssCleanStart_2__theme_base;
 
-    --responsive_size: responsive_size_h05_tablet_md_portrait;
+    --responsive_size: responsive_size_h05_tablet_sm_landscape;
 
     --responsive_size__min-width: 768px;
     --responsive_size__max-width: 1024px;
 
+    --responsive_size__min-height: 768px;
+    --responsive_size__max-height: 1024px;
 
 
-    --theme_name__CssCleanStart_2: theme_base;
-    --responsive_size__CssCleanStart_2__theme_base: responsive_size_h05_tablet_md_portrait__CssCleanStart_2__theme_base;
+
+    --responsive_size__CssCleanStart_2__theme_base: responsive_size_h05_tablet_sm_landscape__CssCleanStart_2__theme_base;
 
     --responsive_size__CssCleanStart_2__theme_base__min-width: 768px;
     --responsive_size__CssCleanStart_2__theme_base__max-width: 1024px;
 
+    --responsive_size__CssCleanStart_2__theme_base__min-height: 768px;
+    --responsive_size__CssCleanStart_2__theme_base__max-height: 1024px;
+
 
 
 
@@ -76,7 +80,7 @@ That is why in the CssCleanStart just the css constants relevant for sizes are s
 
     /* --jsx--css-clean-start-2--site--width: 70%; */
     /* --jsx--css-clean-start-2--site--max-width: 100%; */
-    --jsx--css-clean-start-2--site--min-width: 100%;
+    /* --jsx--css-clean-start-2--site--min-width: 70%; */
 
 
 

package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h05_tablet_sm_portrait__CssCleanStart_2__theme_base.css

@@ -0,0 +1,235 @@
+/*
+
+Responsive rules
+
+These styles for a display size in this primary template for a site from scratch,
+  I guess, need first the adjustments for sizes,
+  when tested on several displays for higher quality of a site shown in a browser on a display.
+
+That is why in the CssCleanStart just the css constants relevant for sizes are set in this template.
+
+*/
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 1024px) and (orientation: portrait) {
+
+  .jsx {
+    --theme_name: CssCleanStart_2__theme_base;
+    --theme_name__CssCleanStart_2: theme_base;
+
+    --responsive_size: responsive_size_h05_tablet_sm_portrait;
+
+    --responsive_size__min-width: 768px;
+    --responsive_size__max-width: 1024px;
+
+    --responsive_size__min-height: 768px;
+    --responsive_size__max-height: 1024px;
+
+
+
+    --responsive_size__CssCleanStart_2__theme_base: responsive_size_h05_tablet_sm_portrait__CssCleanStart_2__theme_base;
+
+    --responsive_size__CssCleanStart_2__theme_base__min-width: 768px;
+    --responsive_size__CssCleanStart_2__theme_base__max-width: 1024px;
+
+    --responsive_size__CssCleanStart_2__theme_base__min-height: 768px;
+    --responsive_size__CssCleanStart_2__theme_base__max-height: 1024px;
+
+
+
+
+
+    /** Clean Start Css Constants */
+    /** -------------------------------
+      this style sets rem size for the html page. 1rem = 16px
+    */
+    /* --jsx--css-clean-start-2--rem: 16px; */
+
+
+    /** -------------------------------
+      background styles of the html elem <body>, and, the direct anchester html elem <main>
+    */
+    /* --jsx--css-clean-start-2--body-tag--background: #eee; */
+    /* --jsx--css-clean-start-2--site--background: #fff; */
+
+
+
+    /** -------------------------------
+      width and height of the body elem
+    */
+    /* --jsx--css-clean-start-2--body-tag--width: 100%; */
+    /* --jsx--css-clean-start-2--body-tag--max-width: 100%; */
+    /* --jsx--css-clean-start-2--body-tag--min-width: 100%; */
+
+    /* --jsx--css-clean-start-2--body-tag--height: auto; */
+    /* --jsx--css-clean-start-2--body-tag--max-height: unset; */
+    /* --jsx--css-clean-start-2--body-tag--min-height: 100vh; */
+
+    /* --jsx--css-clean-start-2--body-tag--overflow-x: auto; */
+    /* --jsx--css-clean-start-2--body-tag--overflow-y: auto; */
+
+
+
+    /** -------------------------------
+      width and height of the site, normally positioned in the center of the browser's tab
+    */
+    /* --jsx--css-clean-start-2--site--height: fit-content; */
+    /* --jsx--css-clean-start-2--site--max-height: fit-content; */
+    /* --jsx--css-clean-start-2--site--min-height: 100vh; */
+
+    /* --jsx--css-clean-start-2--site--overflow-x: hidden; */
+    /* --jsx--css-clean-start-2--site--overflow-y: visible; */
+
+    --jsx--css-clean-start-2--site--width: 100%;
+    /* --jsx--css-clean-start-2--site--max-width: 100%; */
+    --jsx--css-clean-start-2--site--min-width: 100%;
+
+
+
+    /** -------------------------------
+      padding and margin of the site
+    */
+    /* --jsx--css-clean-start-2--site--margin: 0 auto 0 auto; */
+
+    /* --jsx--css-clean-start-2--site--padding-top: 1rem; */
+    /* --jsx--css-clean-start-2--site--padding-left: 1rem; */
+    /* --jsx--css-clean-start-2--site--padding-right: 1rem; */
+    /* --jsx--css-clean-start-2--site--padding-bottom: 1rem; */
+    /* --jsx--css-clean-start-2--site--padding: var(--jsx--css-clean-start-2--site--padding-top) var(--jsx--css-clean-start-2--site--padding-left) var(--jsx--css-clean-start-2--site--padding-bottom) var(--jsx--css-clean-start-2--site--padding-right); */
+
+
+    /** -------------------------------
+      overflow styles
+    */
+    /* --jsx--css-clean-start-2--body-tag--overflow-x: hidden; */
+    /* --jsx--css-clean-start-2--site--overflow-y: visible; */
+
+
+
+    /** -------------------------------
+      html elems styles
+    */
+    /* --jsx--css-clean-start-2--all-tags--position: relative; */
+    /* --jsx--css-clean-start-2--all-tags--box-sizing: border-box; */
+
+    /* --jsx--css-clean-start-2--inline-tags--display: inline-block; */
+    /* --jsx--css-clean-start-2--block-tags--display: block; */
+    /* --jsx--css-clean-start-2--custom-tags--display: var(--jsx--css-clean-start-2--block-tags--display); */
+
+    /* --jsx--css-clean-start-2--all-tags--padding: 0 0 0 0; */
+    /* --jsx--css-clean-start-2--h--padding: 0 0 0 0; */
+
+    /* --jsx--css-clean-start-2--all-tags--margin: 0 0 0 0; */
+    /* --jsx--css-clean-start-2--h--margin: 0 0 0 0; */
+    /* --jsx--css-clean-start-2--p--margin: 0.9rem 0 0.9rem 0; */
+
+    /* --jsx--css-clean-start-2--all-tags--color: black; */
+
+    /* --jsx--css-clean-start-2--all-tags--font-family: "Franklin Gothic Medium", Verdana, sans-serif; */
+    /* --jsx--css-clean-start-2--pre--font-family: "Courier New", Courier, monospace; */
+
+    --jsx--css-clean-start-2--all-tags--font-size: 1rem;
+    --jsx--css-clean-start-2--all-tags--line-height: 1.2rem;
+
+    /* --jsx--css-clean-start-2--all-tags--border-color: green; */
+    /* --jsx--css-clean-start-2--all-tags--border-style: dotted; */
+    /* --jsx--css-clean-start-2--all-tags--border-width: 0; */
+
+
+
+    /** -------------------------------
+      h1 til h6 styles
+    */
+    /* --jsx--css-clean-start-2--h--font-weight: 600; */
+    /* --jsx--css-clean-start-2--h--color:       #626262; */
+    /* --jsx--css-clean-start-2--h--margin:      0 0 0 0; */
+    /* --jsx--css-clean-start-2--h--padding:     0 0 0 0; */
+
+
+
+    /* --jsx--css-clean-start-2--h1--font-size: 2.3rem; */
+    /* --jsx--css-clean-start-2--h1--line-height: 2.45rem; */
+
+    /* --jsx--css-clean-start-2--h2--font-size: 2.1rem; */
+    /* --jsx--css-clean-start-2--h2--line-height: 2.34rem; */
+
+    /* --jsx--css-clean-start-2--h3--font-size: 1.8rem; */
+    /* --jsx--css-clean-start-2--h3--line-height: 2.2rem; */
+
+    /* --jsx--css-clean-start-2--h4--font-size: 1.6rem; */
+    /* --jsx--css-clean-start-2--h4--line-height: 2rem; */
+
+    /* --jsx--css-clean-start-2--h5--font-size: 1.33rem; */
+    /* --jsx--css-clean-start-2--h5--line-height: 1.67rem; */
+
+    /* --jsx--css-clean-start-2--h6--font-size: 1rem; */
+    /* --jsx--css-clean-start-2--h6--line-height: 1.6rem; */
+
+
+
+    /* --jsx--css-clean-start-2--h1--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h1--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h1--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h1--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+    /* --jsx--css-clean-start-2--h2--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h2--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h2--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h2--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+    /* --jsx--css-clean-start-2--h3--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h3--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h3--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h3--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+    /* --jsx--css-clean-start-2--h4--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h4--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h4--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h4--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+    /* --jsx--css-clean-start-2--h5--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h5--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h5--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h5--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+    /* --jsx--css-clean-start-2--h6--font-weight: var(--jsx--css-clean-start-2--h--font-weight); */
+    /* --jsx--css-clean-start-2--h6--color:       var(--jsx--css-clean-start-2--h--color); */
+    /* --jsx--css-clean-start-2--h6--margin:      var(--jsx--css-clean-start-2--h--margin); */
+    /* --jsx--css-clean-start-2--h6--padding:     var(--jsx--css-clean-start-2--h--padding); */
+
+
+
+    /** -------------------------------
+      hyperlnks text colors
+    */
+    /* --jsx--css-clean-start-2--anchor--color: navy; */
+    /* --jsx--css-clean-start-2--anchor-hover--color: blue; */
+
+    /* --jsx--css-clean-start-2--anchor-visited--color: grey; */
+    /* --jsx--css-clean-start-2--anchor-visited-hover--color: grey; */
+
+    /* --jsx--css-clean-start-2--anchor-active--color: darkblue; */
+    /* --jsx--css-clean-start-2--anchor-active-hover--color: blue; */
+
+
+
+    /** -------------------------------
+      hyperlnks are underlined, or they have been set other css text-decoration style
+    */
+    /* --jsx--css-clean-start-2--anchor--text-decoration: none; */
+    /* --jsx--css-clean-start-2--anchor-hover--text-decoration: underline; */
+
+    /* --jsx--css-clean-start-2--anchor-visited--text-decoration: none; */
+    /* --jsx--css-clean-start-2--anchor-visited-hover--text-decoration: underline; */
+
+    /* --jsx--css-clean-start-2--anchor-active--text-decoration: underline; */
+    /* --jsx--css-clean-start-2--anchor-active-hover--text-decoration: underline; */
+
+
+
+    /* --jsx--css-clean-start-2--thead--background-color: ghostwhite; */
+    /* --jsx--css-clean-start-2--tfoot--background-color: honeydew; */
+
+  }
+
+}
+
+