MASTER DOT CSS

master.css is my personal solution to writing the same CSS file over and over again. It includes classes for basically everything under the sun, split into four size clsses. These classes include things that you could reasonably do in inline style tags, but that's bad form. Don't do it.

Get it here: gist.github.com

I'm not going to explain every single class in the file as it's more or less self-explanatory, but o10-o90 are for opacity, p0125, p025, p05, p1 and so on are for padding, m is for margin, you get the point. Read the file if you wanna know which exact properties it supports, and feel free to extend it!

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
menu,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}

*[hidden] {
  display: none;
}

body {
  line-height: 1;
}

menu,
ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --default-font-size: 16px;
  --default-font-family: "iA Writer Quattro";
  --default-background-color: var(--white, white);
  --default-color: var(--black, black);
  --default-border-width: 1px;
  --default-border-color: currentColor;
  --default-bold-fw: bold;
  --font-size: var(--default-font-size);
  --font-family: var(--default-font-family);
  --background-color: var(--default-background-color);
  --color: var(--default-color);
  --border-width: var(--default-border-width);
  --border-color: var(--default-border-color);
  --bold-fw: var(--default-bold-fw);
  --serif-font-family: Georgia, "Times New Roman", serif;
  --sansserif-font-family: "iA Writer Quattro", system-ui, -apple-system,
    Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  --code-font-family: Courier, monospace;
  --h1: 2.5rem;
  --h2: 2rem;
  --h3: 1.5rem;
  --h4: 1.25rem;
  --h5: 1.125rem;
  --h6: 1.0625rem;
  --d1: 3rem;
  --d2: 3.5rem;
  --d3: 4rem;
  --d4: 5rem;
  --d5: 6rem;
  --f0: 1rem;
  --f1: 0.9375rem;
  --f2: 0.875rem;
  --f3: 0.8125rem;
  --f4: 0.75rem;
  --lh0: 1;
  --lh1: 1.125;
  --lh2: 1.25;
  --lh3: 1.375;
  --lh4: 1.5;
  --lh5: 2;
  --br1: 0.125rem;
  --br2: 0.25rem;
  --br3: 0.5rem;
  --br4: 0.75rem;
  --br5: 1rem;
  --black: #040404;
  --white: #fff;
  --black-95: rgba(4, 4, 4, 0.95);
  --black-90: rgba(4, 4, 4, 0.9);
  --black-80: rgba(4, 4, 4, 0.8);
  --black-70: rgba(4, 4, 4, 0.7);
  --black-60: rgba(4, 4, 4, 0.6);
  --black-50: rgba(4, 4, 4, 0.5);
  --black-40: rgba(4, 4, 4, 0.4);
  --black-30: rgba(4, 4, 4, 0.3);
  --black-20: rgba(4, 4, 4, 0.2);
  --black-10: rgba(4, 4, 4, 0.1);
  --black-05: rgba(4, 4, 4, 0.05);
  --black-025: rgba(4, 4, 4, 0.025);
  --black-0125: rgba(4, 4, 4, 0.0125);
  --white-95: rgba(255, 255, 255, 0.95);
  --white-90: rgba(255, 255, 255, 0.9);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-05: rgba(255, 255, 255, 0.05);
  --white-025: rgba(255, 255, 255, 0.025);
  --white-0125: rgba(255, 255, 255, 0.0125);
  --aqua: #7fdbff;
  --blue: #0074d9;
  --navy: #001f3f;
  --teal: #39cccc;
  --green: #2ecc40;
  --olive: #3d9970;
  --lime: #01ff70;
  --yellow: #ffdc00;
  --orange: #ff851b;
  --red: #ff4136;
  --fuchsia: #f012be;
  --purple: #b10dc9;
  --maroon: #85144b;
}

html {
  font-size: var(--font-size);
  font-family: "iA Writer Quattro";
  color: var(--color);
  background-color: var(--background-color);
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  outline: 0;
}

hr {
  margin: 0;
  border: 0;
}

.copy > *:first-child {
  margin-top: 0;
}

.copy > *:last-child {
  margin-bottom: 0;
}

.copy > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p) {
  margin-top: var(--copy-space-primary);
  margin-bottom: var(--copy-space-primary);
}

.copy > h1,
.copy > h2,
.copy > h3,
.copy > h4,
.copy > h5,
.copy > h6 {
  margin-top: var(--copy-space-primary);
}

.copy > p {
  margin-top: var(--copy-space-secondary);
  margin-bottom: var(--copy-space-primary);
}

:root {
  --copy-space-secondary: 0.5em;
}

.div {
  color: var(--border-color);
}

.div::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  min-width: var(--border-width);
  min-height: var(--border-width);
  background-color: currentColor;
}

.body {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 40rem) {
  .body {
    max-width: 39rem;
  }
}

@media (min-width: 61rem) {
  .body {
    display: grid;
    grid-gap: ;
    grid-template-columns: 19rem auto;
    grid-template-rows: repeat(3, -webkit-min-content);
    grid-template-rows: repeat(3, min-content);
    max-width: 58rem;
  }

  .main {
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: span 3;
  }
}

@media (min-width: 80rem) {
  .body {
    max-width: 77rem;
  }
}

.copy {
  line-height: 1.5;
}

.copy > * {
  max-width: 36rem;
}

.copy h1 {
  font-size: var(--h2);
  line-height: var(--lh2);
}

.copy h2 {
  font-size: var(--h3);
  line-height: var(--lh2);
}

.copy h3 {
  font-size: var(--h4);
  line-height: var(--lh2);
}

.copy h4 {
  font-size: var(--h5);
  line-height: var(--lh2);
}

.copy h1,
.copy h2,
.copy h3,
.copy h4,
.copy h5,
.copy h6 {
  font-weight: 700;
}

.copy figcaption {
  font-style: italic;
  margin-top: 0.5em;
}

.copy a {
  color: var(--link-color);
  text-decoration: underline;
}

.copy img {
  display: block;
  height: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.copy strong {
  font-weight: bold;
}

.copy em {
  font-style: italic;
}

.copy ol,
.copy ul {
  padding-left: 2em;
}

.copy ol li::before,
.copy ul li::before {
  display: inline-block;
  width: 2em;
  padding-right: 0.5em;
  margin-left: -2em;
  text-align: right;
  opacity: 0.3;
}

.copy ol {
  counter-reset: ol;
}

.copy ol li::before {
  counter-increment: ol;
  content: counter(ol, upper-roman);
}

.copy ul li::before {
  content: "\2013";
}

.copy blockquote {
  padding-left: 2em;
  position: relative;
}

.copy blockquote::before {
  content: "";
  display: block;
  position: absolute;
  left: 1.25em;
  top: 0.25em;
  bottom: 0.25em;
  margin-left: -1px;
  width: 2px;
  background-color: currentColor;
  opacity: 0.1;
}

.copy pre,
.copy code {
  font-family: Courier, monospace;
  font-size: 14px;
  line-height: 20px;
}

.copy code {
  padding: 2px;
  background-color: var(--theme-text-color-05);
}

.copy pre {
  white-space: pre-wrap;
  background-color: var(--theme-text-color-05);
}

.copy pre code {
  display: block;
  padding: 16px 18px;
  background-color: transparent;
}

.copy p code {
  position: relative;
  top: -2px;
}

.copy dt {
  opacity: 0.6;
}

.copy dd + dt {
  margin-top: 0.5em;
}

@media (min-width: 80rem) {
  .copy--wide figure.image {
    max-width: none;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  .copy--wide figure.image img {
    width: 36rem;
  }

  .copy--wide figure.image figcaption {
    width: 19rem;
    margin: 0;
    padding-left: 2rem;
    position: sticky;
    top: 2rem;
  }
}

.video {
  position: relative;
  width: 100%;
}

.video::before {
  content: "";
  display: block;
  padding-top: calc(100% * 720 / 1280);
}

.video iframe {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.al {
  text-align: left;
}

.ar {
  text-align: right;
}

.ac {
  text-align: center;
}

.uc {
  text-transform: uppercase;
}

.lc {
  text-transform: lowercase;
}

.cc {
  text-transform: capitalize;
}

.nc {
  text-transform: none;
}

.h1 {
  font-size: var(--h1);
}

.h2 {
  font-size: var(--h2);
}

.h3 {
  font-size: var(--h3);
}

.h4 {
  font-size: var(--h4);
}

.h5 {
  font-size: var(--h5);
}

.h6 {
  font-size: var(--h6);
}

.d1 {
  font-size: var(--d1);
}

.d2 {
  font-size: var(--d2);
}

.d3 {
  font-size: var(--d3);
}

.d4 {
  font-size: var(--d4);
}

.d5 {
  font-size: var(--d5);
}

.f0 {
  font-size: var(--f0);
}

.f1 {
  font-size: var(--f1);
}

.f2 {
  font-size: var(--f2);
}

.f3 {
  font-size: var(--f3);
}

.f4 {
  font-size: var(--f4);
}

.lh0 {
  line-height: var(--lh0);
}

.lh1 {
  line-height: var(--lh1);
}

.lh2 {
  line-height: var(--lh2);
}

.lh3 {
  line-height: var(--lh3);
}

.lh4 {
  line-height: var(--lh4);
}

.lh5 {
  line-height: var(--lh5);
}

.bold {
  font-weight: var(--bold-fw);
}

.fw100 {
  font-weight: 100;
}

.fw200 {
  font-weight: 200;
}

.fw300 {
  font-weight: 300;
}

.fw400 {
  font-weight: 400;
}

.fw500 {
  font-weight: 500;
}

.fw600 {
  font-weight: 600;
}

.fw700 {
  font-weight: 700;
}

.fw800 {
  font-weight: 800;
}

.fw900 {
  font-weight: 900;
}

.fw1000 {
  font-weight: 1000;
}

.italic {
  font-style: italic;
}

.ul,
.ul\:hover:hover,
.anchor:hover .ul\:hover {
  text-decoration: underline;
}

.ol {
  text-decoration: overline;
}

.lt {
  text-decoration: line-through;
}

.va-inherit {
  vertical-align: inherit;
}

.va-baseline {
  vertical-align: baseline;
}

.va-sub {
  vertical-align: sub;
}

.va-super {
  vertical-align: super;
}

.va-middle {
  vertical-align: middle;
}

.va-top {
  vertical-align: top;
}

.va-bottom {
  vertical-align: bottom;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

.pre-wrap {
  white-space: pre-wrap;
}

.pre-line {
  white-space: pre-line;
}

.break-spaces {
  white-space: break-spaces;
}

.break-word {
  overflow-wrap: break-word;
}

.serif {
  font-family: var(--serif-font-family);
}

.sansserif {
  font-family: var(--sansserif-font-family);
}

.code {
  font-family: var(--code-font-family);
}

@media (max-width: 24rem) {
  .xs\:al {
    text-align: left;
  }

  .xs\:ar {
    text-align: right;
  }

  .xs\:ac {
    text-align: center;
  }
}

@media (min-width: 40rem) {
  .sd\:al {
    text-align: left;
  }

  .sd\:ar {
    text-align: right;
  }

  .sd\:ac {
    text-align: center;
  }

  .sd\:h1 {
    font-size: var(--h1);
  }

  .sd\:h2 {
    font-size: var(--h2);
  }

  .sd\:h3 {
    font-size: var(--h3);
  }

  .sd\:h4 {
    font-size: var(--h4);
  }

  .sd\:h5 {
    font-size: var(--h5);
  }

  .sd\:h6 {
    font-size: var(--h6);
  }

  .sd\:d1 {
    font-size: var(--d1);
  }

  .sd\:d2 {
    font-size: var(--d2);
  }

  .sd\:d3 {
    font-size: var(--d3);
  }

  .sd\:d4 {
    font-size: var(--d4);
  }

  .sd\:d5 {
    font-size: var(--d5);
  }

  .sd\:f0 {
    font-size: var(--f0);
  }

  .sd\:f1 {
    font-size: var(--f1);
  }

  .sd\:f2 {
    font-size: var(--f2);
  }

  .sd\:f3 {
    font-size: var(--f3);
  }

  .sd\:f4 {
    font-size: var(--f4);
  }

  .sd\:lh0 {
    line-height: var(--lh0);
  }

  .sd\:lh1 {
    line-height: var(--lh1);
  }

  .sd\:lh2 {
    line-height: var(--lh2);
  }

  .sd\:lh3 {
    line-height: var(--lh3);
  }

  .sd\:lh4 {
    line-height: var(--lh4);
  }

  .sd\:lh5 {
    line-height: var(--lh5);
  }

  .sd\:sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

@media (min-width: 61rem) {
  .md\:al {
    text-align: left;
  }

  .md\:ar {
    text-align: right;
  }

  .md\:ac {
    text-align: center;
  }

  .md\:h1 {
    font-size: var(--h1);
  }

  .md\:h2 {
    font-size: var(--h2);
  }

  .md\:h3 {
    font-size: var(--h3);
  }

  .md\:h4 {
    font-size: var(--h4);
  }

  .md\:h5 {
    font-size: var(--h5);
  }

  .md\:h6 {
    font-size: var(--h6);
  }

  .md\:d1 {
    font-size: var(--d1);
  }

  .md\:d2 {
    font-size: var(--d2);
  }

  .md\:d3 {
    font-size: var(--d3);
  }

  .md\:d4 {
    font-size: var(--d4);
  }

  .md\:d5 {
    font-size: var(--d5);
  }

  .md\:f0 {
    font-size: var(--f0);
  }

  .md\:f1 {
    font-size: var(--f1);
  }

  .md\:f2 {
    font-size: var(--f2);
  }

  .md\:f3 {
    font-size: var(--f3);
  }

  .md\:f4 {
    font-size: var(--f4);
  }

  .md\:lh0 {
    line-height: var(--lh0);
  }

  .md\:lh1 {
    line-height: var(--lh1);
  }

  .md\:lh2 {
    line-height: var(--lh2);
  }

  .md\:lh3 {
    line-height: var(--lh3);
  }

  .md\:lh4 {
    line-height: var(--lh4);
  }

  .md\:lh5 {
    line-height: var(--lh5);
  }

  .md\:sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

@media (min-width: 80rem) {
  .ld\:al {
    text-align: left;
  }

  .ld\:ar {
    text-align: right;
  }

  .ld\:ac {
    text-align: center;
  }

  .ld\:sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .ld\:h1 {
    font-size: var(--h1);
  }

  .ld\:h2 {
    font-size: var(--h2);
  }

  .ld\:h3 {
    font-size: var(--h3);
  }

  .ld\:h4 {
    font-size: var(--h4);
  }

  .ld\:h5 {
    font-size: var(--h5);
  }

  .ld\:h6 {
    font-size: var(--h6);
  }

  .ld\:d1 {
    font-size: var(--d1);
  }

  .ld\:d2 {
    font-size: var(--d2);
  }

  .ld\:d3 {
    font-size: var(--d3);
  }

  .ld\:d4 {
    font-size: var(--d4);
  }

  .ld\:d5 {
    font-size: var(--d5);
  }

  .ld\:f0 {
    font-size: var(--f0);
  }

  .ld\:f1 {
    font-size: var(--f1);
  }

  .ld\:f2 {
    font-size: var(--f2);
  }

  .ld\:f3 {
    font-size: var(--f3);
  }

  .ld\:f4 {
    font-size: var(--f4);
  }

  .ld\:lh0 {
    line-height: var(--lh0);
  }

  .ld\:lh1 {
    line-height: var(--lh1);
  }

  .ld\:lh2 {
    line-height: var(--lh2);
  }

  .ld\:lh3 {
    line-height: var(--lh3);
  }

  .ld\:lh4 {
    line-height: var(--lh4);
  }

  .ld\:lh5 {
    line-height: var(--lh5);
  }
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inlineblock {
  display: inline-block;
}

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.o100 {
  opacity: 1;
}

.o95 {
  opacity: 0.95;
}

.o90 {
  opacity: 0.9;
}

.o80,
.o80\:hover:hover,
.anchor:hover .o80\:hover {
  opacity: 0.8;
}

.o70 {
  opacity: 0.7;
}

.o60 {
  opacity: 0.6;
}

.o50 {
  opacity: 0.5;
}

.o40 {
  opacity: 0.4;
}

.o30 {
  opacity: 0.3;
}

.o20 {
  opacity: 0.2;
}

.o10 {
  opacity: 0.1;
}

.o05 {
  opacity: 0.05;
}

.o0 {
  opacity: 0;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.fixed {
  position: fixed;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

.z0 {
  z-index: 0;
}

.z1 {
  z-index: 1;
}

.z2 {
  z-index: 2;
}

.z3 {
  z-index: 3;
}

.z9 {
  z-index: 9;
}

.z99 {
  z-index: 99;
}

.z999 {
  z-index: 999;
}

.z9999 {
  z-index: 9999;
}

.object-contain {
  object-fit: contain;
}

.object-cover {
  object-fit: cover;
}

.object-fill {
  object-fit: fill;
}

.object-scaledown {
  object-fit: scale-down;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.min8 {
  min-width: 8rem;
}

.min10 {
  min-width: 10rem;
}

.min12 {
  min-width: 12rem;
}

.min14 {
  min-width: 14rem;
}

.min16 {
  min-width: 16rem;
}

.min18 {
  min-width: 18rem;
}

.min20 {
  min-width: 20rem;
}

.min24 {
  min-width: 24rem;
}

.max {
  max-width: none;
}

.max4 {
  max-width: 4rem;
}

.max6 {
  max-width: 6rem;
}

.max8 {
  max-width: 8rem;
}

.max10 {
  max-width: 10rem;
}

.max12 {
  max-width: 12rem;
}

.max15 {
  max-width: 15rem;
}

.max16 {
  max-width: 16rem;
}

.max20 {
  max-width: 20rem;
}

.max22 {
  max-width: 22rem;
}

.max24 {
  max-width: 24rem;
}

.max26 {
  max-width: 26rem;
}

.max28 {
  max-width: 28rem;
}

.max30 {
  max-width: 30rem;
}

.max32 {
  max-width: 32rem;
}

.max34 {
  max-width: 34rem;
}

.max35 {
  max-width: 35rem;
}

.max36 {
  max-width: 36rem;
}

.max38 {
  max-width: 38rem;
}

.max40 {
  max-width: 40rem;
}

.max42 {
  max-width: 42rem;
}

.max44 {
  max-width: 44rem;
}

.max45 {
  max-width: 45rem;
}

.max47 {
  max-width: 47rem;
}

.max48 {
  max-width: 48rem;
}

.max49 {
  max-width: 49rem;
}

.max50 {
  max-width: 50rem;
}

.max51 {
  max-width: 51rem;
}

.max52 {
  max-width: 52rem;
}

.max54 {
  max-width: 54rem;
}

.max55 {
  max-width: 55rem;
}

.max56 {
  max-width: 56rem;
}

.max60 {
  max-width: 60rem;
}

.max64 {
  max-width: 64rem;
}

.max65 {
  max-width: 65rem;
}

.max66 {
  max-width: 66rem;
}

.max68 {
  max-width: 68rem;
}

.max70 {
  max-width: 70rem;
}

.max72 {
  max-width: 72rem;
}

.max74 {
  max-width: 74rem;
}

.max75 {
  max-width: 75rem;
}

.max77 {
  max-width: 77rem;
}

.max78 {
  max-width: 78rem;
}

.max80 {
  max-width: 80rem;
}

.max90 {
  max-width: 90rem;
}

.w100 {
  width: 100%;
}

.w70 {
  width: 70%;
}

.w50 {
  width: 50%;
}

.w0 {
  width: 0%;
}

.wa {
  width: auto;
}

.h100 {
  height: 100%;
}

.h50 {
  height: 50%;
}

.h0 {
  height: 0%;
}

.ha {
  height: auto;
}

.minvw {
  min-width: 100vw;
}

.minvh {
  min-height: 100vh;
}

.maxw {
  max-width: 100%;
}

.maxh {
  max-height: 100%;
}

.row,
.row-wrap {
  display: flex;
  flex-direction: row;
}

.col,
.col-wrap {
  display: flex;
  flex-direction: column;
}

.row-reverse,
.row-reverse-wrap {
  display: flex;
  flex-direction: row-reverse;
}

.col-reverse,
.col-reverse-wrap {
  display: flex;
  flex-direction: column-reverse;
}

.row-wrap,
.col-wrap,
.row-reverse-wrap,
.col-reverse-wrap,
.flex-wrap {
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-gap: 5px;
}

.grid2 {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(2, 1fr);
}

.grid3 {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(3, 1fr);
}

.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.grid6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.grid7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.grid8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.span0 {
  flex: 0;
}

.span1 {
  flex: 1;
}

.span2 {
  flex: 2;
}

.span3 {
  flex: 3;
}

.span4 {
  flex: 4;
}

.span5 {
  flex: 5;
}

.span6 {
  flex: 6;
}

.span7 {
  flex: 7;
}

.span8 {
  flex: 8;
}

.span9 {
  flex: 9;
}

.span-auto {
  flex-basis: auto;
}

.order0 {
  order: 0;
}

.order1 {
  order: 1;
}

.order2 {
  order: 2;
}

.order3 {
  order: 3;
}

.order4 {
  order: 4;
}

.order5 {
  order: 5;
}

.order6 {
  order: 6;
}

.order7 {
  order: 7;
}

.order8 {
  order: 8;
}

.order9 {
  order: 9;
}

@media (max-width: 40rem) {
  .xs\:show {
    display: block;
  }

  .xs\:hide {
    display: none;
  }
}

@media (min-width: 40rem) {
  .sd\:show {
    display: block;
  }

  .sd\:hide {
    display: none;
  }

  .sd\:max {
    max-width: none;
  }

  .sd\:row,
  .sd\:row-wrap {
    display: flex;
    flex-direction: row;
  }

  .sd\:col,
  .sd\:col-wrap {
    display: flex;
    flex-direction: column;
  }

  .sd\:row-reverse,
  .sd\:row-reverse-wrap {
    display: flex;
    flex-direction: row-reverse;
  }

  .sd\:col-reverse,
  .sd\:col-reverse-wrap {
    display: flex;
    flex-direction: column-reverse;
  }

  .sd\:row-wrap,
  .sd\:col-wrap,
  .sd\:row-reverse-wrap,
  .sd\:col-reverse-wrap,
  .sd\:flex-wrap {
    flex-wrap: wrap;
  }

  .sd\:grid {
    display: grid;
  }

  .sd\:grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .sd\:grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .sd\:grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .sd\:grid5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .sd\:grid6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }

  .sd\:grid7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .sd\:grid8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
  }

  .sd\:order0 {
    order: 0;
  }

  .sd\:order1 {
    order: 1;
  }

  .sd\:order9 {
    order: 9;
  }
}

@media (min-width: 61rem) {
  .md\:show {
    display: block;
  }

  .md\:hide {
    display: none;
  }

  .md\:max {
    max-width: none;
  }

  .md\:row,
  .md\:row-wrap {
    display: flex;
    flex-direction: row;
  }

  .md\:col,
  .md\:col-wrap {
    display: flex;
    flex-direction: column;
  }

  .md\:row-reverse,
  .md\:row-reverse-wrap {
    display: flex;
    flex-direction: row-reverse;
  }

  .md\:col-reverse,
  .md\:col-reverse-wrap {
    display: flex;
    flex-direction: column-reverse;
  }

  .md\:row-wrap,
  .md\:col-wrap,
  .md\:row-reverse-wrap,
  .md\:col-reverse-wrap,
  .md\:flex-wrap {
    flex-wrap: wrap;
  }

  .md\:grid {
    display: grid;
  }

  .md\:grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .md\:grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .md\:grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .md\:grid5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .md\:grid6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }

  .md\:grid7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .md\:grid8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
  }

  .md\:order0 {
    order: 0;
  }

  .md\:order1 {
    order: 1;
  }

  .md\:order9 {
    order: 9;
  }
}

@media (min-width: 80rem) {
  .ld\:show {
    display: block;
  }

  .ld\:hide {
    display: none;
  }

  .ld\:max {
    max-width: none;
  }

  .ld\:row,
  .ld\:row-wrap {
    display: flex;
    flex-direction: row;
  }

  .ld\:col,
  .ld\:col-wrap {
    display: flex;
    flex-direction: column;
  }

  .ld\:row-reverse,
  .ld\:row-reverse-wrap {
    display: flex;
    flex-direction: row-reverse;
  }

  .ld\:col-reverse,
  .ld\:col-reverse-wrap {
    display: flex;
    flex-direction: column-reverse;
  }

  .ld\:row-wrap,
  .ld\:col-wrap,
  .ld\:row-reverse-wrap,
  .ld\:col-reverse-wrap,
  .ld\:flex-wrap {
    flex-wrap: wrap;
  }

  .ld\:grid {
    display: grid;
  }

  .ld\:grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .ld\:grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .ld\:grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .ld\:grid5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .ld\:grid6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }

  .ld\:grid7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .ld\:grid8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
  }

  .ld\:order0 {
    order: 0;
  }

  .ld\:order1 {
    order: 1;
  }

  .ld\:order9 {
    order: 9;
  }
}

@media (min-width: 100rem) {
  .xl\:show {
    display: block;
  }

  .xl\:hide {
    display: none;
  }

  .xl\:max {
    max-width: none;
  }

  .xl\:row,
  .xl\:row-wrap {
    display: flex;
    flex-direction: row;
  }

  .xl\:col,
  .xl\:col-wrap {
    display: flex;
    flex-direction: column;
  }

  .xl\:row-reverse,
  .xl\:row-reverse-wrap {
    display: flex;
    flex-direction: row-reverse;
  }

  .xl\:col-reverse,
  .xl\:col-reverse-wrap {
    display: flex;
    flex-direction: column-reverse;
  }

  .xl\:row-wrap,
  .xl\:col-wrap,
  .xl\:row-reverse-wrap,
  .xl\:col-reverse-wrap,
  .xl\:flex-wrap {
    flex-wrap: wrap;
  }

  .xl\:grid {
    display: grid;
  }

  .xl\:grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .xl\:grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .xl\:grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .xl\:grid5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .xl\:grid6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }

  .xl\:grid7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .xl\:grid8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
  }

  .xl\:order0 {
    order: 0;
  }

  .xl\:order1 {
    order: 1;
  }

  .xl\:order9 {
    order: 9;
  }
}

.m0 {
  margin: 0;
}

.m025 {
  margin: 0.25rem;
}

.m05 {
  margin: 0.5rem;
}

.m1 {
  margin: 1rem;
}

.m2 {
  margin: 2rem;
}

.m3 {
  margin: 3rem;
}

.m4 {
  margin: 4rem;
}

.ma {
  margin: auto;
}

.mx0 {
  margin-left: 0;
  margin-right: 0;
}

.mx1 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx2 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.mx {
  margin-left: auto;
  margin-right: auto;
}

.my0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my {
  margin-top: auto;
  margin-bottom: auto;
}

.mt025 {
  margin-top: 0.25rem;
}

.mt05 {
  margin-top: 0.5rem;
}

.mt1 {
  margin-top: 1rem;
}

.mt2 {
  margin-top: 2rem;
}

.mt {
  margin-top: auto;
}

.mb025 {
  margin-bottom: 0.25rem;
}

.mb05 {
  margin-bottom: 0.5rem;
}

.mb1 {
  margin-bottom: 1rem;
}

.mb2 {
  margin-bottom: 2rem;
}

.mb {
  margin-bottom: auto;
}

.ml025 {
  margin-left: 0.25rem;
}

.ml05 {
  margin-left: 0.5rem;
}

.ml1 {
  margin-left: 1rem;
}

.ml2 {
  margin-left: 2rem;
}

.ml {
  margin-left: auto;
}

.mr025 {
  margin-right: 0.25rem;
}

.mr05 {
  margin-right: 0.5rem;
}

.mr1 {
  margin-right: 1rem;
}

.mr2 {
  margin-right: 2rem;
}

.mr {
  margin-right: auto;
}

.p0 {
  padding: 0;
}

.p0125 {
  padding: 0.125rem;
}

.p025 {
  padding: 0.25rem;
}

.p05 {
  padding: 0.5rem;
}

.p075 {
  padding: 0.75rem;
}

.p1 {
  padding: 1rem;
}

.p125 {
  padding: 1.25rem;
}

.p15 {
  padding: 1.5rem;
}

.p175 {
  padding: 1.75rem;
}

.p2 {
  padding: 2rem;
}

.p25 {
  padding: 2.5rem;
}

.p3 {
  padding: 3rem;
}

.p4 {
  padding: 4rem;
}

.p0125b {
  padding: calc(0.125rem - var(--border-width));
}

.p025b {
  padding: calc(0.25rem - var(--border-width));
}

.p05b {
  padding: calc(0.5rem - var(--border-width));
}

.p075b {
  padding: calc(0.75rem - var(--border-width));
}

.p1b {
  padding: calc(1rem - var(--border-width));
}

.p125b {
  padding: calc(1.25rem - var(--border-width));
}

.p15b {
  padding: calc(1.5rem - var(--border-width));
}

.p175b {
  padding: calc(1.75rem - var(--border-width));
}

.p2b {
  padding: calc(2rem - var(--border-width));
}

.px0 {
  padding-left: 0;
  padding-right: 0;
}

.px0125 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px025 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px05 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px075 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px1 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px125 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px15 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px175 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px2 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px25 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px3 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px4 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.px0125b {
  padding-left: calc(0.125rem - var(--border-width));
  padding-right: calc(0.125rem - var(--border-width));
}

.px025b {
  padding-left: calc(0.25rem - var(--border-width));
  padding-right: calc(0.25rem - var(--border-width));
}

.px05b {
  padding-left: calc(0.5rem - var(--border-width));
  padding-right: calc(0.5rem - var(--border-width));
}

.px075b {
  padding-left: calc(0.75rem - var(--border-width));
  padding-right: calc(0.75rem - var(--border-width));
}

.px1b {
  padding-left: calc(1rem - var(--border-width));
  padding-right: calc(1rem - var(--border-width));
}

.px125b {
  padding-left: calc(1.25rem - var(--border-width));
  padding-right: calc(1.25rem - var(--border-width));
}

.px15b {
  padding-left: calc(1.5rem - var(--border-width));
  padding-right: calc(1.5rem - var(--border-width));
}

.px175b {
  padding-left: calc(1.75rem - var(--border-width));
  padding-right: calc(1.75rem - var(--border-width));
}

.px2b {
  padding-left: calc(2rem - var(--border-width));
  padding-right: calc(2rem - var(--border-width));
}

.py0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py0125 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py025 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py05 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py075 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py125 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py15 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py175 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py25 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py3 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py0125b {
  padding-top: calc(0.125rem - var(--border-width));
  padding-bottom: calc(0.125rem - var(--border-width));
}

.py025b {
  padding-top: calc(0.25rem - var(--border-width));
  padding-bottom: calc(0.25rem - var(--border-width));
}

.py05b {
  padding-top: calc(0.5rem - var(--border-width));
  padding-bottom: calc(0.5rem - var(--border-width));
}

.py075b {
  padding-top: calc(0.75rem - var(--border-width));
  padding-bottom: calc(0.75rem - var(--border-width));
}

.py1b {
  padding-top: calc(1rem - var(--border-width));
  padding-bottom: calc(1rem - var(--border-width));
}

.py125b {
  padding-top: calc(1.25rem - var(--border-width));
  padding-bottom: calc(1.25rem - var(--border-width));
}

.py15b {
  padding-top: calc(1.5rem - var(--border-width));
  padding-bottom: calc(1.5rem - var(--border-width));
}

.py175b {
  padding-top: calc(1.75rem - var(--border-width));
  padding-bottom: calc(1.75rem - var(--border-width));
}

.py2b {
  padding-top: calc(2rem - var(--border-width));
  padding-bottom: calc(2rem - var(--border-width));
}

.pt0 {
  padding-top: 0;
}

.pt0125 {
  padding-top: 0.125rem;
}

.pt025 {
  padding-top: 0.25rem;
}

.pt05 {
  padding-top: 0.5rem;
}

.pt075 {
  padding-top: 0.75rem;
}

.pt1 {
  padding-top: 1rem;
}

.pt125 {
  padding-top: 1.25rem;
}

.pt15 {
  padding-top: 1.5rem;
}

.pt175 {
  padding-top: 1.75rem;
}

.pt2 {
  padding-top: 2rem;
}

.pt3 {
  padding-top: 3rem;
}

.pt4 {
  padding-top: 4rem;
}

.pb0 {
  padding-bottom: 0;
}

.pb0125 {
  padding-bottom: 0.125rem;
}

.pb025 {
  padding-bottom: 0.25rem;
}

.pb05 {
  padding-bottom: 0.5rem;
}

.pb075 {
  padding-bottom: 0.75rem;
}

.pb1 {
  padding-bottom: 1rem;
}

.pb125 {
  padding-bottom: 1.25rem;
}

.pb15 {
  padding-bottom: 1.5rem;
}

.pb175 {
  padding-bottom: 1.75rem;
}

.pb2 {
  padding-bottom: 2rem;
}

.pb3 {
  padding-bottom: 3rem;
}

.pb4 {
  padding-bottom: 4rem;
}

.pl0 {
  padding-left: 0;
}

.pl0125 {
  padding-left: 0.125rem;
}

.pl025 {
  padding-left: 0.25rem;
}

.pl05 {
  padding-left: 0.5rem;
}

.pl075 {
  padding-left: 0.75rem;
}

.pl1 {
  padding-left: 1rem;
}

.pl125 {
  padding-left: 1.25rem;
}

.pl15 {
  padding-left: 1.5rem;
}

.pl175 {
  padding-left: 1.75rem;
}

.pl2 {
  padding-left: 2rem;
}

.pl3 {
  padding-left: 3rem;
}

.pl4 {
  padding-left: 4rem;
}

.pr0 {
  padding-right: 0;
}

.pr0125 {
  padding-right: 0.125rem;
}

.pr025 {
  padding-right: 0.25rem;
}

.pr05 {
  padding-right: 0.5rem;
}

.pr075 {
  padding-right: 0.75rem;
}

.pr1 {
  padding-right: 1rem;
}

.pr125 {
  padding-right: 1.25rem;
}

.pr15 {
  padding-right: 1.5rem;
}

.pr175 {
  padding-right: 1.75rem;
}

.pr2 {
  padding-right: 2rem;
}

.pr3 {
  padding-right: 3rem;
}

.pr4 {
  padding-right: 4rem;
}

@media (min-width: 40rem) {
  .sd\:p0 {
    padding: 0;
  }

  .sd\:p0125 {
    padding: 0.125rem;
  }

  .sd\:p025 {
    padding: 0.25rem;
  }

  .sd\:p05 {
    padding: 0.5rem;
  }

  .sd\:p075 {
    padding: 0.75rem;
  }

  .sd\:p1 {
    padding: 1rem;
  }

  .sd\:p125 {
    padding: 1.25rem;
  }

  .sd\:p15 {
    padding: 1.5rem;
  }

  .sd\:p175 {
    padding: 1.75rem;
  }

  .sd\:p2 {
    padding: 2rem;
  }

  .sd\:p25 {
    padding: 2.5rem;
  }

  .sd\:p3 {
    padding: 3rem;
  }

  .sd\:p4 {
    padding: 4rem;
  }

  .sd\:p0125b {
    padding: calc(0.125rem - var(--border-width));
  }

  .sd\:p025b {
    padding: calc(0.25rem - var(--border-width));
  }

  .sd\:p05b {
    padding: calc(0.5rem - var(--border-width));
  }

  .sd\:p075b {
    padding: calc(0.75rem - var(--border-width));
  }

  .sd\:p1b {
    padding: calc(1rem - var(--border-width));
  }

  .sd\:p125b {
    padding: calc(1.25rem - var(--border-width));
  }

  .sd\:p15b {
    padding: calc(1.5rem - var(--border-width));
  }

  .sd\:p175b {
    padding: calc(1.75rem - var(--border-width));
  }

  .sd\:p2b {
    padding: calc(2rem - var(--border-width));
  }

  .sd\:px0 {
    padding-left: 0;
    padding-right: 0;
  }

  .sd\:px0125 {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
  }

  .sd\:px025 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .sd\:px05 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sd\:px075 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sd\:px1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sd\:px125 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sd\:px15 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sd\:px175 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .sd\:px2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sd\:px25 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sd\:px3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .sd\:px4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .sd\:px0125b {
    padding-left: calc(0.125rem - var(--border-width));
    padding-right: calc(0.125rem - var(--border-width));
  }

  .sd\:px025b {
    padding-left: calc(0.25rem - var(--border-width));
    padding-right: calc(0.25rem - var(--border-width));
  }

  .sd\:px05b {
    padding-left: calc(0.5rem - var(--border-width));
    padding-right: calc(0.5rem - var(--border-width));
  }

  .sd\:px075b {
    padding-left: calc(0.75rem - var(--border-width));
    padding-right: calc(0.75rem - var(--border-width));
  }

  .sd\:px1b {
    padding-left: calc(1rem - var(--border-width));
    padding-right: calc(1rem - var(--border-width));
  }

  .sd\:px125b {
    padding-left: calc(1.25rem - var(--border-width));
    padding-right: calc(1.25rem - var(--border-width));
  }

  .sd\:px15b {
    padding-left: calc(1.5rem - var(--border-width));
    padding-right: calc(1.5rem - var(--border-width));
  }

  .sd\:px175b {
    padding-left: calc(1.75rem - var(--border-width));
    padding-right: calc(1.75rem - var(--border-width));
  }

  .sd\:px2b {
    padding-left: calc(2rem - var(--border-width));
    padding-right: calc(2rem - var(--border-width));
  }

  .sd\:py0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .sd\:py0125 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }

  .sd\:py025 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .sd\:py05 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sd\:py075 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sd\:py1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sd\:py125 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .sd\:py15 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sd\:py175 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .sd\:py2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sd\:py25 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sd\:py3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sd\:py4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sd\:py0125b {
    padding-top: calc(0.125rem - var(--border-width));
    padding-bottom: calc(0.125rem - var(--border-width));
  }

  .sd\:py025b {
    padding-top: calc(0.25rem - var(--border-width));
    padding-bottom: calc(0.25rem - var(--border-width));
  }

  .sd\:py05b {
    padding-top: calc(0.5rem - var(--border-width));
    padding-bottom: calc(0.5rem - var(--border-width));
  }

  .sd\:py075b {
    padding-top: calc(0.75rem - var(--border-width));
    padding-bottom: calc(0.75rem - var(--border-width));
  }

  .sd\:py1b {
    padding-top: calc(1rem - var(--border-width));
    padding-bottom: calc(1rem - var(--border-width));
  }

  .sd\:py125b {
    padding-top: calc(1.25rem - var(--border-width));
    padding-bottom: calc(1.25rem - var(--border-width));
  }

  .sd\:py15b {
    padding-top: calc(1.5rem - var(--border-width));
    padding-bottom: calc(1.5rem - var(--border-width));
  }

  .sd\:py175b {
    padding-top: calc(1.75rem - var(--border-width));
    padding-bottom: calc(1.75rem - var(--border-width));
  }

  .sd\:py2b {
    padding-top: calc(2rem - var(--border-width));
    padding-bottom: calc(2rem - var(--border-width));
  }
}

@media (min-width: 61rem) {
  .md\:p0 {
    padding: 0;
  }

  .md\:p0125 {
    padding: 0.125rem;
  }

  .md\:p025 {
    padding: 0.25rem;
  }

  .md\:p05 {
    padding: 0.5rem;
  }

  .md\:p075 {
    padding: 0.75rem;
  }

  .md\:p1 {
    padding: 1rem;
  }

  .md\:p125 {
    padding: 1.25rem;
  }

  .md\:p15 {
    padding: 1.5rem;
  }

  .md\:p175 {
    padding: 1.75rem;
  }

  .md\:p2 {
    padding: 2rem;
  }

  .md\:p25 {
    padding: 2.5rem;
  }

  .md\:p3 {
    padding: 3rem;
  }

  .md\:p4 {
    padding: 4rem;
  }

  .md\:p0125b {
    padding: calc(0.125rem - var(--border-width));
  }

  .md\:p025b {
    padding: calc(0.25rem - var(--border-width));
  }

  .md\:p05b {
    padding: calc(0.5rem - var(--border-width));
  }

  .md\:p075b {
    padding: calc(0.75rem - var(--border-width));
  }

  .md\:p1b {
    padding: calc(1rem - var(--border-width));
  }

  .md\:p125b {
    padding: calc(1.25rem - var(--border-width));
  }

  .md\:p15b {
    padding: calc(1.5rem - var(--border-width));
  }

  .md\:p175b {
    padding: calc(1.75rem - var(--border-width));
  }

  .md\:p2b {
    padding: calc(2rem - var(--border-width));
  }

  .md\:px0 {
    padding-left: 0;
    padding-right: 0;
  }

  .md\:px0125 {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
  }

  .md\:px025 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .md\:px05 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .md\:px075 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .md\:px1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:px125 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .md\:px15 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px175 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .md\:px2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:px25 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .md\:px3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:px4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .md\:px0125b {
    padding-left: calc(0.125rem - var(--border-width));
    padding-right: calc(0.125rem - var(--border-width));
  }

  .md\:px025b {
    padding-left: calc(0.25rem - var(--border-width));
    padding-right: calc(0.25rem - var(--border-width));
  }

  .md\:px05b {
    padding-left: calc(0.5rem - var(--border-width));
    padding-right: calc(0.5rem - var(--border-width));
  }

  .md\:px075b {
    padding-left: calc(0.75rem - var(--border-width));
    padding-right: calc(0.75rem - var(--border-width));
  }

  .md\:px1b {
    padding-left: calc(1rem - var(--border-width));
    padding-right: calc(1rem - var(--border-width));
  }

  .md\:px125b {
    padding-left: calc(1.25rem - var(--border-width));
    padding-right: calc(1.25rem - var(--border-width));
  }

  .md\:px15b {
    padding-left: calc(1.5rem - var(--border-width));
    padding-right: calc(1.5rem - var(--border-width));
  }

  .md\:px175b {
    padding-left: calc(1.75rem - var(--border-width));
    padding-right: calc(1.75rem - var(--border-width));
  }

  .md\:px2b {
    padding-left: calc(2rem - var(--border-width));
    padding-right: calc(2rem - var(--border-width));
  }

  .md\:py0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .md\:py0125 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }

  .md\:py025 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .md\:py05 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .md\:py075 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .md\:py1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .md\:py125 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .md\:py15 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .md\:py175 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .md\:py2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .md\:py25 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .md\:py4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:py0125b {
    padding-top: calc(0.125rem - var(--border-width));
    padding-bottom: calc(0.125rem - var(--border-width));
  }

  .md\:py025b {
    padding-top: calc(0.25rem - var(--border-width));
    padding-bottom: calc(0.25rem - var(--border-width));
  }

  .md\:py05b {
    padding-top: calc(0.5rem - var(--border-width));
    padding-bottom: calc(0.5rem - var(--border-width));
  }

  .md\:py075b {
    padding-top: calc(0.75rem - var(--border-width));
    padding-bottom: calc(0.75rem - var(--border-width));
  }

  .md\:py1b {
    padding-top: calc(1rem - var(--border-width));
    padding-bottom: calc(1rem - var(--border-width));
  }

  .md\:py125b {
    padding-top: calc(1.25rem - var(--border-width));
    padding-bottom: calc(1.25rem - var(--border-width));
  }

  .md\:py15b {
    padding-top: calc(1.5rem - var(--border-width));
    padding-bottom: calc(1.5rem - var(--border-width));
  }

  .md\:py175b {
    padding-top: calc(1.75rem - var(--border-width));
    padding-bottom: calc(1.75rem - var(--border-width));
  }

  .md\:py2b {
    padding-top: calc(2rem - var(--border-width));
    padding-bottom: calc(2rem - var(--border-width));
  }
}

@media (min-width: 80rem) {
  .ld\:p0 {
    padding: 0;
  }

  .ld\:p0125 {
    padding: 0.125rem;
  }

  .ld\:p025 {
    padding: 0.25rem;
  }

  .ld\:p05 {
    padding: 0.5rem;
  }

  .ld\:p075 {
    padding: 0.75rem;
  }

  .ld\:p1 {
    padding: 1rem;
  }

  .ld\:p125 {
    padding: 1.25rem;
  }

  .ld\:p15 {
    padding: 1.5rem;
  }

  .ld\:p175 {
    padding: 1.75rem;
  }

  .ld\:p2 {
    padding: 2rem;
  }

  .ld\:p25 {
    padding: 2.5rem;
  }

  .ld\:p3 {
    padding: 3rem;
  }

  .ld\:p4 {
    padding: 4rem;
  }

  .ld\:p0125b {
    padding: calc(0.125rem - var(--border-width));
  }

  .ld\:p025b {
    padding: calc(0.25rem - var(--border-width));
  }

  .ld\:p05b {
    padding: calc(0.5rem - var(--border-width));
  }

  .ld\:p075b {
    padding: calc(0.75rem - var(--border-width));
  }

  .ld\:p1b {
    padding: calc(1rem - var(--border-width));
  }

  .ld\:p125b {
    padding: calc(1.25rem - var(--border-width));
  }

  .ld\:p15b {
    padding: calc(1.5rem - var(--border-width));
  }

  .ld\:p175b {
    padding: calc(1.75rem - var(--border-width));
  }

  .ld\:p2b {
    padding: calc(2rem - var(--border-width));
  }

  .ld\:px0 {
    padding-left: 0;
    padding-right: 0;
  }

  .ld\:px0125 {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
  }

  .ld\:px025 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .ld\:px05 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .ld\:px075 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .ld\:px1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .ld\:px125 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .ld\:px15 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .ld\:px175 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .ld\:px2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .ld\:px25 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .ld\:px3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .ld\:px4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .ld\:px0125b {
    padding-left: calc(0.125rem - var(--border-width));
    padding-right: calc(0.125rem - var(--border-width));
  }

  .ld\:px025b {
    padding-left: calc(0.25rem - var(--border-width));
    padding-right: calc(0.25rem - var(--border-width));
  }

  .ld\:px05b {
    padding-left: calc(0.5rem - var(--border-width));
    padding-right: calc(0.5rem - var(--border-width));
  }

  .ld\:px075b {
    padding-left: calc(0.75rem - var(--border-width));
    padding-right: calc(0.75rem - var(--border-width));
  }

  .ld\:px1b {
    padding-left: calc(1rem - var(--border-width));
    padding-right: calc(1rem - var(--border-width));
  }

  .ld\:px125b {
    padding-left: calc(1.25rem - var(--border-width));
    padding-right: calc(1.25rem - var(--border-width));
  }

  .ld\:px15b {
    padding-left: calc(1.5rem - var(--border-width));
    padding-right: calc(1.5rem - var(--border-width));
  }

  .ld\:px175b {
    padding-left: calc(1.75rem - var(--border-width));
    padding-right: calc(1.75rem - var(--border-width));
  }

  .ld\:px2b {
    padding-left: calc(2rem - var(--border-width));
    padding-right: calc(2rem - var(--border-width));
  }

  .ld\:py0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .ld\:py0125 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }

  .ld\:py025 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .ld\:py05 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .ld\:py075 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .ld\:py1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .ld\:py125 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .ld\:py15 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .ld\:py175 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .ld\:py2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .ld\:py25 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .ld\:py3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .ld\:py4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .ld\:py0125b {
    padding-top: calc(0.125rem - var(--border-width));
    padding-bottom: calc(0.125rem - var(--border-width));
  }

  .ld\:py025b {
    padding-top: calc(0.25rem - var(--border-width));
    padding-bottom: calc(0.25rem - var(--border-width));
  }

  .ld\:py05b {
    padding-top: calc(0.5rem - var(--border-width));
    padding-bottom: calc(0.5rem - var(--border-width));
  }

  .ld\:py075b {
    padding-top: calc(0.75rem - var(--border-width));
    padding-bottom: calc(0.75rem - var(--border-width));
  }

  .ld\:py1b {
    padding-top: calc(1rem - var(--border-width));
    padding-bottom: calc(1rem - var(--border-width));
  }

  .ld\:py125b {
    padding-top: calc(1.25rem - var(--border-width));
    padding-bottom: calc(1.25rem - var(--border-width));
  }

  .ld\:py15b {
    padding-top: calc(1.5rem - var(--border-width));
    padding-bottom: calc(1.5rem - var(--border-width));
  }

  .ld\:py175b {
    padding-top: calc(1.75rem - var(--border-width));
    padding-bottom: calc(1.75rem - var(--border-width));
  }

  .ld\:py2b {
    padding-top: calc(2rem - var(--border-width));
    padding-bottom: calc(2rem - var(--border-width));
  }
}

@media (min-width: 100rem) {
  .xl\:p0 {
    padding: 0;
  }

  .xl\:p0125 {
    padding: 0.125rem;
  }

  .xl\:p025 {
    padding: 0.25rem;
  }

  .xl\:p05 {
    padding: 0.5rem;
  }

  .xl\:p075 {
    padding: 0.75rem;
  }

  .xl\:p1 {
    padding: 1rem;
  }

  .xl\:p125 {
    padding: 1.25rem;
  }

  .xl\:p15 {
    padding: 1.5rem;
  }

  .xl\:p175 {
    padding: 1.75rem;
  }

  .xl\:p2 {
    padding: 2rem;
  }

  .xl\:p25 {
    padding: 2.5rem;
  }

  .xl\:p3 {
    padding: 3rem;
  }

  .xl\:p4 {
    padding: 4rem;
  }

  .xl\:p0125b {
    padding: calc(0.125rem - var(--border-width));
  }

  .xl\:p025b {
    padding: calc(0.25rem - var(--border-width));
  }

  .xl\:p05b {
    padding: calc(0.5rem - var(--border-width));
  }

  .xl\:p075b {
    padding: calc(0.75rem - var(--border-width));
  }

  .xl\:p1b {
    padding: calc(1rem - var(--border-width));
  }

  .xl\:p125b {
    padding: calc(1.25rem - var(--border-width));
  }

  .xl\:p15b {
    padding: calc(1.5rem - var(--border-width));
  }

  .xl\:p175b {
    padding: calc(1.75rem - var(--border-width));
  }

  .xl\:p2b {
    padding: calc(2rem - var(--border-width));
  }

  .xl\:px0 {
    padding-left: 0;
    padding-right: 0;
  }

  .xl\:px0125 {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
  }

  .xl\:px025 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .xl\:px05 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .xl\:px075 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .xl\:px1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .xl\:px125 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .xl\:px15 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xl\:px175 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .xl\:px2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .xl\:px25 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .xl\:px3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .xl\:px4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .xl\:px0125b {
    padding-left: calc(0.125rem - var(--border-width));
    padding-right: calc(0.125rem - var(--border-width));
  }

  .xl\:px025b {
    padding-left: calc(0.25rem - var(--border-width));
    padding-right: calc(0.25rem - var(--border-width));
  }

  .xl\:px05b {
    padding-left: calc(0.5rem - var(--border-width));
    padding-right: calc(0.5rem - var(--border-width));
  }

  .xl\:px075b {
    padding-left: calc(0.75rem - var(--border-width));
    padding-right: calc(0.75rem - var(--border-width));
  }

  .xl\:px1b {
    padding-left: calc(1rem - var(--border-width));
    padding-right: calc(1rem - var(--border-width));
  }

  .xl\:px125b {
    padding-left: calc(1.25rem - var(--border-width));
    padding-right: calc(1.25rem - var(--border-width));
  }

  .xl\:px15b {
    padding-left: calc(1.5rem - var(--border-width));
    padding-right: calc(1.5rem - var(--border-width));
  }

  .xl\:px175b {
    padding-left: calc(1.75rem - var(--border-width));
    padding-right: calc(1.75rem - var(--border-width));
  }

  .xl\:px2b {
    padding-left: calc(2rem - var(--border-width));
    padding-right: calc(2rem - var(--border-width));
  }

  .xl\:py0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .xl\:py0125 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }

  .xl\:py025 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .xl\:py05 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .xl\:py075 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .xl\:py1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .xl\:py125 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .xl\:py15 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .xl\:py175 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .xl\:py2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .xl\:py25 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .xl\:py3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .xl\:py4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .xl\:py0125b {
    padding-top: calc(0.125rem - var(--border-width));
    padding-bottom: calc(0.125rem - var(--border-width));
  }

  .xl\:py025b {
    padding-top: calc(0.25rem - var(--border-width));
    padding-bottom: calc(0.25rem - var(--border-width));
  }

  .xl\:py05b {
    padding-top: calc(0.5rem - var(--border-width));
    padding-bottom: calc(0.5rem - var(--border-width));
  }

  .xl\:py075b {
    padding-top: calc(0.75rem - var(--border-width));
    padding-bottom: calc(0.75rem - var(--border-width));
  }

  .xl\:py1b {
    padding-top: calc(1rem - var(--border-width));
    padding-bottom: calc(1rem - var(--border-width));
  }

  .xl\:py125b {
    padding-top: calc(1.25rem - var(--border-width));
    padding-bottom: calc(1.25rem - var(--border-width));
  }

  .xl\:py15b {
    padding-top: calc(1.5rem - var(--border-width));
    padding-bottom: calc(1.5rem - var(--border-width));
  }

  .xl\:py175b {
    padding-top: calc(1.75rem - var(--border-width));
    padding-bottom: calc(1.75rem - var(--border-width));
  }

  .xl\:py2b {
    padding-top: calc(2rem - var(--border-width));
    padding-bottom: calc(2rem - var(--border-width));
  }
}

.ba {
  border: var(--border-width) solid var(--border-color);
}

.bl {
  border-left: var(--border-width) solid var(--border-color);
}

.br {
  border-right: var(--border-width) solid var(--border-color);
}

.bt {
  border-top: var(--border-width) solid var(--border-color);
}

.bb {
  border-bottom: var(--border-width) solid var(--border-color);
}

.bc-black {
  --border-color: var(--black);
}

.bc-black-95 {
  --border-color: var(--black-95);
}

.bc-black-90 {
  --border-color: var(--black-90);
}

.bc-black-80 {
  --border-color: var(--black-80);
}

.bc-black-70 {
  --border-color: var(--black-70);
}

.bc-black-60 {
  --border-color: var(--black-60);
}

.bc-black-50 {
  --border-color: var(--black-50);
}

.bc-black-40 {
  --border-color: var(--black-40);
}

.bc-black-30 {
  --border-color: var(--black-30);
}

.bc-black-20 {
  --border-color: var(--black-20);
}

.bc-black-10 {
  --border-color: var(--black-10);
}

.bc-black-05 {
  --border-color: var(--black-05);
}

.bc-black-025 {
  --border-color: var(--black-025);
}

.bc-black-0125 {
  --border-color: var(--black-0125);
}

.bc-white {
  --border-color: var(--white);
}

.bc-white-95 {
  --border-color: var(--white-95);
}

.bc-white-90 {
  --border-color: var(--white-90);
}

.bc-white-80 {
  --border-color: var(--white-80);
}

.bc-white-70 {
  --border-color: var(--white-70);
}

.bc-white-60 {
  --border-color: var(--white-60);
}

.bc-white-50 {
  --border-color: var(--white-50);
}

.bc-white-40 {
  --border-color: var(--white-40);
}

.bc-white-30 {
  --border-color: var(--white-30);
}

.bc-white-20 {
  --border-color: var(--white-20);
}

.bc-white-10 {
  --border-color: var(--white-10);
}

.bc-white-05 {
  --border-color: var(--white-05);
}

.bc-white-025 {
  --border-color: var(--white-025);
}

.bc-white-0125 {
  --border-color: var(--white-0125);
}

.bc-aqua {
  --border-color: var(--aqua);
}

.bc-blue {
  --border-color: var(--blue);
}

.bc-navy {
  --border-color: var(--navy);
}

.bc-teal {
  --border-color: var(--teal);
}

.bc-green {
  --border-color: var(--green);
}

.bc-olive {
  --border-color: var(--olive);
}

.bc-lime {
  --border-color: var(--lime);
}

.bc-yellow {
  --border-color: var(--yellow);
}

.bc-orange {
  --border-color: var(--orange);
}

.bc-red {
  --border-color: var(--red);
}

.bc-fuchsia {
  --border-color: var(--fuchsia);
}

.bc-purple {
  --border-color: var(--purple);
}

.bc-maroon {
  --border-color: var(--maroon);
}

.br1 {
  border-radius: var(--br1);
}

.br2 {
  border-radius: var(--br2);
}

.br3 {
  border-radius: var(--br3);
}

.br4 {
  border-radius: var(--br4);
}

.br5 {
  border-radius: var(--br5);
}

.br100 {
  border-radius: 100%;
}

.br999 {
  border-radius: 999px;
}

.color-current,
.color-current\:hover:hover,
.anchor:hover .color-current\:hover {
  color: currentColor;
}

.color-inherit,
.color-inherit\:hover:hover,
.anchor:hover .color-inherit\:hover {
  color: inherit;
}

.color-transparent {
  color: transparent;
}

.black {
  color: var(--black);
}

.black-95 {
  color: var(--black-95);
}

.black-90 {
  color: var(--black-90);
}

.black-80 {
  color: var(--black-80);
}

.black-70 {
  color: var(--black-70);
}

.black-60 {
  color: var(--black-60);
}

.black-50 {
  color: var(--black-50);
}

.black-40 {
  color: var(--black-40);
}

.black-30 {
  color: var(--black-30);
}

.black-20 {
  color: var(--black-20);
}

.black-10 {
  color: var(--black-10);
}

.black-05 {
  color: var(--black-05);
}

.black-025 {
  color: var(--black-025);
}

.black-0125 {
  color: var(--black-0125);
}

.white {
  color: var(--white);
}

.white-95 {
  color: var(--white-95);
}

.white-90 {
  color: var(--white-90);
}

.white-80 {
  color: var(--white-80);
}

.white-70 {
  color: var(--white-70);
}

.white-60 {
  color: var(--white-60);
}

.white-50 {
  color: var(--white-50);
}

.white-40 {
  color: var(--white-40);
}

.white-30 {
  color: var(--white-30);
}

.white-20 {
  color: var(--white-20);
}

.white-10 {
  color: var(--white-10);
}

.white-05 {
  color: var(--white-05);
}

.white-025 {
  color: var(--white-025);
}

.white-0125 {
  color: var(--white-0125);
}

.aqua {
  color: var(--aqua);
}

.blue {
  color: var(--blue);
}

.navy {
  color: var(--navy);
}

.teal {
  color: var(--teal);
}

.green {
  color: var(--green);
}

.olive {
  color: var(--olive);
}

.lime {
  color: var(--lime);
}

.yellow {
  color: var(--yellow);
}

.orange {
  color: var(--orange);
}

.red {
  color: var(--red);
}

.fuchsia {
  color: var(--fuchsia);
}

.purple {
  color: var(--purple);
}

.maroon {
  color: var(--maroon);
}

.bg-cover {
  background-size: cover;
}

.bg-contain {
  background-size: contain;
}

.bg-top {
  background-position: top;
}

.bg-bottom {
  background-position: bottom;
}

.bg-left {
  background-position: left;
}

.bg-right {
  background-position: right;
}

.bg-center {
  background-position: center;
}

.bg-topleft {
  background-position: top left;
}

.bg-topright {
  background-position: top right;
}

.bg-bottomleft {
  background-position: bottom left;
}

.bg-bottomright {
  background-position: bottom right;
}

.bg-repeatx {
  background-repeat: repeat-x;
}

.bg-repeaty {
  background-repeat: repeat-y;
}

.bg-norepeat {
  background-repeat: no-repeat;
}

.bg-current {
  background-color: currentColor;
}

.bg-transparent,
.bg-transparent\:hover:hover,
.anchor:hover .bg-transparent\:hover {
  background-color: transparent;
}

.bg-black {
  background-color: var(--black);
}

.bg-black-95 {
  background-color: var(--black-95);
}

.bg-black-90 {
  background-color: var(--black-90);
}

.bg-black-80 {
  background-color: var(--black-80);
}

.bg-black-70 {
  background-color: var(--black-70);
}

.bg-black-60 {
  background-color: var(--black-60);
}

.bg-black-50 {
  background-color: var(--black-50);
}

.bg-black-40 {
  background-color: var(--black-40);
}

.bg-black-30 {
  background-color: var(--black-30);
}

.bg-black-20 {
  background-color: var(--black-20);
}

.bg-black-10 {
  background-color: var(--black-10);
}

.bg-black-05 {
  background-color: var(--black-05);
}

.bg-black-025 {
  background-color: var(--black-025);
}

.bg-black-0125 {
  background-color: var(--black-0125);
}

.bg-white {
  background-color: var(--white);
}

.bg-white-95 {
  background-color: var(--white-95);
}

.bg-white-90 {
  background-color: var(--white-90);
}

.bg-white-80 {
  background-color: var(--white-80);
}

.bg-white-70 {
  background-color: var(--white-70);
}

.bg-white-60 {
  background-color: var(--white-60);
}

.bg-white-50 {
  background-color: var(--white-50);
}

.bg-white-40 {
  background-color: var(--white-40);
}

.bg-white-30 {
  background-color: var(--white-30);
}

.bg-white-20 {
  background-color: var(--white-20);
}

.bg-white-10 {
  background-color: var(--white-10);
}

.bg-white-05 {
  background-color: var(--white-05);
}

.bg-white-025 {
  background-color: var(--white-025);
}

.bg-white-0125 {
  background-color: var(--white-0125);
}

.bg-aqua {
  background-color: var(--aqua);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-navy {
  background-color: var(--navy);
}

.bg-teal {
  background-color: var(--teal);
}

.bg-green {
  background-color: var(--green);
}

.bg-olive {
  background-color: var(--olive);
}

.bg-lime {
  background-color: var(--lime);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-orange {
  background-color: var(--orange);
}

.bg-red {
  background-color: var(--red);
}

.bg-fuchsia {
  background-color: var(--fuchsia);
}

.bg-purple {
  background-color: var(--purple);
}

.bg-maroon {
  background-color: var(--maroon);
}

.cursor-default {
  cursor: default;
}

.cursor-notallowed {
  cursor: not-allowed;
}

.cursor-progress {
  cursor: progress;
}

.cursor-pointer {
  cursor: pointer;
}

.-d {
  outline: 1px dashed var(--purple);
}

.-d * {
  outline: 1px dashed var(--lime);
}

.-d *.-d {
  outline: 1px dashed var(--purple);
}

.-view {
  position: fixed;
  left: 0;
  top: 0;
  background-color: var(--yellow);
  color: #000;
  line-height: 1;
  font-size: 12px;
  padding: 4px;
  z-index: 9999;
}

.-view::before {
  content: "-";
}

@media (max-width: 24rem) {
  .-view::before {
    content: "XS";
  }
}

@media (min-width: 40rem) {
  .-view::before {
    content: "SD";
  }
}

@media (min-width: 61rem) {
  .-view::before {
    content: "MD";
  }
}

@media (min-width: 80rem) {
  .-view::before {
    content: "LD";
  }
}

@media (min-width: 100rem) {
  .-view::before {
    content: "XL";
  }
}

.linkcolor,
.linkcolor\:hover:hover,
.anchor:hover .linkcolor\:hover {
  color: var(--link-color);
}

.hlcolor {
  color: var(--theme-highlight-text-color);
}

.bg-hlbgcolor {
  background-color: var(--theme-highlight-background-color);
}

.bg-hlbgcolor-shadow {
  box-shadow: -1px 0 0 2px var(--theme-highlight-background-color),
    1px 0 0 2px var(--theme-highlight-background-color);
}

:root {
  --font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
  :root {
    --font-family: "Inter var", sans-serif;
  }
}

:root {
  --theme-background-color: var(--white);
  --theme-text-color: var(--black);
  --theme-text-color-05: var(--black-05);
  --theme-link-color: inherit;
  --theme-highlight-text-color: inherit;
  --theme-highlight-background-color: var(--yellow);
  --default-background-color: var(--theme-background-color);
  --default-color: var(--theme-text-color);
  --link-color: var(--theme-link-color);
  --copy-space-primary: 1.5em;
  --copy-space-secondary: 0.5em;
}