@alexsad95/initcss/css/init.css

Minimal CSS Framework

/*
  POSITIONING
 */
.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

/*
  COORDINATES
 */
.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.top-s {
  top: var(--spacing-s);
}

.right-s {
  right: var(--spacing-s);
}

.bottom-s {
  bottom: var(--spacing-s);
}

.left-s {
  left: var(--spacing-s);
}

.top-m {
  top: var(--spacing-m);
}

.right-m {
  right: var(--spacing-m);
}

.bottom-m {
  bottom: var(--spacing-m);
}

.left-m {
  left: var(--spacing-m);
}

.top-l {
  top: var(--spacing-l);
}

.right-l {
  right: var(--spacing-l);
}

.bottom-l {
  bottom: var(--spacing-l);
}

.left-l {
  left: var(--spacing-l);
}

.fill {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/*
  BORDER-RADIUS
 */
.br-0 {
  border-radius: 0;
}

.br-3xs {
  border-radius: var(--spacing-3xs);
}

.br-2xs {
  border-radius: var(--spacing-2xs);
}

.br-xs {
  border-radius: var(--spacing-xs);
}

.br-s {
  border-radius: var(--spacing-s);
}

.br-m {
  border-radius: var(--spacing-m);
}

.br-100 {
  border-radius: 100%;
}

.br-pill {
  border-radius: 9999px;
}

.br-bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.br-top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.br-right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.br-left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/*
  SPACING
 */
.pa-px {
  padding: 0.0625rem;
}

.pl-px {
  padding-left: 0.0625rem;
}

.pr-px {
  padding-right: 0.0625rem;
}

.pb-px {
  padding-bottom: 0.0625rem;
}

.pt-px {
  padding-top: 0.0625rem;
}

.py-px {
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
}

.px-px {
  padding-left: 0.0625rem;
  padding-right: 0.0625rem;
}

.ma-px {
  margin: 0.0625rem;
}

.ml-px {
  margin-left: 0.0625rem;
}

.mr-px {
  margin-right: 0.0625rem;
}

.mb-px {
  margin-bottom: 0.0625rem;
}

.mt-px {
  margin-top: 0.0625rem;
}

.my-px {
  margin-top: 0.0625rem;
  margin-bottom: 0.0625rem;
}

.mx-px {
  margin-left: 0.0625rem;
  margin-right: 0.0625rem;
}

.pa-2px {
  padding: 0.125rem;
}

.pl-2px {
  padding-left: 0.125rem;
}

.pr-2px {
  padding-right: 0.125rem;
}

.pb-2px {
  padding-bottom: 0.125rem;
}

.pt-2px {
  padding-top: 0.125rem;
}

.py-2px {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.px-2px {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.ma-2px {
  margin: 0.125rem;
}

.ml-2px {
  margin-left: 0.125rem;
}

.mr-2px {
  margin-right: 0.125rem;
}

.mb-2px {
  margin-bottom: 0.125rem;
}

.mt-2px {
  margin-top: 0.125rem;
}

.my-2px {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.mx-2px {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.pa-4px {
  padding: 0.25rem;
}

.pl-4px {
  padding-left: 0.25rem;
}

.pr-4px {
  padding-right: 0.25rem;
}

.pb-4px {
  padding-bottom: 0.25rem;
}

.pt-4px {
  padding-top: 0.25rem;
}

.py-4px {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.px-4px {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.ma-4px {
  margin: 0.25rem;
}

.ml-4px {
  margin-left: 0.25rem;
}

.mr-4px {
  margin-right: 0.25rem;
}

.mb-4px {
  margin-bottom: 0.25rem;
}

.mt-4px {
  margin-top: 0.25rem;
}

.my-4px {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.mx-4px {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.pa-6px {
  padding: 0.375rem;
}

.pl-6px {
  padding-left: 0.375rem;
}

.pr-6px {
  padding-right: 0.375rem;
}

.pb-6px {
  padding-bottom: 0.375rem;
}

.pt-6px {
  padding-top: 0.375rem;
}

.py-6px {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.px-6px {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.ma-6px {
  margin: 0.375rem;
}

.ml-6px {
  margin-left: 0.375rem;
}

.mr-6px {
  margin-right: 0.375rem;
}

.mb-6px {
  margin-bottom: 0.375rem;
}

.mt-6px {
  margin-top: 0.375rem;
}

.my-6px {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.mx-6px {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}

.pa-8px {
  padding: 0.5rem;
}

.pl-8px {
  padding-left: 0.5rem;
}

.pr-8px {
  padding-right: 0.5rem;
}

.pb-8px {
  padding-bottom: 0.5rem;
}

.pt-8px {
  padding-top: 0.5rem;
}

.py-8px {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-8px {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.ma-8px {
  margin: 0.5rem;
}

.ml-8px {
  margin-left: 0.5rem;
}

.mr-8px {
  margin-right: 0.5rem;
}

.mb-8px {
  margin-bottom: 0.5rem;
}

.mt-8px {
  margin-top: 0.5rem;
}

.my-8px {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mx-8px {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.pa-10px {
  padding: 0.625rem;
}

.pl-10px {
  padding-left: 0.625rem;
}

.pr-10px {
  padding-right: 0.625rem;
}

.pb-10px {
  padding-bottom: 0.625rem;
}

.pt-10px {
  padding-top: 0.625rem;
}

.py-10px {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.px-10px {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.ma-10px {
  margin: 0.625rem;
}

.ml-10px {
  margin-left: 0.625rem;
}

.mr-10px {
  margin-right: 0.625rem;
}

.mb-10px {
  margin-bottom: 0.625rem;
}

.mt-10px {
  margin-top: 0.625rem;
}

.my-10px {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}

.mx-10px {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}

.pa-12px {
  padding: 0.75rem;
}

.pl-12px {
  padding-left: 0.75rem;
}

.pr-12px {
  padding-right: 0.75rem;
}

.pb-12px {
  padding-bottom: 0.75rem;
}

.pt-12px {
  padding-top: 0.75rem;
}

.py-12px {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.px-12px {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.ma-12px {
  margin: 0.75rem;
}

.ml-12px {
  margin-left: 0.75rem;
}

.mr-12px {
  margin-right: 0.75rem;
}

.mb-12px {
  margin-bottom: 0.75rem;
}

.mt-12px {
  margin-top: 0.75rem;
}

.my-12px {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.mx-12px {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.pa-14px {
  padding: 0.875rem;
}

.pl-14px {
  padding-left: 0.875rem;
}

.pr-14px {
  padding-right: 0.875rem;
}

.pb-14px {
  padding-bottom: 0.875rem;
}

.pt-14px {
  padding-top: 0.875rem;
}

.py-14px {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.px-14px {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.ma-14px {
  margin: 0.875rem;
}

.ml-14px {
  margin-left: 0.875rem;
}

.mr-14px {
  margin-right: 0.875rem;
}

.mb-14px {
  margin-bottom: 0.875rem;
}

.mt-14px {
  margin-top: 0.875rem;
}

.my-14px {
  margin-top: 0.875rem;
  margin-bottom: 0.875rem;
}

.mx-14px {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}

.pa-16px {
  padding: 1rem;
}

.pl-16px {
  padding-left: 1rem;
}

.pr-16px {
  padding-right: 1rem;
}

.pb-16px {
  padding-bottom: 1rem;
}

.pt-16px {
  padding-top: 1rem;
}

.py-16px {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-16px {
  padding-left: 1rem;
  padding-right: 1rem;
}

.ma-16px {
  margin: 1rem;
}

.ml-16px {
  margin-left: 1rem;
}

.mr-16px {
  margin-right: 1rem;
}

.mb-16px {
  margin-bottom: 1rem;
}

.mt-16px {
  margin-top: 1rem;
}

.my-16px {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mx-16px {
  margin-left: 1rem;
  margin-right: 1rem;
}

.pa-20px {
  padding: 1.25rem;
}

.pl-20px {
  padding-left: 1.25rem;
}

.pr-20px {
  padding-right: 1.25rem;
}

.pb-20px {
  padding-bottom: 1.25rem;
}

.pt-20px {
  padding-top: 1.25rem;
}

.py-20px {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.px-20px {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.ma-20px {
  margin: 1.25rem;
}

.ml-20px {
  margin-left: 1.25rem;
}

.mr-20px {
  margin-right: 1.25rem;
}

.mb-20px {
  margin-bottom: 1.25rem;
}

.mt-20px {
  margin-top: 1.25rem;
}

.my-20px {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.mx-20px {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.pa-24px {
  padding: 1.5rem;
}

.pl-24px {
  padding-left: 1.5rem;
}

.pr-24px {
  padding-right: 1.5rem;
}

.pb-24px {
  padding-bottom: 1.5rem;
}

.pt-24px {
  padding-top: 1.5rem;
}

.py-24px {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.px-24px {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.ma-24px {
  margin: 1.5rem;
}

.ml-24px {
  margin-left: 1.5rem;
}

.mr-24px {
  margin-right: 1.5rem;
}

.mb-24px {
  margin-bottom: 1.5rem;
}

.mt-24px {
  margin-top: 1.5rem;
}

.my-24px {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.mx-24px {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.pa-28px {
  padding: 1.75rem;
}

.pl-28px {
  padding-left: 1.75rem;
}

.pr-28px {
  padding-right: 1.75rem;
}

.pb-28px {
  padding-bottom: 1.75rem;
}

.pt-28px {
  padding-top: 1.75rem;
}

.py-28px {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.px-28px {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.ma-28px {
  margin: 1.75rem;
}

.ml-28px {
  margin-left: 1.75rem;
}

.mr-28px {
  margin-right: 1.75rem;
}

.mb-28px {
  margin-bottom: 1.75rem;
}

.mt-28px {
  margin-top: 1.75rem;
}

.my-28px {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.mx-28px {
  margin-left: 1.75rem;
  margin-right: 1.75rem;
}

.pa-32px {
  padding: 2rem;
}

.pl-32px {
  padding-left: 2rem;
}

.pr-32px {
  padding-right: 2rem;
}

.pb-32px {
  padding-bottom: 2rem;
}

.pt-32px {
  padding-top: 2rem;
}

.py-32px {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.px-32px {
  padding-left: 2rem;
  padding-right: 2rem;
}

.ma-32px {
  margin: 2rem;
}

.ml-32px {
  margin-left: 2rem;
}

.mr-32px {
  margin-right: 2rem;
}

.mb-32px {
  margin-bottom: 2rem;
}

.mt-32px {
  margin-top: 2rem;
}

.my-32px {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mx-32px {
  margin-left: 2rem;
  margin-right: 2rem;
}

.pa-36px {
  padding: 2.25rem;
}

.pl-36px {
  padding-left: 2.25rem;
}

.pr-36px {
  padding-right: 2.25rem;
}

.pb-36px {
  padding-bottom: 2.25rem;
}

.pt-36px {
  padding-top: 2.25rem;
}

.py-36px {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.px-36px {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

.ma-36px {
  margin: 2.25rem;
}

.ml-36px {
  margin-left: 2.25rem;
}

.mr-36px {
  margin-right: 2.25rem;
}

.mb-36px {
  margin-bottom: 2.25rem;
}

.mt-36px {
  margin-top: 2.25rem;
}

.my-36px {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

.mx-36px {
  margin-left: 2.25rem;
  margin-right: 2.25rem;
}

.pa-40px {
  padding: 2.5rem;
}

.pl-40px {
  padding-left: 2.5rem;
}

.pr-40px {
  padding-right: 2.5rem;
}

.pb-40px {
  padding-bottom: 2.5rem;
}

.pt-40px {
  padding-top: 2.5rem;
}

.py-40px {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.px-40px {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.ma-40px {
  margin: 2.5rem;
}

.ml-40px {
  margin-left: 2.5rem;
}

.mr-40px {
  margin-right: 2.5rem;
}

.mb-40px {
  margin-bottom: 2.5rem;
}

.mt-40px {
  margin-top: 2.5rem;
}

.my-40px {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.mx-40px {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.pa-44px {
  padding: 2.75rem;
}

.pl-44px {
  padding-left: 2.75rem;
}

.pr-44px {
  padding-right: 2.75rem;
}

.pb-44px {
  padding-bottom: 2.75rem;
}

.pt-44px {
  padding-top: 2.75rem;
}

.py-44px {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

.px-44px {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}

.ma-44px {
  margin: 2.75rem;
}

.ml-44px {
  margin-left: 2.75rem;
}

.mr-44px {
  margin-right: 2.75rem;
}

.mb-44px {
  margin-bottom: 2.75rem;
}

.mt-44px {
  margin-top: 2.75rem;
}

.my-44px {
  margin-top: 2.75rem;
  margin-bottom: 2.75rem;
}

.mx-44px {
  margin-left: 2.75rem;
  margin-right: 2.75rem;
}

.pa-48px {
  padding: 3rem;
}

.pl-48px {
  padding-left: 3rem;
}

.pr-48px {
  padding-right: 3rem;
}

.pb-48px {
  padding-bottom: 3rem;
}

.pt-48px {
  padding-top: 3rem;
}

.py-48px {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.px-48px {
  padding-left: 3rem;
  padding-right: 3rem;
}

.ma-48px {
  margin: 3rem;
}

.ml-48px {
  margin-left: 3rem;
}

.mr-48px {
  margin-right: 3rem;
}

.mb-48px {
  margin-bottom: 3rem;
}

.mt-48px {
  margin-top: 3rem;
}

.my-48px {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.mx-48px {
  margin-left: 3rem;
  margin-right: 3rem;
}

.pa-56px {
  padding: 3.5rem;
}

.pl-56px {
  padding-left: 3.5rem;
}

.pr-56px {
  padding-right: 3.5rem;
}

.pb-56px {
  padding-bottom: 3.5rem;
}

.pt-56px {
  padding-top: 3.5rem;
}

.py-56px {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.px-56px {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

.ma-56px {
  margin: 3.5rem;
}

.ml-56px {
  margin-left: 3.5rem;
}

.mr-56px {
  margin-right: 3.5rem;
}

.mb-56px {
  margin-bottom: 3.5rem;
}

.mt-56px {
  margin-top: 3.5rem;
}

.my-56px {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

.mx-56px {
  margin-left: 3.5rem;
  margin-right: 3.5rem;
}

.pa-60px {
  padding: 3.75rem;
}

.pl-60px {
  padding-left: 3.75rem;
}

.pr-60px {
  padding-right: 3.75rem;
}

.pb-60px {
  padding-bottom: 3.75rem;
}

.pt-60px {
  padding-top: 3.75rem;
}

.py-60px {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}

.px-60px {
  padding-left: 3.75rem;
  padding-right: 3.75rem;
}

.ma-60px {
  margin: 3.75rem;
}

.ml-60px {
  margin-left: 3.75rem;
}

.mr-60px {
  margin-right: 3.75rem;
}

.mb-60px {
  margin-bottom: 3.75rem;
}

.mt-60px {
  margin-top: 3.75rem;
}

.my-60px {
  margin-top: 3.75rem;
  margin-bottom: 3.75rem;
}

.mx-60px {
  margin-left: 3.75rem;
  margin-right: 3.75rem;
}

.pa-3xs {
  padding: 0.125rem;
}

.pl-3xs {
  padding-left: 0.125rem;
}

.pr-3xs {
  padding-right: 0.125rem;
}

.pb-3xs {
  padding-bottom: 0.125rem;
}

.pt-3xs {
  padding-top: 0.125rem;
}

.py-3xs {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.px-3xs {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.ma-3xs {
  margin: 0.125rem;
}

.ml-3xs {
  margin-left: 0.125rem;
}

.mr-3xs {
  margin-right: 0.125rem;
}

.mb-3xs {
  margin-bottom: 0.125rem;
}

.mt-3xs {
  margin-top: 0.125rem;
}

.my-3xs {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.mx-3xs {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.pa-2xs {
  padding: 0.25rem;
}

.pl-2xs {
  padding-left: 0.25rem;
}

.pr-2xs {
  padding-right: 0.25rem;
}

.pb-2xs {
  padding-bottom: 0.25rem;
}

.pt-2xs {
  padding-top: 0.25rem;
}

.py-2xs {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.px-2xs {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.ma-2xs {
  margin: 0.25rem;
}

.ml-2xs {
  margin-left: 0.25rem;
}

.mr-2xs {
  margin-right: 0.25rem;
}

.mb-2xs {
  margin-bottom: 0.25rem;
}

.mt-2xs {
  margin-top: 0.25rem;
}

.my-2xs {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.mx-2xs {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.pa-xs {
  padding: 0.5rem;
}

.pl-xs {
  padding-left: 0.5rem;
}

.pr-xs {
  padding-right: 0.5rem;
}

.pb-xs {
  padding-bottom: 0.5rem;
}

.pt-xs {
  padding-top: 0.5rem;
}

.py-xs {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-xs {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.ma-xs {
  margin: 0.5rem;
}

.ml-xs {
  margin-left: 0.5rem;
}

.mr-xs {
  margin-right: 0.5rem;
}

.mb-xs {
  margin-bottom: 0.5rem;
}

.mt-xs {
  margin-top: 0.5rem;
}

.my-xs {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mx-xs {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.pa-s {
  padding: 1rem;
}

.pl-s {
  padding-left: 1rem;
}

.pr-s {
  padding-right: 1rem;
}

.pb-s {
  padding-bottom: 1rem;
}

.pt-s {
  padding-top: 1rem;
}

.py-s {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-s {
  padding-left: 1rem;
  padding-right: 1rem;
}

.ma-s {
  margin: 1rem;
}

.ml-s {
  margin-left: 1rem;
}

.mr-s {
  margin-right: 1rem;
}

.mb-s {
  margin-bottom: 1rem;
}

.mt-s {
  margin-top: 1rem;
}

.my-s {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mx-s {
  margin-left: 1rem;
  margin-right: 1rem;
}

.pa-m {
  padding: 2rem;
}

.pl-m {
  padding-left: 2rem;
}

.pr-m {
  padding-right: 2rem;
}

.pb-m {
  padding-bottom: 2rem;
}

.pt-m {
  padding-top: 2rem;
}

.py-m {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.px-m {
  padding-left: 2rem;
  padding-right: 2rem;
}

.ma-m {
  margin: 2rem;
}

.ml-m {
  margin-left: 2rem;
}

.mr-m {
  margin-right: 2rem;
}

.mb-m {
  margin-bottom: 2rem;
}

.mt-m {
  margin-top: 2rem;
}

.my-m {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mx-m {
  margin-left: 2rem;
  margin-right: 2rem;
}

.pa-l {
  padding: 4rem;
}

.pl-l {
  padding-left: 4rem;
}

.pr-l {
  padding-right: 4rem;
}

.pb-l {
  padding-bottom: 4rem;
}

.pt-l {
  padding-top: 4rem;
}

.py-l {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.px-l {
  padding-left: 4rem;
  padding-right: 4rem;
}

.ma-l {
  margin: 4rem;
}

.ml-l {
  margin-left: 4rem;
}

.mr-l {
  margin-right: 4rem;
}

.mb-l {
  margin-bottom: 4rem;
}

.mt-l {
  margin-top: 4rem;
}

.my-l {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.mx-l {
  margin-left: 4rem;
  margin-right: 4rem;
}

.pa-xl {
  padding: 8rem;
}

.pl-xl {
  padding-left: 8rem;
}

.pr-xl {
  padding-right: 8rem;
}

.pb-xl {
  padding-bottom: 8rem;
}

.pt-xl {
  padding-top: 8rem;
}

.py-xl {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.px-xl {
  padding-left: 8rem;
  padding-right: 8rem;
}

.ma-xl {
  margin: 8rem;
}

.ml-xl {
  margin-left: 8rem;
}

.mr-xl {
  margin-right: 8rem;
}

.mb-xl {
  margin-bottom: 8rem;
}

.mt-xl {
  margin-top: 8rem;
}

.my-xl {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.mx-xl {
  margin-left: 8rem;
  margin-right: 8rem;
}

.pa-2xl {
  padding: 16rem;
}

.pl-2xl {
  padding-left: 16rem;
}

.pr-2xl {
  padding-right: 16rem;
}

.pb-2xl {
  padding-bottom: 16rem;
}

.pt-2xl {
  padding-top: 16rem;
}

.py-2xl {
  padding-top: 16rem;
  padding-bottom: 16rem;
}

.px-2xl {
  padding-left: 16rem;
  padding-right: 16rem;
}

.ma-2xl {
  margin: 16rem;
}

.ml-2xl {
  margin-left: 16rem;
}

.mr-2xl {
  margin-right: 16rem;
}

.mb-2xl {
  margin-bottom: 16rem;
}

.mt-2xl {
  margin-top: 16rem;
}

.my-2xl {
  margin-top: 16rem;
  margin-bottom: 16rem;
}

.mx-2xl {
  margin-left: 16rem;
  margin-right: 16rem;
}

.pa-3xl {
  padding: 32rem;
}

.pl-3xl {
  padding-left: 32rem;
}

.pr-3xl {
  padding-right: 32rem;
}

.pb-3xl {
  padding-bottom: 32rem;
}

.pt-3xl {
  padding-top: 32rem;
}

.py-3xl {
  padding-top: 32rem;
  padding-bottom: 32rem;
}

.px-3xl {
  padding-left: 32rem;
  padding-right: 32rem;
}

.ma-3xl {
  margin: 32rem;
}

.ml-3xl {
  margin-left: 32rem;
}

.mr-3xl {
  margin-right: 32rem;
}

.mb-3xl {
  margin-bottom: 32rem;
}

.mt-3xl {
  margin-top: 32rem;
}

.my-3xl {
  margin-top: 32rem;
  margin-bottom: 32rem;
}

.mx-3xl {
  margin-left: 32rem;
  margin-right: 32rem;
}

.pa-4xl {
  padding: 64rem;
}

.pl-4xl {
  padding-left: 64rem;
}

.pr-4xl {
  padding-right: 64rem;
}

.pb-4xl {
  padding-bottom: 64rem;
}

.pt-4xl {
  padding-top: 64rem;
}

.py-4xl {
  padding-top: 64rem;
  padding-bottom: 64rem;
}

.px-4xl {
  padding-left: 64rem;
  padding-right: 64rem;
}

.ma-4xl {
  margin: 64rem;
}

.ml-4xl {
  margin-left: 64rem;
}

.mr-4xl {
  margin-right: 64rem;
}

.mb-4xl {
  margin-bottom: 64rem;
}

.mt-4xl {
  margin-top: 64rem;
}

.my-4xl {
  margin-top: 64rem;
  margin-bottom: 64rem;
}

.mx-4xl {
  margin-left: 64rem;
  margin-right: 64rem;
}

.pa-0 {
  padding: 0;
}

.pl-0 {
  padding-left: 0;
}

.pr-0 {
  padding-right: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pt-0 {
  padding-top: 0;
}

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

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

.ma-0 {
  margin: 0;
}

.ml-0 {
  margin-left: 0;
}

.mr-0 {
  margin-right: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-0 {
  margin-top: 0;
}

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

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

.pa-auto {
  padding: auto;
}

.pl-auto {
  padding-left: auto;
}

.pr-auto {
  padding-right: auto;
}

.pb-auto {
  padding-bottom: auto;
}

.pt-auto {
  padding-top: auto;
}

.py-auto {
  padding-top: auto;
  padding-bottom: auto;
}

.px-auto {
  padding-left: auto;
  padding-right: auto;
}

.ma-auto {
  margin: auto;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.mt-auto {
  margin-top: auto;
}

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

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

/*
  WIDTHS, HEIGHTS
 */
.w-px {
  width: var(--spacing-px);
}

.max-w-px {
  max-width: var(--spacing-px);
}

.min-w-px {
  min-width: var(--spacing-px);
}

.w-2px {
  width: var(--spacing-2px);
}

.max-w-2px {
  max-width: var(--spacing-2px);
}

.min-w-2px {
  min-width: var(--spacing-2px);
}

.w-4px {
  width: var(--spacing-4px);
}

.max-w-4px {
  max-width: var(--spacing-4px);
}

.min-w-4px {
  min-width: var(--spacing-4px);
}

.w-6px {
  width: var(--spacing-6px);
}

.max-w-6px {
  max-width: var(--spacing-6px);
}

.min-w-6px {
  min-width: var(--spacing-6px);
}

.w-8px {
  width: var(--spacing-8px);
}

.max-w-8px {
  max-width: var(--spacing-8px);
}

.min-w-8px {
  min-width: var(--spacing-8px);
}

.w-10px {
  width: var(--spacing-10px);
}

.max-w-10px {
  max-width: var(--spacing-10px);
}

.min-w-10px {
  min-width: var(--spacing-10px);
}

.w-12px {
  width: var(--spacing-12px);
}

.max-w-12px {
  max-width: var(--spacing-12px);
}

.min-w-12px {
  min-width: var(--spacing-12px);
}

.w-14px {
  width: var(--spacing-14px);
}

.max-w-14px {
  max-width: var(--spacing-14px);
}

.min-w-14px {
  min-width: var(--spacing-14px);
}

.w-16px {
  width: var(--spacing-16px);
}

.max-w-16px {
  max-width: var(--spacing-16px);
}

.min-w-16px {
  min-width: var(--spacing-16px);
}

.w-20px {
  width: var(--spacing-20px);
}

.max-w-20px {
  max-width: var(--spacing-20px);
}

.min-w-20px {
  min-width: var(--spacing-20px);
}

.w-24px {
  width: var(--spacing-24px);
}

.max-w-24px {
  max-width: var(--spacing-24px);
}

.min-w-24px {
  min-width: var(--spacing-24px);
}

.w-28px {
  width: var(--spacing-28px);
}

.max-w-28px {
  max-width: var(--spacing-28px);
}

.min-w-28px {
  min-width: var(--spacing-28px);
}

.w-32px {
  width: var(--spacing-32px);
}

.max-w-32px {
  max-width: var(--spacing-32px);
}

.min-w-32px {
  min-width: var(--spacing-32px);
}

.w-36px {
  width: var(--spacing-36px);
}

.max-w-36px {
  max-width: var(--spacing-36px);
}

.min-w-36px {
  min-width: var(--spacing-36px);
}

.w-40px {
  width: var(--spacing-40px);
}

.max-w-40px {
  max-width: var(--spacing-40px);
}

.min-w-40px {
  min-width: var(--spacing-40px);
}

.w-44px {
  width: var(--spacing-44px);
}

.max-w-44px {
  max-width: var(--spacing-44px);
}

.min-w-44px {
  min-width: var(--spacing-44px);
}

.w-48px {
  width: var(--spacing-48px);
}

.max-w-48px {
  max-width: var(--spacing-48px);
}

.min-w-48px {
  min-width: var(--spacing-48px);
}

.w-56px {
  width: var(--spacing-56px);
}

.max-w-56px {
  max-width: var(--spacing-56px);
}

.min-w-56px {
  min-width: var(--spacing-56px);
}

.w-60px {
  width: var(--spacing-60px);
}

.max-w-60px {
  max-width: var(--spacing-60px);
}

.min-w-60px {
  min-width: var(--spacing-60px);
}

.w-3xs {
  width: var(--spacing-3xs);
}

.max-w-3xs {
  max-width: var(--spacing-3xs);
}

.min-w-3xs {
  min-width: var(--spacing-3xs);
}

.w-2xs {
  width: var(--spacing-2xs);
}

.max-w-2xs {
  max-width: var(--spacing-2xs);
}

.min-w-2xs {
  min-width: var(--spacing-2xs);
}

.w-xs {
  width: var(--spacing-xs);
}

.max-w-xs {
  max-width: var(--spacing-xs);
}

.min-w-xs {
  min-width: var(--spacing-xs);
}

.w-s {
  width: var(--spacing-s);
}

.max-w-s {
  max-width: var(--spacing-s);
}

.min-w-s {
  min-width: var(--spacing-s);
}

.w-m {
  width: var(--spacing-m);
}

.max-w-m {
  max-width: var(--spacing-m);
}

.min-w-m {
  min-width: var(--spacing-m);
}

.w-l {
  width: var(--spacing-l);
}

.max-w-l {
  max-width: var(--spacing-l);
}

.min-w-l {
  min-width: var(--spacing-l);
}

.w-xl {
  width: var(--spacing-xl);
}

.max-w-xl {
  max-width: var(--spacing-xl);
}

.min-w-xl {
  min-width: var(--spacing-xl);
}

.w-2xl {
  width: var(--spacing-2xl);
}

.max-w-2xl {
  max-width: var(--spacing-2xl);
}

.min-w-2xl {
  min-width: var(--spacing-2xl);
}

.w-3xl {
  width: var(--spacing-3xl);
}

.max-w-3xl {
  max-width: var(--spacing-3xl);
}

.min-w-3xl {
  min-width: var(--spacing-3xl);
}

.w-4xl {
  width: var(--spacing-4xl);
}

.max-w-4xl {
  max-width: var(--spacing-4xl);
}

.min-w-4xl {
  min-width: var(--spacing-4xl);
}

.w-25 {
  width: var(--spacing-25);
}

.max-w-25 {
  max-width: var(--spacing-25);
}

.min-w-25 {
  min-width: var(--spacing-25);
}

.w-50 {
  width: var(--spacing-50);
}

.max-w-50 {
  max-width: var(--spacing-50);
}

.min-w-50 {
  min-width: var(--spacing-50);
}

.w-75 {
  width: var(--spacing-75);
}

.max-w-75 {
  max-width: var(--spacing-75);
}

.min-w-75 {
  min-width: var(--spacing-75);
}

.w-100 {
  width: var(--spacing-100);
}

.max-w-100 {
  max-width: var(--spacing-100);
}

.min-w-100 {
  min-width: var(--spacing-100);
}

.w-third {
  width: var(--spacing-third);
}

.max-w-third {
  max-width: var(--spacing-third);
}

.min-w-third {
  min-width: var(--spacing-third);
}

.w-two-thirds {
  width: var(--spacing-two-thirds);
}

.max-w-two-thirds {
  max-width: var(--spacing-two-thirds);
}

.min-w-two-thirds {
  min-width: var(--spacing-two-thirds);
}

.w-auto {
  width: var(--spacing-auto);
}

.max-w-auto {
  max-width: var(--spacing-auto);
}

.min-w-auto {
  min-width: var(--spacing-auto);
}

.h-px {
  height: var(--spacing-px);
}

.max-h-px {
  max-height: var(--spacing-px);
}

.min-h-px {
  min-height: var(--spacing-px);
}

.h-2px {
  height: var(--spacing-2px);
}

.max-h-2px {
  max-height: var(--spacing-2px);
}

.min-h-2px {
  min-height: var(--spacing-2px);
}

.h-4px {
  height: var(--spacing-4px);
}

.max-h-4px {
  max-height: var(--spacing-4px);
}

.min-h-4px {
  min-height: var(--spacing-4px);
}

.h-6px {
  height: var(--spacing-6px);
}

.max-h-6px {
  max-height: var(--spacing-6px);
}

.min-h-6px {
  min-height: var(--spacing-6px);
}

.h-8px {
  height: var(--spacing-8px);
}

.max-h-8px {
  max-height: var(--spacing-8px);
}

.min-h-8px {
  min-height: var(--spacing-8px);
}

.h-10px {
  height: var(--spacing-10px);
}

.max-h-10px {
  max-height: var(--spacing-10px);
}

.min-h-10px {
  min-height: var(--spacing-10px);
}

.h-12px {
  height: var(--spacing-12px);
}

.max-h-12px {
  max-height: var(--spacing-12px);
}

.min-h-12px {
  min-height: var(--spacing-12px);
}

.h-14px {
  height: var(--spacing-14px);
}

.max-h-14px {
  max-height: var(--spacing-14px);
}

.min-h-14px {
  min-height: var(--spacing-14px);
}

.h-16px {
  height: var(--spacing-16px);
}

.max-h-16px {
  max-height: var(--spacing-16px);
}

.min-h-16px {
  min-height: var(--spacing-16px);
}

.h-20px {
  height: var(--spacing-20px);
}

.max-h-20px {
  max-height: var(--spacing-20px);
}

.min-h-20px {
  min-height: var(--spacing-20px);
}

.h-24px {
  height: var(--spacing-24px);
}

.max-h-24px {
  max-height: var(--spacing-24px);
}

.min-h-24px {
  min-height: var(--spacing-24px);
}

.h-28px {
  height: var(--spacing-28px);
}

.max-h-28px {
  max-height: var(--spacing-28px);
}

.min-h-28px {
  min-height: var(--spacing-28px);
}

.h-32px {
  height: var(--spacing-32px);
}

.max-h-32px {
  max-height: var(--spacing-32px);
}

.min-h-32px {
  min-height: var(--spacing-32px);
}

.h-36px {
  height: var(--spacing-36px);
}

.max-h-36px {
  max-height: var(--spacing-36px);
}

.min-h-36px {
  min-height: var(--spacing-36px);
}

.h-40px {
  height: var(--spacing-40px);
}

.max-h-40px {
  max-height: var(--spacing-40px);
}

.min-h-40px {
  min-height: var(--spacing-40px);
}

.h-44px {
  height: var(--spacing-44px);
}

.max-h-44px {
  max-height: var(--spacing-44px);
}

.min-h-44px {
  min-height: var(--spacing-44px);
}

.h-48px {
  height: var(--spacing-48px);
}

.max-h-48px {
  max-height: var(--spacing-48px);
}

.min-h-48px {
  min-height: var(--spacing-48px);
}

.h-56px {
  height: var(--spacing-56px);
}

.max-h-56px {
  max-height: var(--spacing-56px);
}

.min-h-56px {
  min-height: var(--spacing-56px);
}

.h-60px {
  height: var(--spacing-60px);
}

.max-h-60px {
  max-height: var(--spacing-60px);
}

.min-h-60px {
  min-height: var(--spacing-60px);
}

.h-3xs {
  height: var(--spacing-3xs);
}

.max-h-3xs {
  max-height: var(--spacing-3xs);
}

.min-h-3xs {
  min-height: var(--spacing-3xs);
}

.h-2xs {
  height: var(--spacing-2xs);
}

.max-h-2xs {
  max-height: var(--spacing-2xs);
}

.min-h-2xs {
  min-height: var(--spacing-2xs);
}

.h-xs {
  height: var(--spacing-xs);
}

.max-h-xs {
  max-height: var(--spacing-xs);
}

.min-h-xs {
  min-height: var(--spacing-xs);
}

.h-s {
  height: var(--spacing-s);
}

.max-h-s {
  max-height: var(--spacing-s);
}

.min-h-s {
  min-height: var(--spacing-s);
}

.h-m {
  height: var(--spacing-m);
}

.max-h-m {
  max-height: var(--spacing-m);
}

.min-h-m {
  min-height: var(--spacing-m);
}

.h-l {
  height: var(--spacing-l);
}

.max-h-l {
  max-height: var(--spacing-l);
}

.min-h-l {
  min-height: var(--spacing-l);
}

.h-xl {
  height: var(--spacing-xl);
}

.max-h-xl {
  max-height: var(--spacing-xl);
}

.min-h-xl {
  min-height: var(--spacing-xl);
}

.h-2xl {
  height: var(--spacing-2xl);
}

.max-h-2xl {
  max-height: var(--spacing-2xl);
}

.min-h-2xl {
  min-height: var(--spacing-2xl);
}

.h-3xl {
  height: var(--spacing-3xl);
}

.max-h-3xl {
  max-height: var(--spacing-3xl);
}

.min-h-3xl {
  min-height: var(--spacing-3xl);
}

.h-4xl {
  height: var(--spacing-4xl);
}

.max-h-4xl {
  max-height: var(--spacing-4xl);
}

.min-h-4xl {
  min-height: var(--spacing-4xl);
}

.h-25 {
  height: var(--spacing-25);
}

.max-h-25 {
  max-height: var(--spacing-25);
}

.min-h-25 {
  min-height: var(--spacing-25);
}

.h-50 {
  height: var(--spacing-50);
}

.max-h-50 {
  max-height: var(--spacing-50);
}

.min-h-50 {
  min-height: var(--spacing-50);
}

.h-75 {
  height: var(--spacing-75);
}

.max-h-75 {
  max-height: var(--spacing-75);
}

.min-h-75 {
  min-height: var(--spacing-75);
}

.h-100 {
  height: var(--spacing-100);
}

.max-h-100 {
  max-height: var(--spacing-100);
}

.min-h-100 {
  min-height: var(--spacing-100);
}

.h-third {
  height: var(--spacing-third);
}

.max-h-third {
  max-height: var(--spacing-third);
}

.min-h-third {
  min-height: var(--spacing-third);
}

.h-two-thirds {
  height: var(--spacing-two-thirds);
}

.max-h-two-thirds {
  max-height: var(--spacing-two-thirds);
}

.min-h-two-thirds {
  min-height: var(--spacing-two-thirds);
}

.h-auto {
  height: var(--spacing-auto);
}

.max-h-auto {
  max-height: var(--spacing-auto);
}

.min-h-auto {
  min-height: var(--spacing-auto);
}

hstack {
  display: flex;
  align-self: stretch;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

hstack[shrink] > * {
  flex: 2 2;
}

hstack[spacing=xl] > * {
  margin-right: var(--spacing-xl);
}

hstack[spacing=l] > * {
  margin-right: var(--spacing-l);
}

hstack[spacing=m] > * {
  margin-right: var(--spacing-m);
}

hstack[spacing=s] > * {
  margin-right: var(--spacing-s);
}

hstack[spacing=xs] > * {
  margin-right: var(--spacing-xs);
}

hstack[spacing="2xs"] > * {
  margin-right: var(--spacing-2xs);
}

hstack[spacing] > :last-child {
  margin-right: 0;
}

hstack[align-y=top] {
  align-items: flex-start;
}

hstack[align-y=center] {
  align-items: center;
}

hstack[align-y=bottom] {
  align-items: flex-end;
}

hstack[align-x=left] {
  justify-content: flex-start;
}

hstack[align-x=center] {
  justify-content: center;
}

hstack[align-x=right] {
  justify-content: flex-end;
}

vstack {
  display: flex;
  align-self: stretch;
  flex-direction: column;
}

vstack[spacing=xl] > * {
  margin-bottom: var(--spacing-xl);
}

vstack[spacing=l] > * {
  margin-bottom: var(--spacing-l);
}

vstack[spacing=m] > * {
  margin-bottom: var(--spacing-m);
}

vstack[spacing=s] > * {
  margin-bottom: var(--spacing-s);
}

vstack[spacing=xs] > * {
  margin-bottom: var(--spacing-xs);
}

vstack[spacing="2xs"] > * {
  margin-bottom: var(--spacing-2xs);
}

vstack[spacing] > :last-child {
  margin-bottom: 0;
}

vstack[align-x=left] {
  align-items: flex-start;
}

vstack[align-x=center] {
  align-items: center;
}

vstack[align-x=right] {
  align-items: flex-end;
}

vstack[align-y=top] {
  justify-content: flex-start;
}

vstack[align-y=center] {
  justify-content: center;
}

vstack[align-y=bottom] {
  justify-content: flex-end;
}

:root {
  --spacing-px: 0.0625rem;
  --spacing-2px: 0.125rem;
  --spacing-4px: 0.25rem;
  --spacing-6px: 0.375rem;
  --spacing-8px: 0.5rem;
  --spacing-10px: 0.625rem;
  --spacing-12px: 0.75rem;
  --spacing-14px: 0.875rem;
  --spacing-16px: 1rem;
  --spacing-20px: 1.25rem;
  --spacing-24px: 1.5rem;
  --spacing-28px: 1.75rem;
  --spacing-32px: 2rem;
  --spacing-36px: 2.25rem;
  --spacing-40px: 2.5rem;
  --spacing-44px: 2.75rem;
  --spacing-48px: 3rem;
  --spacing-56px: 3.5rem;
  --spacing-60px: 3.75rem;
  --spacing-3xs: 0.125rem;
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-s: 1rem;
  --spacing-m: 2rem;
  --spacing-l: 4rem;
  --spacing-xl: 8rem;
  --spacing-2xl: 16rem;
  --spacing-3xl: 32rem;
  --spacing-4xl: 64rem;
  --font: "Roboto Mono", "Roboto Mono", "Vazirmatn", monospace;
  --highlight: #efdb43;
  --black: #000000;
  --bg-color: #2f3338;
  --main-color: #d6d2bc;
  --caret-color: #d6d2bc;
  --sub-alt-color: #3a3c3d;
  --sub-color: #8f8e84;
  --text-color: #d6d2bc;
  --success-color: #05aa6d;
  --success-extra-color: #028f5b;
  --info-color: #2196f3;
  --info-extra-color: #0d75ca;
  --error-color: #ff4a59;
  --error-extra-color: #c43c53;
}
:root .light-theme {
  --bg-color: #efead0;
  --main-color: #5f605e;
  --caret-color: #5f605e;
  --sub-color: #8f8e84;
  --sub-alt-color: #dbd6c4;
  --text-color: #333538;
  --success-color: #05aa6d;
  --success-extra-color: #028f5b;
  --info-color: #2196f3;
  --info-extra-color: #0d75ca;
  --error-color: #c43c53;
  --error-extra-color: #a52632;
}

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

body {
  margin: 0 auto;
  max-width: 969px;
  padding: var(--spacing-m);
  font-family: var(--font);
  line-height: 1.4;
  color: var(--text-color);
  background: var(--bg-color);
}

.shrink {
  flex: 2 2;
}

input,
textarea {
  outline: none;
  border: none;
  border-radius: var(--spacing-2xs);
  background: var(--sub-alt-color);
  color: var(--text-color);
  padding: 0.5em;
  font-size: 1em;
  font-family: var(--font);
  caret-color: var(--main-color);
  line-height: 1.25em;
}
input:disabled,
textarea:disabled {
  opacity: 0.3;
}

input:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 0.1rem var(--bg-color), 0 0 0 0.2rem var(--text-color);
}

textarea {
  resize: vertical;
  width: 100%;
  padding: 10px;
  line-height: 1.2rem;
  min-height: 3rem;
  max-height: 16rem;
}

:autofill,
:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus,
:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-color);
  -webkit-box-shadow: 0 0 0 1000px var(--sub-alt-color) inset !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

::-moz-selection {
  background: var(--text-color);
  color: var(--sub-alt-color);
}

::selection {
  background-color: var(--main-color);
  color: var(--sub-alt-color);
}

blockquote {
  border-left: 4px solid var(--main-color);
  margin: 0;
  padding: 0.5rem 1rem;
  font-style: italic;
}

blockquote > footer {
  margin-left: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--main-color);
  border: 0;
}

blockquote cite {
  font-style: normal;
}

h1 {
  font-size: 1.8rem;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {
  font-weight: 600;
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: help;
}

small {
  font-size: x-small;
}

sub {
  font-size: x-small;
}

sup {
  font-size: x-small;
}

var {
  font-size: small;
}

ol,
ul,
dl {
  margin: 0;
}

dt {
  font-size: large;
  font-weight: 600;
}

dd {
  margin-left: var(--spacing-28px);
  margin-top: var(--spacing-10px);
}

mark {
  background-color: var(--highlight);
  border-radius: var(--spacing-4px);
  padding: var(--spacing-px);
  color: var(--black);
}

kbd {
  color: var(--bg-color);
  background-color: var(--sub-color);
  border-radius: var(--spacing-2px);
  padding: 0.2rem 0.3rem;
  margin: 0;
  display: inline-block;
  font-size: 0.7rem;
  line-height: 0.7rem;
}

.textButton {
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 1rem;
}

button,
.button,
input[type=button],
input[type=reset],
input[type=submit] {
  text-align: center;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.125s, color 0.125s, opacity 0.125s;
  padding: 0.5em;
  border-radius: var(--spacing-xs);
  background: var(--sub-alt-color);
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  align-content: center;
  height: -moz-min-content;
  height: min-content;
  line-height: 1.25;
  appearance: none;
  border: none;
  font-family: inherit;
  font-size: 1em;
  display: inline-flex;
  gap: 0.5em;
  align-items: baseline;
  justify-content: center;
}
button.outline,
.button.outline,
input[type=button].outline,
input[type=reset].outline,
input[type=submit].outline {
  border: 2px solid var(--text-color);
  background: var(--bg-color);
  color: var(--text-color);
}
button.outline.success,
.button.outline.success,
input[type=button].outline.success,
input[type=reset].outline.success,
input[type=submit].outline.success {
  border: 2px solid var(--success-color);
  background: var(--bg-color);
  color: var(--success-color);
}
button.outline.success:hover,
.button.outline.success:hover,
input[type=button].outline.success:hover,
input[type=reset].outline.success:hover,
input[type=submit].outline.success:hover {
  border: 2px solid var(--success-color);
  background: var(--success-color);
  color: var(--bg-color);
}
button.outline.info,
.button.outline.info,
input[type=button].outline.info,
input[type=reset].outline.info,
input[type=submit].outline.info {
  border: 2px solid var(--info-color);
  background: var(--bg-color);
  color: var(--info-color);
}
button.outline.info:hover,
.button.outline.info:hover,
input[type=button].outline.info:hover,
input[type=reset].outline.info:hover,
input[type=submit].outline.info:hover {
  border: 2px solid var(--info-color);
  background: var(--info-color);
  color: var(--bg-color);
}
button.outline.danger,
.button.outline.danger,
input[type=button].outline.danger,
input[type=reset].outline.danger,
input[type=submit].outline.danger {
  border: 2px solid var(--error-color);
  background: var(--bg-color);
  color: var(--error-color);
}
button.outline.danger:hover,
.button.outline.danger:hover,
input[type=button].outline.danger:hover,
input[type=reset].outline.danger:hover,
input[type=submit].outline.danger:hover {
  border: 2px solid var(--error-color);
  background: var(--error-color);
  color: var(--bg-color);
}
button.text,
.button.text,
input[type=button].text,
input[type=reset].text,
input[type=submit].text {
  background: var(--bg-color);
  color: var(--text-color);
}
button.text:hover,
.button.text:hover,
input[type=button].text:hover,
input[type=reset].text:hover,
input[type=submit].text:hover {
  color: var(--text-color);
  background: var(--sub-alt-color);
}
button.text:active,
.button.text:active,
input[type=button].text:active,
input[type=reset].text:active,
input[type=submit].text:active {
  opacity: 0.8;
  color: var(--text-color);
}
button.link,
.button.link,
input[type=button].link,
input[type=reset].link,
input[type=submit].link {
  background: none;
  color: var(--sub-color);
}
button.link:hover,
.button.link:hover,
input[type=button].link:hover,
input[type=reset].link:hover,
input[type=submit].link:hover {
  background: none;
  color: var(--text-color);
}
button.link:active,
.button.link:active,
input[type=button].link:active,
input[type=reset].link:active,
input[type=submit].link:active {
  color: var(--sub-color);
}
button.active,
.button.active,
input[type=button].active,
input[type=reset].active,
input[type=submit].active {
  background: var(--main-color);
  color: var(--bg-color);
}
button.active:hover,
.button.active:hover,
input[type=button].active:hover,
input[type=reset].active:hover,
input[type=submit].active:hover {
  background: var(--text-color);
}
button.active:active,
.button.active:active,
input[type=button].active:active,
input[type=reset].active:active,
input[type=submit].active:active {
  background: var(--sub-color);
  color: var(--bg-color);
}
button.success,
.button.success,
input[type=button].success,
input[type=reset].success,
input[type=submit].success {
  background: var(--success-color);
  color: var(--bg-color);
}
button.success:hover,
.button.success:hover,
input[type=button].success:hover,
input[type=reset].success:hover,
input[type=submit].success:hover {
  background: var(--success-extra-color);
}
button.success:active,
.button.success:active,
input[type=button].success:active,
input[type=reset].success:active,
input[type=submit].success:active {
  background: var(--success-extra-color);
  opacity: 0.8;
}
button.info,
.button.info,
input[type=button].info,
input[type=reset].info,
input[type=submit].info {
  background: var(--info-color);
  color: var(--bg-color);
}
button.info:hover,
.button.info:hover,
input[type=button].info:hover,
input[type=reset].info:hover,
input[type=submit].info:hover {
  background: var(--info-extra-color);
}
button.info:active,
.button.info:active,
input[type=button].info:active,
input[type=reset].info:active,
input[type=submit].info:active {
  background: var(--info-extra-color);
  opacity: 0.8;
}
button.danger,
.button.danger,
input[type=button].danger,
input[type=reset].danger,
input[type=submit].danger {
  background: var(--error-color);
  color: var(--bg-color);
}
button.danger:hover,
.button.danger:hover,
input[type=button].danger:hover,
input[type=reset].danger:hover,
input[type=submit].danger:hover {
  background: var(--error-extra-color);
}
button.danger:active,
.button.danger:active,
input[type=button].danger:active,
input[type=reset].danger:active,
input[type=submit].danger:active {
  background: var(--error-extra-color);
  opacity: 0.8;
}
button[disabled], button.disabled,
.button[disabled],
.button.disabled,
input[type=button][disabled],
input[type=button].disabled,
input[type=reset][disabled],
input[type=reset].disabled,
input[type=submit][disabled],
input[type=submit].disabled {
  opacity: 0.33;
  pointer-events: none;
}
button[disabled]:hover, button.disabled:hover,
.button[disabled]:hover,
.button.disabled:hover,
input[type=button][disabled]:hover,
input[type=button].disabled:hover,
input[type=reset][disabled]:hover,
input[type=reset].disabled:hover,
input[type=submit][disabled]:hover,
input[type=submit].disabled:hover {
  background: var(--text-color);
  outline: none;
}
button[disabled]:active, button.disabled:active,
.button[disabled]:active,
.button.disabled:active,
input[type=button][disabled]:active,
input[type=button].disabled:active,
input[type=reset][disabled]:active,
input[type=reset].disabled:active,
input[type=submit][disabled]:active,
input[type=submit].disabled:active {
  background: var(--sub-color);
  color: var(--bg-color);
}
button:hover,
.button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
  color: var(--bg-color);
  background: var(--text-color);
  outline: none;
}
button:focus-visible,
.button:focus-visible,
input[type=button]:focus-visible,
input[type=reset]:focus-visible,
input[type=submit]:focus-visible {
  box-shadow: 0 0 0 0.1rem var(--bg-color), 0 0 0 0.2rem var(--text-color);
  outline: none;
}
button:active,
.button:active,
input[type=button]:active,
input[type=reset]:active,
input[type=submit]:active {
  background: var(--sub-color);
  color: var(--bg-color);
}
button[smallest],
.button[smallest],
input[type=button][smallest],
input[type=reset][smallest],
input[type=submit][smallest] {
  padding: 0.3rem 0.5rem;
  font-size: 0.65rem;
}
button[small],
.button[small],
input[type=button][small],
input[type=reset][small],
input[type=submit][small] {
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
}
button[large],
.button[large],
input[type=button][large],
input[type=reset][large],
input[type=submit][large] {
  padding: 0.4rem 0.8rem;
  font-size: 1.5rem;
}
button[largest],
.button[largest],
input[type=button][largest],
input[type=reset][largest],
input[type=submit][largest] {
  padding: 0.6rem 1.2rem;
  font-size: 1.7rem;
}

a {
  display: inline-block;
  color: var(--sub-color);
  transition: color 0.125s, opacity 0.125s, background 0.125s;
}
a.text, a.button {
  height: min-content;
  line-height: 1.25;
  display: inline-flex;
  gap: 0.5em;
  text-decoration: none;
  align-items: center;
}
a.text:focus-visible, a.button:focus-visible {
  border-radius: var(--spacing-xs);
}
a:hover {
  color: var(--text-color);
}
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.1rem var(--bg-color), 0 0 0 0.2rem var(--text-color);
  border-radius: calc(var(--spacing-xs) / 2);
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

fieldset[bordered] {
  border: 2px solid var(--main-color);
  border-radius: var(--spacing-6px);
  padding: 10px;
}

legend {
  margin-bottom: var(--spacing-8px);
}

label {
  width: fit-content;
  display: block;
}

label:has([type=checkbox], [type=radio]) {
  cursor: pointer;
}

label:has([type=checkbox]:disabled, [type=radio]:disabled) {
  cursor: default;
  opacity: 0.3;
}

input[type=checkbox]:indeterminate,
input[type=radio]:indeterminate {
  opacity: 0.5;
}

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  padding: var(--spacing-4px);
  margin: var(--spacing-4px);
  cursor: pointer;
  vertical-align: middle;
  background: var(--bg-color);
  box-shadow: 0 0 0 0.11rem var(--main-color);
  border: var(--spacing-4px) solid var(--bg-color);
  border-radius: var(--spacing-4px);
}
input[type=checkbox]:checked {
  background: var(--main-color);
  height: 0.8rem;
  width: 0.75rem;
}
input[type=checkbox]:disabled {
  cursor: default;
  opacity: 0.3;
}
input[type=checkbox]:disabled ~ label {
  cursor: default;
}

input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  padding: var(--spacing-4px);
  margin: var(--spacing-4px);
  cursor: pointer;
  vertical-align: middle;
  background: var(--bg-color);
  box-shadow: 0 0 0 0.11rem var(--main-color);
  border: var(--spacing-4px) solid var(--bg-color);
  border-radius: 100%;
}
input[type=radio]:checked {
  background: var(--main-color);
  height: 0.8rem;
  width: 0.75rem;
}
input[type=radio]:disabled {
  cursor: default;
  opacity: 0.3;
}
input[type=radio]:disabled ~ label {
  cursor: default;
}

[type=checkbox] ~ label,
[type=radio] ~ label {
  margin-bottom: 0;
  display: inline-block;
  cursor: pointer;
}
[type=checkbox] ~ label:disabled,
[type=radio] ~ label:disabled {
  opacity: 0.3;
}

[type=checkbox]:disabled ~ label,
[type=radio]:disabled ~ label {
  opacity: 0.3;
}