Typography

<style>
/* TYPOGRAPHY STYLES */

/* default styles */
body {
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, label {
	font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
:is(h1, h2, h3, h4, h5, h6, p) a {
	text-decoration: underline;
}

/* desktop */
html {
  /* sizes */
  --fs0-5: 7rem;
  --fs1: 5.5rem;
  --fs2: 3.8rem;
  --fs3: 3.2rem;
  --fs4: 2.6rem;
  --fs5: 2rem;
  --fs6: 1.4rem;
  --fs6-5: 1.2rem;
  --fs7: 1.125rem;
  --fs7-5: 0.9rem;
  /* weights */
  --fw1: 400;
  --fw2: 500;
	--fw3: 700;
  /* line heights */
  --lh1: 1.5;
  --lh2: 1.3;
  --lh3: 1.1;
  --lh4: 1;
  /* letter spacing */
  --ls0: 0em;
  --ls1: -0.025em;
}
/* tablet */
@media screen and (max-width: 991px) {
  html {
    --fs0-5: 5.5rem;
    --fs1: 4.2rem;
    --fs2: 3.2rem;
    --fs3: 2.8rem;
    --fs4: 2.4rem;
  }
}
/* mobile landscape */
@media screen and (max-width: 767px) {
  html {
    --fs0-5: 4.8rem;
    --fs1: 3.8rem;
    --fs2: 2.8rem;
    --fs3: 2.6rem;
  }
}
/* mobile portrait */
@media screen and (max-width: 479px) {
  html {
    --fs0-5: 4rem;
    --fs1: 3.2rem;
  }
}

/* apply font styles */
[class*="fs0-5"] {
  font-size: var(--fs0-5);
  font-weight: var(--fw2);
  line-height: var(--lh4);
  letter-spacing: var(--ls1);
}
h1, [class*="fs1"] {
	font-size: var(--fs1);
  font-weight: var(--fw2);
  line-height: var(--lh4);
  letter-spacing: var(--ls1);
}
h2, [class*="fs2"] {
	font-size: var(--fs2);
  font-weight: var(--fw3);
  line-height: var(--lh4);
  letter-spacing: var(--ls1);
}
h3, [class*="fs3"] {
	font-size: var(--fs3);
  font-weight: var(--fw3);
  line-height: var(--lh3);
  letter-spacing: var(--ls1);
}
h4, [class*="fs4"] {
	font-size: var(--fs4);
  font-weight: var(--fw3);
  line-height: var(--lh3);
  letter-spacing: var(--ls1);
}
h5, [class*="fs5"] {
	font-size: var(--fs5);
  font-weight: var(--fw3);
  line-height: var(--lh3);
	letter-spacing: var(--ls0);
}
h6, [class*="fs6"] {
	font-size: var(--fs6);
  font-weight: var(--fw3);
  line-height: var(--lh3);
	letter-spacing: var(--ls0);
}
[class*="fs6-5"] {
  font-size: var(--fs6-5);
  font-weight: var(--fw1);
  line-height: var(--lh1);
	letter-spacing: var(--ls0);
}
body, [class*="fs7"] {
  font-size: var(--fs7);
  font-weight: var(--fw1);
  line-height: var(--lh1);
	letter-spacing: var(--ls0);
}
[class*="fs7-5"] {
  font-size: var(--fs7-5);
  font-weight: var(--fw1);
  line-height: var(--lh1);
	letter-spacing: var(--ls0);
}

/* weights */
[class*="fw1"] {
  font-weight: var(--fw1);
}
[class*="fw2"] {
  font-weight: var(--fw2);
}
[class*="fw3"] {
  font-weight: var(--fw3);
}

/* line heights */
[class*="lh1"] {
  line-height: var(--lh1);
}
[class*="lh2"] {
  line-height: var(--lh2);
}
[class*="lh3"] {
  line-height: var(--lh3);
}
[class*="lh4"] {
  line-height: var(--lh4);
}

/* letter spacing */
[class*="ls0"] {
  letter-spacing: var(--ls0);
}
[class*="ls1"] {
  letter-spacing: var(--ls1);
}

/* line clamp */
[class*="lc1"], [class*="lc2"], [class*="lc3"], [class*="lc4"] {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
[class*="lc2"] { -webkit-line-clamp: 2; }
[class*="lc3"] { -webkit-line-clamp: 3; }
[class*="lc4"] { -webkit-line-clamp: 4; }

</style>

Color

<style>
/* COLOR STYLES */

/* default styles */
* {
  border-color: hsla(var(--c2), 0.2);
  -webkit-text-stroke-color: hsla(var(--c2), 1);
	outline-color: hsla(var(--c2), 1);
}
a { 
	color: inherit;
}
p { 
	color: hsla(var(--c2), 0.7);
}
*::selection {
  background: hsla(var(--c2), 1);
  color: hsla(var(--c1), 1);
}
input::placeholder,
textarea::placeholder {
	color: hsla(var(--c2), 0.4) !important;
}
.w-checkbox-input.w--redirected-checked {
	background-color: hsla(var(--c4), 1);
	border-color: hsla(var(--c4), 1);
}
.w-radio-input.w--redirected-checked {
	background-color: hsla(var(--c4), 1);
	border-color: hsla(var(--c4), 1);
}

/* root swatches */
html {
  --c1g: 72, 9%, 94%;
  --c2g: 60, 3%, 13%;
  --c3g: 0, 0%, 100%;
  --c4g: 85, 100%, 77%;
  --c5g: 60, 3%, 20%;
  --c6g: 240, 64%, 80%;
  --c7g: 312, 60%, 80%;
  --c4: var(--c4g);
}

/* set mode variables */
body,
[class*="md1"] {
  --c1: var(--c1g);
  --c2: var(--c2g);
  --c3: var(--c3g);
}
[class*="md2"] {
  --c1: var(--c2g);
  --c2: var(--c3g);
  --c3: var(--c5g);
}
/* apply mode colors */
body, 
[class*="md1"], 
[class*="md2"] {
  background-color: hsla(var(--c1), 1);
  color: hsla(var(--c2), 1);
}
/* accents */
[class*="ac1"] { --c4: var(--c4g); }
[class*="ac2"] { --c4: var(--c6g); }
[class*="ac3"] { --c4: var(--c7g); }

/* background color */
/* local */
[class*="bc0"] { background-color: transparent !important; }
[class*="bc1"] { background-color: hsla(var(--c1), 1); }
[class*="bc2"] { background-color: hsla(var(--c2), 1); }
[class*="bc3"] { background-color: hsla(var(--c3), 1); }
[class*="bc4"] { background-color: hsla(var(--c4), 1); }
/* global */
[class*="bc1g"] { background-color: hsla(var(--c1g), 1); }
[class*="bc2g"] { background-color: hsla(var(--c2g), 1); }
[class*="bc3g"] { background-color: hsla(var(--c3g), 1); }
[class*="bc4g"] { background-color: hsla(var(--c4g), 1); }
[class*="bc5g"] { background-color: hsla(var(--c5g), 1); }
[class*="bc6g"] { background-color: hsla(var(--c6g), 1); }
[class*="bc7g"] { background-color: hsla(var(--c7g), 1); }

/* font color */
/* local */
[class*="fc0"] { color: transparent !important; }
[class*="fc1"] { color: hsla(var(--c1), 1); }
[class*="fc2"] { color: hsla(var(--c2), 1); }
[class*="fc3"] { color: hsla(var(--c3), 1); }
[class*="fc4"] { color: hsla(var(--c4), 1); }
/* global */
[class*="fc1g"] { color: hsla(var(--c1g), 1); }
[class*="fc2g"] { color: hsla(var(--c2g), 1); }
[class*="fc3g"] { color: hsla(var(--c3g), 1); }
[class*="fc4g"] { color: hsla(var(--c4g), 1); }
[class*="fc5g"] { color: hsla(var(--c5g), 1); }
[class*="fc6g"] { color: hsla(var(--c6g), 1); }
[class*="fc7g"] { color: hsla(var(--c7g), 1); }

/* outline, stroke, border color */
/* local */
[class*="oc0"] {
	border-color: transparent !important;
  -webkit-text-stroke-color: transparent !important;
  outline-color: transparent !important;
}
[class*="oc1"] { 
	border-color: hsla(var(--c1), 1);
  -webkit-text-stroke-color: hsla(var(--c1), 1);
  outline-color: hsla(var(--c1), 1);
}
[class*="oc2"] { 
	border-color: hsla(var(--c2), 1);
  -webkit-text-stroke-color: hsla(var(--c2), 1);
  outline-color: hsla(var(--c2), 1);
}
[class*="oc3"] { 
	border-color: hsla(var(--c3), 1);
  -webkit-text-stroke-color: hsla(var(--c3), 1);
  outline-color: hsla(var(--c3), 1);
}
[class*="oc4"] { 
	border-color: hsla(var(--c4), 1);
  -webkit-text-stroke-color: hsla(var(--c4), 1);
  outline-color: hsla(var(--c4), 1);
}
/* global */
[class*="oc1g"] { 
	border-color: hsla(var(--c1g), 1);
  -webkit-text-stroke-color: hsla(var(--c1g), 1);
  outline-color: hsla(var(--c1g), 1);
}
[class*="oc2g"] { 
	border-color: hsla(var(--c2g), 1);
  -webkit-text-stroke-color: hsla(var(--c2g), 1);
  outline-color: hsla(var(--c2g), 1);
}
[class*="oc3g"] { 
	border-color: hsla(var(--c3g), 1);
  -webkit-text-stroke-color: hsla(var(--c3g), 1);
  outline-color: hsla(var(--c3g), 1);
}
[class*="oc4g"] { 
	border-color: hsla(var(--c4g), 1);
  -webkit-text-stroke-color: hsla(var(--c4g), 1);
  outline-color: hsla(var(--c4g), 1);
}
[class*="oc5g"] { 
	border-color: hsla(var(--c5g), 1);
  -webkit-text-stroke-color: hsla(var(--c5g), 1);
  outline-color: hsla(var(--c5g), 1);
}
[class*="oc6g"] {
	border-color: hsla(var(--c6g), 1);
	-webkit-text-stroke-color: hsla(var(--c6g), 1);
  outline-color: hsla(var(--c6g), 1);
}
[class*="oc7g"] {
	border-color: hsla(var(--c7g), 1);
  -webkit-text-stroke-color: hsla(var(--c7g), 1);
  outline-color: hsla(var(--c7g), 1);
}

</style>

Layout

<style>
/* LAYOUT STYLES */

/* grid 12 */
[class*="gd12"] {
	--column-span: 12;
  --row-span: 1;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
	grid-column-gap: var(--size1);
  grid-row-gap: var(--size1);
}
[class*="gd12"] > * {
	grid-column-start: span var(--column-span) !important;
  grid-column-end: span var(--column-span) !important;
  grid-row-start: span var(--row-span) !important;
  grid-row-end: span var(--row-span) !important;
}
/* portrait column */
[class*="cp1"] { --column-span: 1; }
[class*="cp2"] { --column-span: 2; }
[class*="cp3"] { --column-span: 3; }
[class*="cp4"] { --column-span: 4; }
[class*="cp5"] { --column-span: 5; }
[class*="cp6"] { --column-span: 6; }
[class*="cp7"] { --column-span: 7; }
[class*="cp8"] { --column-span: 8; }
[class*="cp9"] { --column-span: 9; }
[class*="cp10"] { --column-span: 10; }
[class*="cp11"] { --column-span: 11; }
[class*="cp12"] { --column-span: 12; }
/* portrait row */
[class*="rp1"] { --row-span: 1; }
[class*="rp2"] { --row-span: 2; }
[class*="rp3"] { --row-span: 3; }
[class*="rp4"] { --row-span: 4; }
[class*="rp5"] { --row-span: 5; }
[class*="rp6"] { --row-span: 6; }
/* mobile landscape */
@media screen and (min-width: 480px) {
	/* landscape column */
  [class*="cl1"] { --column-span: 1; }
  [class*="cl2"] { --column-span: 2; }
  [class*="cl3"] { --column-span: 3; }
  [class*="cl4"] { --column-span: 4; }
  [class*="cl5"] { --column-span: 5; }
  [class*="cl6"] { --column-span: 6; }
  [class*="cl7"] { --column-span: 7; }
  [class*="cl8"] { --column-span: 8; }
  [class*="cl9"] { --column-span: 9; }
  [class*="cl10"] { --column-span: 10; }
  [class*="cl11"] { --column-span: 11; }
  [class*="cl12"] { --column-span: 12; }
  /* landscape row */
  [class*="rl1"] { --row-span: 1; }
  [class*="rl2"] { --row-span: 2; }
  [class*="rl3"] { --row-span: 3; }
  [class*="rl4"] { --row-span: 4; }
  [class*="rl5"] { --row-span: 5; }
  [class*="rl6"] { --row-span: 6; }
}
/* tablet */
@media screen and (min-width: 768px) {
	/* tablet column */
  [class*="ct1"] { --column-span: 1; }
  [class*="ct2"] { --column-span: 2; }
  [class*="ct3"] { --column-span: 3; }
  [class*="ct4"] { --column-span: 4; }
  [class*="ct5"] { --column-span: 5; }
  [class*="ct6"] { --column-span: 6; }
  [class*="ct7"] { --column-span: 7; }
  [class*="ct8"] { --column-span: 8; }
  [class*="ct9"] { --column-span: 9; }
  [class*="ct10"] { --column-span: 10; }
  [class*="ct11"] { --column-span: 11; }
  [class*="ct12"] { --column-span: 12; }
  /* tablet row */
  [class*="rt1"] { --row-span: 1; }
  [class*="rt2"] { --row-span: 2; }
  [class*="rt3"] { --row-span: 3; }
  [class*="rt4"] { --row-span: 4; }
  [class*="rt5"] { --row-span: 5; }
  [class*="rt6"] { --row-span: 6; }
}
/* desktop */
@media screen and (min-width: 992px) {
  /* desktop column */
  [class*="cd1"] { --column-span: 1; }
  [class*="cd2"] { --column-span: 2; }
  [class*="cd3"] { --column-span: 3; }
  [class*="cd4"] { --column-span: 4; }
  [class*="cd5"] { --column-span: 5; }
  [class*="cd6"] { --column-span: 6; }
  [class*="cd7"] { --column-span: 7; }
  [class*="cd8"] { --column-span: 8; }
  [class*="cd9"] { --column-span: 9; }
  [class*="cd10"] { --column-span: 10; }
  [class*="cd11"] { --column-span: 11; }
  [class*="cd12"] { --column-span: 12; }
  /* desktop row */
  [class*="rd1"] { --row-span: 1; }
  [class*="rd2"] { --row-span: 2; }
  [class*="rd3"] { --row-span: 3; }
  [class*="rd4"] { --row-span: 4; }
  [class*="rd5"] { --row-span: 5; }
  [class*="rd6"] { --row-span: 6; }
}
</style>

Spacing 1

<style>
/* SPACING STYLES PART 1 */

/* spacing sizes */
html {
	--multiplier: 1;
  --size0: 0rem;
  --size0-5: calc(0.5rem * var(--multiplier));
  --size1: calc(1rem * var(--multiplier));
  --size1-5: calc(1.5rem * var(--multiplier));
  --size2: calc(2rem * var(--multiplier));
  --size2-5: calc(2.5rem * var(--multiplier));
  --size3: calc(3rem * var(--multiplier));
  --size3-5: calc(3.5rem * var(--multiplier));
  --size4: calc(4rem * var(--multiplier));
  --size5: calc(5rem * var(--multiplier));
  --size6: calc(6rem * var(--multiplier));
  --size7: calc(7rem * var(--multiplier));
  --size8: calc(8rem * var(--multiplier));
  --size9: calc(9rem * var(--multiplier));
  --size10: calc(10rem * var(--multiplier));
  --size11: calc(11rem * var(--multiplier));
  --size12: calc(12rem * var(--multiplier));
  --size13: calc(13rem * var(--multiplier));
  --size14: calc(14rem * var(--multiplier));
  --size15: calc(15rem * var(--multiplier));
  --size16: calc(16rem * var(--multiplier));
  --size17: calc(17rem * var(--multiplier));
  --size18: calc(18rem * var(--multiplier));
  --size19: calc(19rem * var(--multiplier));
  --size20: calc(20rem * var(--multiplier));
}
/* tablet spacing */
@media screen and (max-width: 991px) {
  html {
  	--multiplier: 0.875;
  }
}
/* landscape spacing */
@media screen and (max-width: 767px) {
  html {
    --multiplier: 0.75;
  }
}

/* gap spacing */
[class*="gp0"] { grid-column-gap: var(--size0); grid-row-gap: var(--size0); }
[class*="gp0-5"] { grid-column-gap: var(--size0-5); grid-row-gap: var(--size0-5); }
[class*="gp1"] { grid-column-gap: var(--size1); grid-row-gap: var(--size1); }
[class*="gp1-5"] { grid-column-gap: var(--size1-5); grid-row-gap: var(--size1-5); }
[class*="gp2"] { grid-column-gap: var(--size2); grid-row-gap: var(--size2); }
[class*="gp2-5"] { grid-column-gap: var(--size2-5); grid-row-gap: var(--size2-5); }
[class*="gp3"] { grid-column-gap: var(--size3); grid-row-gap: var(--size3); }
[class*="gp3-5"] { grid-column-gap: var(--size3-5); grid-row-gap: var(--size3-5); }
[class*="gp4"] { grid-column-gap: var(--size4); grid-row-gap: var(--size4); }
[class*="gp5"] { grid-column-gap: var(--size5); grid-row-gap: var(--size5); }
[class*="gp6"] { grid-column-gap: var(--size6); grid-row-gap: var(--size6); }
[class*="gp7"] { grid-column-gap: var(--size7); grid-row-gap: var(--size7); }
[class*="gp8"] { grid-column-gap: var(--size8); grid-row-gap: var(--size8); }
[class*="gp9"] { grid-column-gap: var(--size9); grid-row-gap: var(--size9); }
[class*="gp10"] { grid-column-gap: var(--size10); grid-row-gap: var(--size10); }
[class*="gp11"] { grid-column-gap: var(--size11); grid-row-gap: var(--size11); }
[class*="gp12"] { grid-column-gap: var(--size12); grid-row-gap: var(--size12); }
[class*="gp13"] { grid-column-gap: var(--size13); grid-row-gap: var(--size13); }
[class*="gp14"] { grid-column-gap: var(--size14); grid-row-gap: var(--size14); }
[class*="gp15"] { grid-column-gap: var(--size15); grid-row-gap: var(--size15); }
[class*="gp16"] { grid-column-gap: var(--size16); grid-row-gap: var(--size16); }
[class*="gp17"] { grid-column-gap: var(--size17); grid-row-gap: var(--size17); }
[class*="gp18"] { grid-column-gap: var(--size18); grid-row-gap: var(--size18); }
[class*="gp19"] { grid-column-gap: var(--size19); grid-row-gap: var(--size19); }
[class*="gp20"] { grid-column-gap: var(--size20); grid-row-gap: var(--size20); }

/* column gap spacing */
[class*="gh0"] { grid-column-gap: var(--size0); }
[class*="gh0-5"] { grid-column-gap: var(--size0-5); }
[class*="gh1"] { grid-column-gap: var(--size1); }
[class*="gh1-5"] { grid-column-gap: var(--size1-5); }
[class*="gh2"] { grid-column-gap: var(--size2); }
[class*="gh2-5"] { grid-column-gap: var(--size2-5); }
[class*="gh3"] { grid-column-gap: var(--size3); }
[class*="gh3-5"] { grid-column-gap: var(--size3-5); }
[class*="gh4"] { grid-column-gap: var(--size4); }
[class*="gh5"] { grid-column-gap: var(--size5); }
[class*="gh6"] { grid-column-gap: var(--size6); }
[class*="gh7"] { grid-column-gap: var(--size7); }
[class*="gh8"] { grid-column-gap: var(--size8); }
[class*="gh9"] { grid-column-gap: var(--size9); }
[class*="gh10"] { grid-column-gap: var(--size10); }
[class*="gh11"] { grid-column-gap: var(--size11); }
[class*="gh12"] { grid-column-gap: var(--size12); }
[class*="gh13"] { grid-column-gap: var(--size13); }
[class*="gh14"] { grid-column-gap: var(--size14); }
[class*="gh15"] { grid-column-gap: var(--size15); }
[class*="gh16"] { grid-column-gap: var(--size16); }
[class*="gh17"] { grid-column-gap: var(--size17); }
[class*="gh18"] { grid-column-gap: var(--size18); }
[class*="gh19"] { grid-column-gap: var(--size19); }
[class*="gh20"] { grid-column-gap: var(--size20); }

/* row gap spacing */
[class*="gv0"] { grid-row-gap: var(--size0); }
[class*="gv0-5"] { grid-row-gap: var(--size0-5); }
[class*="gv1"] { grid-row-gap: var(--size1); }
[class*="gv1-5"] { grid-row-gap: var(--size1-5); }
[class*="gv2"] { grid-row-gap: var(--size2); }
[class*="gv2-5"] { grid-row-gap: var(--size2-5); }
[class*="gv3"] { grid-row-gap: var(--size3); }
[class*="gv3-5"] { grid-row-gap: var(--size3-5); }
[class*="gv4"] { grid-row-gap: var(--size4); }
[class*="gv5"] { grid-row-gap: var(--size5); }
[class*="gv6"] { grid-row-gap: var(--size6); }
[class*="gv7"] { grid-row-gap: var(--size7); }
[class*="gv8"] { grid-row-gap: var(--size8); }
[class*="gv9"] { grid-row-gap: var(--size9); }
[class*="gv10"] { grid-row-gap: var(--size10); }
[class*="gv11"] { grid-row-gap: var(--size11); }
[class*="gv12"] { grid-row-gap: var(--size12); }
[class*="gv13"] { grid-row-gap: var(--size13); }
[class*="gv14"] { grid-row-gap: var(--size14); }
[class*="gv15"] { grid-row-gap: var(--size15); }
[class*="gv16"] { grid-row-gap: var(--size16); }
[class*="gv17"] { grid-row-gap: var(--size17); }
[class*="gv18"] { grid-row-gap: var(--size18); }
[class*="gv19"] { grid-row-gap: var(--size19); }
[class*="gv20"] { grid-row-gap: var(--size20); }

/* padding */
[class*="pd0"] { padding: var(--size0); }
[class*="pd0-5"] { padding: var(--size0-5); }
[class*="pd1"] { padding: var(--size1); }
[class*="pd1-5"] { padding: var(--size1-5); }
[class*="pd2"] { padding: var(--size2); }
[class*="pd2-5"] { padding: var(--size2-5); }
[class*="pd3"] { padding: var(--size3); }
[class*="pd3-5"] { padding: var(--size3-5); }
[class*="pd4"] { padding: var(--size4); }
[class*="pd5"] { padding: var(--size5); }
[class*="pd6"] { padding: var(--size6); }
[class*="pd7"] { padding: var(--size7); }
[class*="pd8"] { padding: var(--size8); }
[class*="pd9"] { padding: var(--size9); }
[class*="pd10"] { padding: var(--size10); }
[class*="pd11"] { padding: var(--size11); }
[class*="pd12"] { padding: var(--size12); }
[class*="pd13"] { padding: var(--size13); }
[class*="pd14"] { padding: var(--size14); }
[class*="pd15"] { padding: var(--size15); }
[class*="pd16"] { padding: var(--size16); }
[class*="pd17"] { padding: var(--size17); }
[class*="pd18"] { padding: var(--size18); }
[class*="pd19"] { padding: var(--size19); }
[class*="pd20"] { padding: var(--size20); }
</style>

Padding Specific Sides

<style>
/* SPACING STYLES PART 2 */

/* padding horizontal */
[class*="ph0"] { padding-left: var(--size0); padding-right: var(--size0); }
[class*="ph0-5"] { padding-left: var(--size0-5); padding-right: var(--size0-5); }
[class*="ph1"] { padding-left: var(--size1); padding-right: var(--size1); }
[class*="ph1-5"] { padding-left: var(--size1-5); padding-right: var(--size1-5); }
[class*="ph2"] { padding-left: var(--size2); padding-right: var(--size2); }
[class*="ph2-5"] { padding-left: var(--size2-5); padding-right: var(--size2-5); }
[class*="ph3"] { padding-left: var(--size3); padding-right: var(--size3); }
[class*="ph3-5"] { padding-left: var(--size3-5); padding-right: var(--size3-5); }
[class*="ph4"] { padding-left: var(--size4); padding-right: var(--size4); }
[class*="ph5"] { padding-left: var(--size5); padding-right: var(--size5); }
[class*="ph6"] { padding-left: var(--size6); padding-right: var(--size6); }
[class*="ph7"] { padding-left: var(--size7); padding-right: var(--size7); }
[class*="ph8"] { padding-left: var(--size8); padding-right: var(--size8); }
[class*="ph9"] { padding-left: var(--size9); padding-right: var(--size9); }
[class*="ph10"] { padding-left: var(--size10); padding-right: var(--size10); }
[class*="ph11"] { padding-left: var(--size11); padding-right: var(--size11); }
[class*="ph12"] { padding-left: var(--size12); padding-right: var(--size12); }
[class*="ph13"] { padding-left: var(--size13); padding-right: var(--size13); }
[class*="ph14"] { padding-left: var(--size14); padding-right: var(--size14); }
[class*="ph15"] { padding-left: var(--size15); padding-right: var(--size15); }
[class*="ph16"] { padding-left: var(--size16); padding-right: var(--size16); }
[class*="ph17"] { padding-left: var(--size17); padding-right: var(--size17); }
[class*="ph18"] { padding-left: var(--size18); padding-right: var(--size18); }
[class*="ph19"] { padding-left: var(--size19); padding-right: var(--size19); }
[class*="ph20"] { padding-left: var(--size20); padding-right: var(--size20); }

/* padding vertical */
[class*="pv0"] { padding-top: var(--size0); padding-bottom: var(--size0); }
[class*="pv0-5"] { padding-top: var(--size0-5); padding-bottom: var(--size0-5); }
[class*="pv1"] { padding-top: var(--size1); padding-bottom: var(--size1); }
[class*="pv1-5"] { padding-top: var(--size1-5); padding-bottom: var(--size1-5); }
[class*="pv2"] { padding-top: var(--size2); padding-bottom: var(--size2); }
[class*="pv2-5"] { padding-top: var(--size2-5); padding-bottom: var(--size2-5); }
[class*="pv3"] { padding-top: var(--size3); padding-bottom: var(--size3); }
[class*="pv3-5"] { padding-top: var(--size3-5); padding-bottom: var(--size3-5); }
[class*="pv4"] { padding-top: var(--size4); padding-bottom: var(--size4); }
[class*="pv5"] { padding-top: var(--size5); padding-bottom: var(--size5); }
[class*="pv6"] { padding-top: var(--size6); padding-bottom: var(--size6); }
[class*="pv7"] { padding-top: var(--size7); padding-bottom: var(--size7); }
[class*="pv8"] { padding-top: var(--size8); padding-bottom: var(--size8); }
[class*="pv9"] { padding-top: var(--size9); padding-bottom: var(--size9); }
[class*="pv10"] { padding-top: var(--size10); padding-bottom: var(--size10); }
[class*="pv11"] { padding-top: var(--size11); padding-bottom: var(--size11); }
[class*="pv12"] { padding-top: var(--size12); padding-bottom: var(--size12); }
[class*="pv13"] { padding-top: var(--size13); padding-bottom: var(--size13); }
[class*="pv14"] { padding-top: var(--size14); padding-bottom: var(--size14); }
[class*="pv15"] { padding-top: var(--size15); padding-bottom: var(--size15); }
[class*="pv16"] { padding-top: var(--size16); padding-bottom: var(--size16); }
[class*="pv17"] { padding-top: var(--size17); padding-bottom: var(--size17); }
[class*="pv18"] { padding-top: var(--size18); padding-bottom: var(--size18); }
[class*="pv19"] { padding-top: var(--size19); padding-bottom: var(--size19); }
[class*="pv20"] { padding-top: var(--size20); padding-bottom: var(--size20); }

/* padding top */
[class*="pt0"] { padding-top: var(--size0); }
[class*="pt0-5"] { padding-top: var(--size0-5); }
[class*="pt1"] { padding-top: var(--size1); }
[class*="pt1-5"] { padding-top: var(--size1-5); }
[class*="pt2"] { padding-top: var(--size2); }
[class*="pt2-5"] { padding-top: var(--size2-5); }
[class*="pt3"] { padding-top: var(--size3); }
[class*="pt3-5"] { padding-top: var(--size3-5); }
[class*="pt4"] { padding-top: var(--size4); }
[class*="pt5"] { padding-top: var(--size5); }
[class*="pt6"] { padding-top: var(--size6); }
[class*="pt7"] { padding-top: var(--size7); }
[class*="pt8"] { padding-top: var(--size8); }
[class*="pt9"] { padding-top: var(--size9); }
[class*="pt10"] { padding-top: var(--size10); }
[class*="pt11"] { padding-top: var(--size11); }
[class*="pt12"] { padding-top: var(--size12); }
[class*="pt13"] { padding-top: var(--size13); }
[class*="pt14"] { padding-top: var(--size14); }
[class*="pt15"] { padding-top: var(--size15); }
[class*="pt16"] { padding-top: var(--size16); }
[class*="pt17"] { padding-top: var(--size17); }
[class*="pt18"] { padding-top: var(--size18); }
[class*="pt19"] { padding-top: var(--size19); }
[class*="pt20"] { padding-top: var(--size20); }

/* padding bottom */
[class*="pb0"] { padding-bottom: var(--size0); }
[class*="pb0-5"] { padding-bottom: var(--size0-5); }
[class*="pb1"] { padding-bottom: var(--size1); }
[class*="pb1-5"] { padding-bottom: var(--size1-5); }
[class*="pb2"] { padding-bottom: var(--size2); }
[class*="pb2-5"] { padding-bottom: var(--size2-5); }
[class*="pb3"] { padding-bottom: var(--size3); }
[class*="pb3-5"] { padding-bottom: var(--size3-5); }
[class*="pb4"] { padding-bottom: var(--size4); }
[class*="pb5"] { padding-bottom: var(--size5); }
[class*="pb6"] { padding-bottom: var(--size6); }
[class*="pb7"] { padding-bottom: var(--size7); }
[class*="pb8"] { padding-bottom: var(--size8); }
[class*="pb9"] { padding-bottom: var(--size9); }
[class*="pb10"] { padding-bottom: var(--size10); }
[class*="pb11"] { padding-bottom: var(--size11); }
[class*="pb12"] { padding-bottom: var(--size12); }
[class*="pb13"] { padding-bottom: var(--size13); }
[class*="pb14"] { padding-bottom: var(--size14); }
[class*="pb15"] { padding-bottom: var(--size15); }
[class*="pb16"] { padding-bottom: var(--size16); }
[class*="pb17"] { padding-bottom: var(--size17); }
[class*="pb18"] { padding-bottom: var(--size18); }
[class*="pb19"] { padding-bottom: var(--size19); }
[class*="pb20"] { padding-bottom: var(--size20); }

/* padding left */
[class*="pl0"] { padding-left: var(--size0); }
[class*="pl0-5"] { padding-left: var(--size0-5); }
[class*="pl1"] { padding-left: var(--size1); }
[class*="pl1-5"] { padding-left: var(--size1-5); }
[class*="pl2"] { padding-left: var(--size2); }
[class*="pl2-5"] { padding-left: var(--size2-5); }
[class*="pl3"] { padding-left: var(--size3); }
[class*="pl3-5"] { padding-left: var(--size3-5); }
[class*="pl4"] { padding-left: var(--size4); }
[class*="pl5"] { padding-left: var(--size5); }
[class*="pl6"] { padding-left: var(--size6); }
[class*="pl7"] { padding-left: var(--size7); }
[class*="pl8"] { padding-left: var(--size8); }
[class*="pl9"] { padding-left: var(--size9); }
[class*="pl10"] { padding-left: var(--size10); }
[class*="pl11"] { padding-left: var(--size11); }
[class*="pl12"] { padding-left: var(--size12); }
[class*="pl13"] { padding-left: var(--size13); }
[class*="pl14"] { padding-left: var(--size14); }
[class*="pl15"] { padding-left: var(--size15); }
[class*="pl16"] { padding-left: var(--size16); }
[class*="pl17"] { padding-left: var(--size17); }
[class*="pl18"] { padding-left: var(--size18); }
[class*="pl19"] { padding-left: var(--size19); }
[class*="pl20"] { padding-left: var(--size20); }

/* padding right */
[class*="pr0"] { padding-right: var(--size0); }
[class*="pr0-5"] { padding-right: var(--size0-5); }
[class*="pr1"] { padding-right: var(--size1); }
[class*="pr1-5"] { padding-right: var(--size1-5); }
[class*="pr2"] { padding-right: var(--size2); }
[class*="pr2-5"] { padding-right: var(--size2-5); }
[class*="pr3"] { padding-right: var(--size3); }
[class*="pr3-5"] { padding-right: var(--size3-5); }
[class*="pr4"] { padding-right: var(--size4); }
[class*="pr5"] { padding-right: var(--size5); }
[class*="pr6"] { padding-right: var(--size6); }
[class*="pr7"] { padding-right: var(--size7); }
[class*="pr8"] { padding-right: var(--size8); }
[class*="pr9"] { padding-right: var(--size9); }
[class*="pr10"] { padding-right: var(--size10); }
[class*="pr11"] { padding-right: var(--size11); }
[class*="pr12"] { padding-right: var(--size12); }
[class*="pr13"] { padding-right: var(--size13); }
[class*="pr14"] { padding-right: var(--size14); }
[class*="pr15"] { padding-right: var(--size15); }
[class*="pr16"] { padding-right: var(--size16); }
[class*="pr17"] { padding-right: var(--size17); }
[class*="pr18"] { padding-right: var(--size18); }
[class*="pr19"] { padding-right: var(--size19); }
[class*="pr20"] { padding-right: var(--size20); }
</style>

<style>
/* OTHER UTILITY STYLES */

/* pointer events */
[class*="pe1"],
[class*="pe2"] > * {
	pointer-events: auto;
}
[class*="pe0"],
[class*="pe2"] {
	pointer-events: none;
}

/* outline width sizes */
html {
	--ow1: 2px;
  --ow2: 4px;
  --ow3: 8px;
}
/* outline width */
[class*="ow0"] {
  outline-style: none !important;
}
[class*="ow1"] {
  outline-style: solid;
  outline-width: var(--ow1);
}
[class*="ow2"] {
  outline-style: solid;
  outline-width: var(--ow2);
}
[class*="ow3"] {
  outline-style: solid;
  outline-width: var(--ow3);
}
/* stroke width */
[class*="sw0"] {
  -webkit-text-stroke-width: 0px !important;
}
[class*="sw1"] {
  -webkit-text-stroke-width: var(--ow1);
}
[class*="sw2"] {
  -webkit-text-stroke-width: var(--ow2);
}
[class*="sw3"] {
  -webkit-text-stroke-width: var(--ow3);
}
/* border width */
[class*="bw0"] { 
	border-width: 0rem !important;
}
[class*="bw1"] { 
	border-style: solid;
  border-width: var(--ow1);
}
[class*="bw2"] { 
	border-style: solid;
  border-width: var(--ow2);
}
[class*="bw3"] { 
	border-style: solid;
  border-width: var(--ow3);
}
/* border position */
[class*="bw1t"], [class*="bw2t"], [class*="bw3t"] {
	border-bottom-width: 0;
	border-left-width: 0;
	border-right-width: 0;
}
[class*="bw1b"], [class*="bw2b"], [class*="bw3b"] {
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: 0;
}
[class*="bw1l"], [class*="bw2l"], [class*="bw3l"] {
	border-top-width: 0;
	border-bottom-width: 0;
	border-right-width: 0;
}
[class*="bw1r"], [class*="bw2r"], [class*="bw3r"] {
	border-top-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
}
[class*="bw1v"], [class*="bw2v"], [class*="bw3v"] {
	border-left-width: 0;
	border-right-width: 0;
}
[class*="bw1h"], [class*="bw2h"], [class*="bw3h"] {
	border-top-width: 0;
	border-bottom-width: 0;
}

/* border radius */
[class*="br0"] { border-radius: 0rem !important; }
[class*="br1"] { border-radius: 0.8rem; }
[class*="br2"] { border-radius: 0.4rem; }
[class*="br3"] { border-radius: 100vw; }

</style>

Page Style Components

<style>
/* CUSTOM COMPONENT STYLES */

html {
	--speed1: 200ms;
}

/* unique elements */
[button1-fontcolor] {
  color: hsla(var(--c2g), 1);
	transition-property: color;
  transition-duration: var(--speed1);
}
[button1-bgcolor] {
  background-color: hsla(var(--c4), 1);
  border-color: hsla(var(--c4), 1);
	transition-property: background-color, border-color, transform, color;
  transition-duration: var(--speed1);
}
[button1-outlined="true"] [button1-fontcolor] {
  color: hsla(var(--c2), 1);
}
[button1-outlined="true"] [button1-bgcolor] {
  background-color: transparent;
  border-color: inherit;
}
[button1-small="true"] [button1-padding] {
	padding: 0.6rem 1rem;
}
[button1-icon] {
	transition-property: transform;
  transition-duration: var(--speed1);
}

/* hover states */
@media (pointer: fine) {
  [button1-link]:hover [button1-fontcolor] {
    color: hsla(var(--c1), 1);
  }
  [button1-link]:hover [button1-bgcolor] {
    background-color: hsla(var(--c2), 1);
    border-color: hsla(var(--c2), 1);
  }
  [button1-link]:hover [button1-icon] {
		transform: translateX(0.2rem);
	}
  [button1-link]:hover [button1-scale] {
		transform: scale(1.1);
	}
}

/* custom form styles */
[form1-field] {
	transition-property: border-color;
  transition-duration: var(--speed1);
  border-color: inherit;
}
[form1-field]:focus {
	border-color: hsla(var(--c2), 1);
}
</style>