:root {
  --color-blue: #058FD6;
  --color-blue-light: #3D9DD9;
  --color-blue-dark: #0071B8;
  --color-blue-dark: #0068A8;
  --color-pink: #D00770;
  --color-pink-light: #FF52AB;
  --color-pink-dark: #B40B57;
  --color-purple: #734BF9;
  --color-purple-light: #AD95FB;
  --color-purple-dark: #4F27D6;

  --color-grey-1: #25222C;
  --color-grey-2: #423F4A;
  --color-grey-3: #5B5B66;
  --color-grey-4: #86838F;
  --color-grey-5: #AAA7B4;
  --color-grey-6: #C3C3CE;
  --color-grey-7: #EDEDF0;
  --color-grey-8: #F9F9F9;
  --color-white: #FFFFFF;
  --color-black: #0C0B0F;

  --color-yellow: #FDC02F;

  --color-text: var(--color-black);

  --font-text: Nunito, Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  --font-title: Kumbh, Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  --font-brush: GOODBRUSH, 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;

  --font-title-100: 900    6.25rem/1          var(--font-title);
  --font-title-72:  800     4.5rem/5rem       var(--font-title);
  --font-title-42:  800   2.625rem/3.125rem   var(--font-title);
  --font-title-28:  800    1.75rem/2rem       var(--font-title);
  --font-title-22:  800   1.375rem/1.75rem    var(--font-title);
  --font-title-18:  800   1.125rem/1.625rem   var(--font-title);
  --font-title-16:  800       1rem/1.5rem     var(--font-title);

  --font-text-20:   400    1.25rem/1.875rem   var(--font-text);
  --font-text-16:   400       1rem/1.5rem     var(--font-text);
  --font-text-14:   400      0.875/1.5rem     var(--font-text);
  --font-text-12:   400    0.75rem/1.5rem     var(--font-text);

  --font-brush-1:   400   3.125rem/1          var(--font-brush);

  --transition: .2s ease-in-out;

  --radius-xs: 5px;
  --radius-s: 15px;
  --radius-m: 25px;
  --radius-l: 50px;

  --shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.25);

  --spacing-5:   0.3125rem;
  --spacing-10:  0.625rem;
  --spacing-15:  0.9375rem;
  --spacing-16:  1rem;
  --spacing-20:  1.25rem;
  --spacing-24:  1.5rem;
  --spacing-30:  1.875rem;
  --spacing-40:  2.5rem;
  --spacing-50:  3.125rem;
  --spacing-60:  3.75rem;
  --spacing-80:  5rem;
  --spacing-100: 6.25rem;
  --spacing-120: 7.5rem;
  --spacing-1lh: 1lh;
}

html {
  font: var(--font-text-16);
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-white, white);
  color: var(--color-black, black);
}

h1 {
  font: var(--font-title-72);

  &.title-big { font: var(--font-title-42) }

  @media (width < 50rem) {
    font: var(--font-title-42);

    &.title-big { font: var(--font-title-28) }
  }
}
h2 {
  font: var(--font-title-28);

  @media (width < 50rem) { font: var(--font-title-22) }
}
h3 {
  font: var(--font-title-22);

  @media (width < 50rem) { font: var(--font-title-18) }
}

hr {
  border: 0;
  border-top: 1px dashed var(--color-blue);
}

[hidden] {
  display: none !important;
}

input:is([type="checkbox"], [type="radio"]) {
  accent-color: var(--color-pink);
}

::selection {
  background-color: var(--color-purple-light);
  background-color: color-mix(in srgb, var(--color-purple-light), transparent 25%);
  color: var(--color-black);
}