:root {
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;

  /* colors */
  --bluegrey-50: #ECEFF1;
  --bluegrey-100: #CFD8DC;
  --bluegrey-200: #B0BEC5;
  --bluegrey-300: #90A4AE;
  --bluegrey-400: #78909C;
  --bluegrey-500: #5E7A88;
  --bluegrey-600: #546E7A;
  --bluegrey-700: #455A64;
  --bluegrey-800: #37474F;
  --bluegrey-900: #263238;

  --lightblue-50: #E0F7FA;
  --lightblue-100: #AFE3F1;
  --lightblue-200: #7ECFE8;
  --lightblue-300: #4DBBDF;
  --lightblue-400: #1CA7D6;
  --lightblue-500: #1693BE;
  --lightblue-600: #0F7EA6;
  --lightblue-700: #0A7096;
  --lightblue-800: #05536F;
  --lightblue-900: #003547;
  --lightblue-a100: #84FFFF;
  --lightblue-a200: #18FFFF;
  --lightblue-a400: #00E5FF;
  --lightblue-a700: #00B8D4;

  --teal-50: #E0F2F1;
  --teal-100: #A8DBD7;
  --teal-200: #70C4BD;
  --teal-300: #38ADA2;
  --teal-400: #009688;
  --teal-500: #008578;
  --teal-600: #007165;
  --teal-700: #005C51;
  --teal-800: #00483D;
  --teal-900: #00332A;
  --teal-a100: #A7FFEB;
  --teal-a200: #64FFDA;
  --teal-a400: #1DE9B6;
  --teal-a700: #00BFA5;

  --indigo-50: #E8EAF6;
  --indigo-100: #CBCEEB;
  --indigo-200: #AEB2E0;
  --indigo-300: #9296D4;
  --indigo-400: #757AC9;
  --indigo-500: #585EBE;
  --indigo-600: #4A50A8;
  --indigo-700: #3C4392;
  --indigo-800: #2E357C;
  --indigo-900: #202766;
  --indigo-a100: #8C9EFF;
  --indigo-a200: #536DFE;
  --indigo-a400: #3D5AFE;
  --indigo-a700: #304FFE;

  --lightgreen-50: #F1F8E9;
  --lightgreen-100: #DCEDC8;
  --lightgreen-200: #C5E1A5;
  --lightgreen-300: #AED581;
  --lightgreen-400: #9CCC65;
  --lightgreen-500: #8BC34A;
  --lightgreen-600: #7CB342;
  --lightgreen-700: #689F38;
  --lightgreen-800: #558B2F;
  --lightgreen-900: #33691E;
  --lightgreen-a100: #CCFF90;
  --lightgreen-a200: #B2FF59;
  --lightgreen-a400: #76FF03;
  --lightgreen-a700: #64DD17;

  --red-50: #FFEBEE;
  --red-100: #F4C8CA;
  --red-200: #E9A5A7;
  --red-300: #DE8283;
  --red-400: #D35F60;
  --red-500: #C83C3C;
  --red-600: #AF3333;
  --red-700: #962B2B;
  --red-800: #7C2222;
  --red-900: #631919;
  --red-a100: #FF8A80;
  --red-a200: #FF5252;
  --red-a400: #FF1744;
  --red-a700: #D50000;

  --orange-50: #FFF3E0;
  --orange-100: #FCE1BB;
  --orange-200: #F9CF97;
  --orange-300: #F5BE72;
  --orange-400: #F2AC4E;
  --orange-500: #EF9A29;
  --orange-600: #E68D16;
  --orange-700: #DD7F03;
  --orange-800: #CA7407;
  --orange-900: #AD6306;
  --orange-a100: #FFD180;
  --orange-a200: #FFAB40;
  --orange-a400: #FF9100;
  --orange-a700: #FF6D00;

  --white: #FFFFFF;

  /* shadow */
  --shadow-2: 0 3px 1px -2px rgba(0,0,0,0.20), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
  --shadow-4: 0 2px 4px -1px rgba(0,0,0,0.20), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
  --shadow-6: 0 3px 5px -1px rgba(0,0,0,0.20), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
  --shadow-8: 0 5px 5px -3px rgba(0,0,0,0.20), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
}

a:has(img) {
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
  left: 0;
  top: 0;
}