/*Colors and main styling*/

* {
  --color-shades-blue-100: #E8FDFF;
  --color-shades-blue-200: #A2E3F7;
  --color-shades-blue-300: #5DC8E5;
  --color-shades-blue-400: #00ABCF;
  --color-shades-blue-500: #008AAB;
  --color-shades-blue-600: #006A85;
  --color-shades-blue-700: #004C60;
  --color-shades-blue-800: #002F3D;
  --color-shades-blue-900: #00151D;
  --color-shades-purple-50: #F8F5FF;
  --color-shades-purple-100: #D9CEFF;
  --color-shades-purple-200: #BBA6FF;
  --color-shades-purple-300: #9E7FFA;
  --color-shades-purple-400: #815CDF;
  --color-shades-purple-500: #6441B6;
  --color-shades-purple-600: #472D84;
  --color-shades-purple-700: #2C1C52;
  --color-shades-purple-800: #130C26;
  --color-shades-yellow-50: #FFFBED;
  --color-shades-yellow-100: #F8DEAE;
  --color-shades-yellow-200: #EFC87F;
  --color-shades-yellow-300: #EFBA4B;
  --color-shades-yellow-400: #AA7A00;
  --color-shades-yellow-500: #7D5900;
  --color-shades-yellow-600: #593C00;
  --color-shades-yellow-700: #392400;
  --color-shades-yellow-800: #1A0F00;
  --grayscale-gray-00-white: #FFFFFF;
  --grayscale-gray-50: #F9FAFB;
  --grayscale-gray-100: #F3F4F6;
  --grayscale-gray-200: #E5E7EB;
  --grayscale-gray-300: #D1D5DB;
  --grayscale-gray-350: #c4c9d1;
  --grayscale-gray-400: #9CA3AF;
  --grayscale-gray-500: #6B7280;
  --grayscale-gray-600: #4B5563;
  --grayscale-gray-700: #374151;
  --grayscale-gray-800: #1F2937;
  --grayscale-gray-900: #111827;
  --grayscale-gray-920: #121112;
  --grayscale-gray-950: #030712;
  --grayscale-gray-99-black: #080606;

  --gray-50-004: #F9FAFB04;
  --gray-920-008: #12111208;
  --gray-400-025: #9CA3AF25;
  --gray-400-008: #9CA3AF08;

  --black:        var(--grayscale-gray-99-black);
  --white:        var(--grayscale-gray-00-white);

  --primary-light: var(--color-shades-purple-100);
  --primary-light-020: #D9CEFF20;
  --primary-light-008: #D9CEFF08;
  

  --secondary-030: #EFBA4B30;
  --secondary-016: #EFBA4B16;

  --tertiary-030: #00ABCF30;
  --tertiary-016: #00ABCF16;
  --tertiary-012: #00ABCF12;
  --tertiary-008: #00ABCF08;
  
  --grayscale-filter: grayscale(50%);

  --spacing-1px: 1px;           /*1px*/ 
  --spacing-0_5: 0.125rem;      /*2px*/
  --spacing-1: 0.25rem;         /*4px*/
  --spacing-1_5: 0.375rem;      /*6px*/
  --spacing-2: 0.5rem;          /*8px*/
  --spacing-2_5: 0.625rem;      /*10px*/
  --spacing-3: 0.75rem;         /*12px*/
  --spacing-3_5: 0.875rem;      /*14px*/
  --spacing-4: 1rem;            /*16px*/
  --spacing-5: 1.25rem;         /*20px*/
  --spacing-6: 1.5rem;          /*24px*/
  --spacing-7: 1.75rem;         /*28px*/
  --spacing-8: 2rem;            /*32px*/
  --spacing-9: 2.25rem;         /*36px*/
  --spacing-10: 2.5rem;         /*40px*/
  --spacing-11: 2.75rem;        /*44px*/
  --spacing-12: 3rem;           /*48px*/

  --tag-padding: var(--spacing-1) var(--spacing-3_5) var(--spacing-1) var(--spacing-2_5);

  --button-border-radius: var(--spacing-8);
  --grid-gap: var(--spacing-4);
}

[data-md-color-scheme="darkanelia"] {
  --primary:                            var(--color-shades-purple-200);
  --primary-050:                        #BBA6FF50;    
  --primary-dark:                       var(--color-shades-purple-500);
  --secondary:                          var(--color-shades-yellow-200);
  --secondary-050:                      #EFC87F50;
  --tertiary:                           var(--color-shades-blue-300);
  --tertiary-050:                       #5DC8E550;
  --disabled:                           var(--grayscale-gray-500);
  --disabled-008:                       #6B728008;
  --black-white:                        var(--grayscale-gray-00-white);
  --white-black:                        var(--grayscale-gray-99-black);
  --graphic-background:                 var(--grayscale-gray-99-black);
  --graphic-lines:                      var(--grayscale-gray-800);

  --md-primary-fg-color:               var(--primary);
  --md-primary-fg-color--light:        var(--primary-light);
  --md-primary-fg-color--dark:         var(--primary-dark);

  --md-secondary:                      var(--secondary);

  --md-accent-fg-color:                var(--tertiary);
  
  --md-default-fg-color:               var(--grayscale-gray-350);
  --md-default-fg-color--light:        var(--grayscale-gray-400);
  --md-default-fg-color--lighter:      var(--grayscale-gray-450);
  --md-default-fg-color--lightest:     var(--grayscale-gray-500); 
  --md-default-bg-color:               var(--grayscale-gray-920);
  --md-default-bg-color--light:        var(--grayscale-gray-900);
  --md-default-bg-color--lighter:      var(--grayscale-gray-800);
  --md-default-bg-color--lightest:     var(--grayscale-gray-700);

  --md-typeset-color:                  var(--md-default-fg-color);
  --md-typeset-color-inverted:         var(--grayscale-gray-920);

  --md-typeset-a-color:                var(--primary);
  --md-typeset-a-background:           var(--color-shades-blue-700);

  --md-code-bg-color:                  var(--grayscale-gray-800);

  --header-background:                 rgba(18, 17, 18, 0.75);
  --section-bg-color:                  var(--gray-50-004);

  --outline:                           var(--md-default-fg-color--lightest); 
  --tags:                              var(--grayscale-gray-500);
  --input-caption:                    var(--grayscale-gray-400);  

  --md-mermaid-label-fg-color:        var(--grayscale-gray-400);

  --success: #C3E598;
  --information: #64C3DC;
  --warning: #FF936D;
  --error: #FF929E;

  --md-code-fg-color: #B4B7C0;
  --md-code-bg-color: #272A35;
  --md-code-hl-color: #2977FF;
}


[data-md-color-scheme="lightanelia"] {
  --primary:                            var(--color-shades-purple-400);
  --primary-050:                        #815CDF50;
  --primary-dark:                       var(--color-shades-purple-600);
  --secondary:                          var(--color-shades-yellow-400);
  --secondary-050:                      #EFBA4B50;
  --tertiary:                           var(--color-shades-blue-500);
  --tertiary-050:                       #008AAB50;
  --disabled:                           var(--grayscale-gray-400);
  --disabled-008:                       #9CA3AF08;
  --black-white:                        var(--grayscale-gray-99-black);
  --white-black:                        var(--grayscale-gray-00-white);
  --graphic-background:                 var(--grayscale-gray-200);
  --graphic-lines:                      var(--grayscale-gray-300);


  --md-primary-fg-color:               var(--primary);
  --md-primary-fg-color--light:        var(--primary-light);
  --md-primary-fg-color--dark:         var(--primary-dark);

  --md-secondary:                      var(--color-shades-yellow-400);

  --md-accent-fg-color:                var(--tertiary);
  
  --md-default-fg-color:               var(--grayscale-gray-920);
  --md-default-fg-color--light:       var(--grayscale-gray-900);
  --md-default-fg-color--lighter:     var(--grayscale-gray-800);
  --md-default-fg-color--lightest:    var(--grayscale-gray-700);
  --md-default-bg-color:               var(--grayscale-gray-100);
  --md-default-bg-color--light:        var(--grayscale-gray-200);
  --md-default-bg-color--lighter:      var(--grayscale-gray-300);
  --md-default-bg-color--lightest:     var(--grayscale-gray-400);

  --md-typeset-color:                 var(--md-default-fg-color);
  --md-typeset-color-inverted:        var(--grayscale-gray-200);
  --md-typeset-a-color:               var(--md-primary-fg-color);
  --md-typeset-a-background:          var(--color-shades-blue-200);

  --md-code-bg-color:                 var(--grayscale-gray-200);

  --header-background:                rgba(243, 244, 246, 0.75);
  --section-bg-color:                 var(--gray-920-008);
    
  --outline:                          var(--md-default-fg-color--lightest);
  --tags:                             var(--grayscale-gray-500); 
  --input-caption:                    var(--grayscale-gray-700);

  --success: #7BAB00;
  --information: #3190A9;
  --warning: #F77243;
  --error: #CF3C59;
}

[data-md-color-scheme="lightanelia"] {
  .tx-hero-new {
    border-color: var(--grayscale-gray-300);
  }
  .tx-hero-left {
    border-right-color: var(--grayscale-gray-300);
  }
  .tx-hero-right {
    background: var(--grayscale-gray-00-white);
  }
  .tx-term-bar {
    border-bottom-color: var(--grayscale-gray-300);
    background: var(--grayscale-gray-200);
  }
  .tx-term-body {
    background: var(--grayscale-gray-00-white);
  }
  .tx-term-footer {
    border-top-color: var(--grayscale-gray-300);
    background: var(--grayscale-gray-100);
  }
  .tx-stats {
    border-top-color: var(--grayscale-gray-300);
  }
  .tx-tcmd { color: var(--grayscale-gray-920); }
  .tx-tdim { color: var(--grayscale-gray-500); }
  .tx-terr { color: var(--error); }
  .tx-tok  { color: var(--success); }
}

[data-md-color-scheme="darkanelia"] img[src$="#only-light"],
[data-md-color-scheme="darkanelia"] img[src$="#gh-light-mode-only"] {
  display: none; /* Hide light images in dark mode */
}

[data-md-color-scheme="lightanelia"] img[src$="#only-dark"],
[data-md-color-scheme="lightanelia"] img[src$="#gh-dark-mode-only"] {
  display: none; /* Hide dark images in light mode */
}

.highlight .na, .highlight .nv, .highlight .vc, .highlight .kc, .highlight .vg, .highlight .vi, .highlight .o, .highlight .ow, .highlight .p {
  color: var(--md-default-fg-color--light);
}

.highlight .c {
  color:var(--success);
}

code {
  text-wrap: pretty;
}

input {
  background-color: var(--md-default-bg-color--lighter);
  border: 1px solid var(--md-default-fg-color);
}

.md-typeset h3 {
  font-weight: 500;
  margin: 1rem 0 .64em;
}

#anelialogo path {
  fill:var(--md-typeset-color);
}

::selection {
  color: var(--grayscale-gray-99-black);
  background-color: var(--md-primary-fg-color--light);
}

@font-face {
  font-family: "Mulish";
  src: url("../assets/fonts/Mulish/Mulish-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/BricolageGrotesque-VariableFont_opsz,wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
}

:root {
  --md-text-font: 'Mulish', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --md-typeset-heading: 'Mulish', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
}

.md-typeset{
  font-family: var(--md-text-font);
  font-size: .9rem;
}

.content-link {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--md-typeset-a-background);
  text-decoration-style: solid;
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
    
  text-underline-offset: var(--spacing-1);
}

.content-link:hover {
  text-decoration-thickness: 16px;
  text-underline-offset: -.5em;
  color: var(--md-typeset-a-color);
} 


.md-typeset h1 {
  font-size: 1.8rem;
  color: var(--md-typeset-color);
  font-family: var(--md-typeset-heading);
  font-weight: 900;
  margin: 0 0 var(--spacing-3);
}

.md-typeset h2 {
  font-weight: 600;
  margin: 1rem 0 .64em;
}

.newLine {
  display: flow-root;
}

/*Buttons*/

.md-top {
  background-color: var(--primary-dark);
  color: var(--white);
}

.md-typeset .md-button {
  border-radius: var(--button-border-radius);
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background-color: var(--primary);
  color: var(--md-typeset-color-inverted);
  border: 0.1rem solid var(--primary);
}

.md-typeset .md-button--primary {
  border-radius: var(--button-border-radius);
  border: 0.1rem solid transparent;
  background-image: linear-gradient(to right, var(--color-shades-purple-400), var(--color-shades-blue-500));
  color: var(--white);
  padding: var(--spacing-2_5) var(--spacing-4);
  margin-top: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  background-image: linear-gradient(to right, var(--color-shades-purple-500), var(--color-shades-blue-600));
  color: var(--white);
  border: 0.1rem solid transparent;
}


.md-typeset .md-button--secondary {
  color: var(--md-typeset-color);
  border-radius: var(--button-border-radius);
  border: 0.1rem solid var(--md-typeset-color);
  padding: var(--spacing-2_5) var(--spacing-4);
  margin-top: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.md-typeset .md-button--secondary:focus,
.md-typeset .md-button--secondary:hover {
  background-color: var(--md-default-bg-color);
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

.md-typeset .md-button--tertiary {
  color: var(--md-typeset-color);
  background: none;
  border-radius: 2rem;
  border: 0.1rem solid transparent;
  padding: var(--spacing-2_5) var(--spacing-4);
  margin-top: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.md-typeset .md-button--tertiary:focus,
.md-typeset .md-button--tertiary:hover {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  background: none;
}

.md-typeset ul li {
  margin-bottom: 0;
}

.md-card {
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.16);
  padding: var(--spacing-4);
  border-radius: var(--spacing-0_5);
  max-width: 300px;
  margin: auto;
}

.md-card-content h2 {
  margin-top: 0;
}

.md-card-content p {
  margin-bottom: var(--spacing-4);
}

.md-card-content img {
  width: 100%;
  height: auto;
}


.md-header--shadow {
  box-shadow: none;
}

.md-header {
  background-color: var(--header-background);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--md-default-fg-color);
}

.md-tabs {
  background-color: transparent;
  color: var(--md-default-fg-color);
}

.md-search__input+.md-search__icon{
  color: var(--md-default-fg-color);
}

.md-search__form {
  background-color: transparent;
}

.md-search__output,
.md-search__scrollwrap,
.md-search-result {
  background-color: var(--md-default-bg-color);
}

.md-search-result__meta {
  background-color: var(--md-default-bg-color--lighter);
  color: var(--md-default-fg-color);
}
.md-search__input {
  border: 1px solid var(--md-default-fg-color);
  border-radius: var(--spacing-8);
  color: var(--md-typeset-color);
}

.md-search__input::placeholder{
  color: var(--md-typeset-color);
}

.md-nav__item--section {
  border-top: 1px solid var(--outline);
}

.md-post__content h2 {
  font-weight: 600;
}

.md-post__content h2 > a {
  color: var(--md-typeset-color);
}

.md-post__content h3 > a {
  color: var(--md-typeset-color);
} 

.md-post__meta > .md-nav__item--section {
  border-top: none;
}

.md-nav__item .md-nav__link--active {
  border-left: 3px solid;
  padding-left: 12px;
}

.md-nav__list {
  padding-block: 4px;
}




/* gallery */
.galleryFlex {
  width:100%;
}

.galleryItems{
  display: flex;
  flex-wrap: wrap;
  gap: .05rem;
}

.galleryItems > * {
  flex: 1 1 10rem;
  height: 10rem;
} 

.galleryItems img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: var(--grayscale-filter);
  -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.galleryItems img:hover {
  filter: grayscale(0%);
}

.width50 {
  width: 50%;
}

.galGridItem {
  display: flex;
  gap: .05rem;
}

.galGridItem > * {
  flex: 1 1 15rem;
  -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.galGridItem > *:hover{
  filter: grayscale(0%);
}

.filterGray {
  filter: var(--grayscale-filter);
  -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.filterGray:hover {
  filter: grayscale(0%);
}

/*Category Tags*/

.tag {
  padding: 3px 16px 5px 16px;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--spacing-8);
}

.projects-grid {

 --border-project: 0.02rem solid var(--disabled);

  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(290px,100%), 1fr));
  gap: var(--grid-gap);
  margin: 0;
}

.project-image {
  overflow: hidden;
  position: relative;
  height: 0;
  padding-top: 70%;
}

.project-link {
  border: var(--border-project);
  border-radius: var(--spacing-2);
  overflow: clip;
  position: relative;
}

.project-link h3 {
  padding-block: var(--spacing-2);
  padding-left: var(--spacing-4);
  margin: var(--spacing-2) 0 0 0;
}

.project-link p {
  text-align: left;
  padding-inline: var(--spacing-4);
}

.project-link a {
  color: var(--md-typeset-color);
  text-decoration: none;
}

.Digital {
  background: var(--primary-light-020);
  color: var(--primary);
  border-color: var(--primary);
}

.Digital::before {
  content:'\2756';
  padding-right: var(--spacing-1);
}

.Featured {
  background: var(--gray-400-025);
  color: var(--grayscale-gray-500);
  border-color: var(--grayscale-gray-400);
}

.Featured::before {
  content:'\2605';
  padding-right: var(--spacing-1);
}

.Content {
  background: var(--secondary-030);
  color: var(--secondary);
  border-color: var(--secondary);
}

.Content::before {
  content:'\273C';
  padding-right: var(--spacing-1);
}

.Brands {
  background: var(--tertiary-030);
  color: var(--tertiary);
  border-color: var(--tertiary);
}

.Brands::before {
  content:'\2726';
  padding-right: var(--spacing-1);
}

#project-img {
  filter: var(--grayscale-filter);
  transition: transform 200ms ease-in-out 0s,-webkit-transform 200ms ease-in-out 0s;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  position: absolute;
  top: 0;
  z-index: 0;
  aspect-ratio: 16/9;
  border-bottom: var(--border-project);
}

@media screen and (max-width: 76.25rem) {
  #project-img {
    filter: grayscale(.1);
  }
  
}

#project-img:hover {
  filter: grayscale(0%);
  transform: scale(1.1);
  position: absolute;
}

.mermaid {
  text-align: center;
}

/*Created with https://css-generators.com/wavy-shapes/*/

.postCover, .md-post__content img {
  --mask:
    radial-gradient(23.15px at 50% 31.80px,#000 99%,#0000 101%) calc(50% - 24px) 0/48px 100%,
    radial-gradient(23.15px at 50% -19.8px,#0000 99%,#000 101%) 50% 12px/48px 100% repeat-x;
  -webkit-mask: var(--mask);
        mask: var(--mask);
}

@media screen and (min-width: 50rem) {
  .postCover, .md-post__content img {
    --mask:
      radial-gradient(33.53px at 50% 47.30px,#000 99%,#0000 101%) calc(50% - 44px) 0/88px 100%,
      radial-gradient(33.53px at 50% -25.3px,#0000 99%,#000 101%) 50% 22px/88px 100% repeat-x;
    -webkit-mask: var(--mask);
            mask: var(--mask);
  }
}

.md-post__content img {
  width: 100%;
  object-fit: cover;
}

.blogcover  {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.md-post--excerpt {
  border-bottom: 3px dotted var(--primary-050);
  padding-bottom: var(--spacing-6);
  margin-bottom: var(--spacing-5);
}

.md-post__action a::after {
  content: '\2192';
}

.handnotes {
  text-decoration-thickness: 16px;
  text-underline-offset: -.5em;
  text-decoration-color: var(--secondary-050);
  text-decoration-style: solid;
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
}

.md-sidebar__scrollwrap {
  overflow-y: visible;
}

.iconSummary {
  color: var(--md-secondary);
  margin-right: var(--spacing-2);
}

.md-typeset .grid.cards>ul>li {
  border-radius: var(--spacing-3);
}

.grid.cards>ul>li>p:first-child {
  display: flex;
  align-items: center;
}

/* ----  Utilities ---- */

/* Spacing scale: 1=4px, 2=8px, 3=12px, 4=16px, 5=20px, 6=24px, 8=32px, 10=40px, 12=48px */

.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ms-0 { margin-inline-start: 0 !important; }
.me-0 { margin-inline-end: 0 !important; }
.mx-0 { margin-inline: 0 !important; }
.my-0 { margin-block: 0 !important; }

.m-1  { margin: var(--spacing-1) !important; }
.mt-1 { margin-top: var(--spacing-1) !important; }
.mb-1 { margin-bottom: var(--spacing-1) !important; }
.ms-1 { margin-inline-start: var(--spacing-1) !important; }
.me-1 { margin-inline-end: var(--spacing-1) !important; }
.mx-1 { margin-inline: var(--spacing-1) !important; }
.my-1 { margin-block: var(--spacing-1) !important; }

.m-2  { margin: var(--spacing-2) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.ms-2 { margin-inline-start: var(--spacing-2) !important; }
.me-2 { margin-inline-end: var(--spacing-2) !important; }
.mx-2 { margin-inline: var(--spacing-2) !important; }
.my-2 { margin-block: var(--spacing-2) !important; }

.m-3  { margin: var(--spacing-3) !important; }
.mt-3 { margin-top: var(--spacing-3) !important; }
.mb-3 { margin-bottom: var(--spacing-3) !important; }
.ms-3 { margin-inline-start: var(--spacing-3) !important; }
.me-3 { margin-inline-end: var(--spacing-3) !important; }
.mx-3 { margin-inline: var(--spacing-3) !important; }
.my-3 { margin-block: var(--spacing-3) !important; }

.m-4  { margin: var(--spacing-4) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.ms-4 { margin-inline-start: var(--spacing-4) !important; }
.me-4 { margin-inline-end: var(--spacing-4) !important; }
.mx-4 { margin-inline: var(--spacing-4) !important; }
.my-4 { margin-block: var(--spacing-4) !important; }

.m-5  { margin: var(--spacing-5) !important; }
.mt-5 { margin-top: var(--spacing-5) !important; }
.mb-5 { margin-bottom: var(--spacing-5) !important; }
.ms-5 { margin-inline-start: var(--spacing-5) !important; }
.me-5 { margin-inline-end: var(--spacing-5) !important; }
.mx-5 { margin-inline: var(--spacing-5) !important; }
.my-5 { margin-block: var(--spacing-5) !important; }

.m-6  { margin: var(--spacing-6) !important; }
.mt-6 { margin-top: var(--spacing-6) !important; }
.mb-6 { margin-bottom: var(--spacing-6) !important; }
.ms-6 { margin-inline-start: var(--spacing-6) !important; }
.me-6 { margin-inline-end: var(--spacing-6) !important; }
.mx-6 { margin-inline: var(--spacing-6) !important; }
.my-6 { margin-block: var(--spacing-6) !important; }

.m-8  { margin: var(--spacing-8) !important; }
.mt-8 { margin-top: var(--spacing-8) !important; }
.mb-8 { margin-bottom: var(--spacing-8) !important; }
.ms-8 { margin-inline-start: var(--spacing-8) !important; }
.me-8 { margin-inline-end: var(--spacing-8) !important; }
.mx-8 { margin-inline: var(--spacing-8) !important; }
.my-8 { margin-block: var(--spacing-8) !important; }

.m-10  { margin: var(--spacing-10) !important; }
.mt-10 { margin-top: var(--spacing-10) !important; }
.mb-10 { margin-bottom: var(--spacing-10) !important; }
.ms-10 { margin-inline-start: var(--spacing-10) !important; }
.me-10 { margin-inline-end: var(--spacing-10) !important; }
.mx-10 { margin-inline: var(--spacing-10) !important; }
.my-10 { margin-block: var(--spacing-10) !important; }

.m-12  { margin: var(--spacing-12) !important; }
.mt-12 { margin-top: var(--spacing-12) !important; }
.mb-12 { margin-bottom: var(--spacing-12) !important; }
.ms-12 { margin-inline-start: var(--spacing-12) !important; }
.me-12 { margin-inline-end: var(--spacing-12) !important; }
.mx-12 { margin-inline: var(--spacing-12) !important; }
.my-12 { margin-block: var(--spacing-12) !important; }

.p-0  { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.ps-0 { padding-inline-start: 0 !important; }
.pe-0 { padding-inline-end: 0 !important; }
.px-0 { padding-inline: 0 !important; }
.py-0 { padding-block: 0 !important; }

.p-1  { padding: var(--spacing-1) !important; }
.pt-1 { padding-top: var(--spacing-1) !important; }
.pb-1 { padding-bottom: var(--spacing-1) !important; }
.ps-1 { padding-inline-start: var(--spacing-1) !important; }
.pe-1 { padding-inline-end: var(--spacing-1) !important; }
.px-1 { padding-inline: var(--spacing-1) !important; }
.py-1 { padding-block: var(--spacing-1) !important; }

.p-2  { padding: var(--spacing-2) !important; }
.pt-2 { padding-top: var(--spacing-2) !important; }
.pb-2 { padding-bottom: var(--spacing-2) !important; }
.ps-2 { padding-inline-start: var(--spacing-2) !important; }
.pe-2 { padding-inline-end: var(--spacing-2) !important; }
.px-2 { padding-inline: var(--spacing-2) !important; }
.py-2 { padding-block: var(--spacing-2) !important; }

.p-3  { padding: var(--spacing-3) !important; }
.pt-3 { padding-top: var(--spacing-3) !important; }
.pb-3 { padding-bottom: var(--spacing-3) !important; }
.ps-3 { padding-inline-start: var(--spacing-3) !important; }
.pe-3 { padding-inline-end: var(--spacing-3) !important; }
.px-3 { padding-inline: var(--spacing-3) !important; }
.py-3 { padding-block: var(--spacing-3) !important; }

.p-4  { padding: var(--spacing-4) !important; }
.pt-4 { padding-top: var(--spacing-4) !important; }
.pb-4 { padding-bottom: var(--spacing-4) !important; }
.ps-4 { padding-inline-start: var(--spacing-4) !important; }
.pe-4 { padding-inline-end: var(--spacing-4) !important; }
.px-4 { padding-inline: var(--spacing-4) !important; }
.py-4 { padding-block: var(--spacing-4) !important; }

.p-5  { padding: var(--spacing-5) !important; }
.pt-5 { padding-top: var(--spacing-5) !important; }
.pb-5 { padding-bottom: var(--spacing-5) !important; }
.ps-5 { padding-inline-start: var(--spacing-5) !important; }
.pe-5 { padding-inline-end: var(--spacing-5) !important; }
.px-5 { padding-inline: var(--spacing-5) !important; }
.py-5 { padding-block: var(--spacing-5) !important; }

.p-6  { padding: var(--spacing-6) !important; }
.pt-6 { padding-top: var(--spacing-6) !important; }
.pb-6 { padding-bottom: var(--spacing-6) !important; }
.ps-6 { padding-inline-start: var(--spacing-6) !important; }
.pe-6 { padding-inline-end: var(--spacing-6) !important; }
.px-6 { padding-inline: var(--spacing-6) !important; }
.py-6 { padding-block: var(--spacing-6) !important; }

.p-8  { padding: var(--spacing-8) !important; }
.pt-8 { padding-top: var(--spacing-8) !important; }
.pb-8 { padding-bottom: var(--spacing-8) !important; }
.ps-8 { padding-inline-start: var(--spacing-8) !important; }
.pe-8 { padding-inline-end: var(--spacing-8) !important; }
.px-8 { padding-inline: var(--spacing-8) !important; }
.py-8 { padding-block: var(--spacing-8) !important; }

.p-10  { padding: var(--spacing-10) !important; }
.pt-10 { padding-top: var(--spacing-10) !important; }
.pb-10 { padding-bottom: var(--spacing-10) !important; }
.ps-10 { padding-inline-start: var(--spacing-10) !important; }
.pe-10 { padding-inline-end: var(--spacing-10) !important; }
.px-10 { padding-inline: var(--spacing-10) !important; }
.py-10 { padding-block: var(--spacing-10) !important; }

.p-12  { padding: var(--spacing-12) !important; }
.pt-12 { padding-top: var(--spacing-12) !important; }
.pb-12 { padding-bottom: var(--spacing-12) !important; }
.ps-12 { padding-inline-start: var(--spacing-12) !important; }
.pe-12 { padding-inline-end: var(--spacing-12) !important; }
.px-12 { padding-inline: var(--spacing-12) !important; }
.py-12 { padding-block: var(--spacing-12) !important; }