:root {    
    --primaryColor: #2B54F0;
    --headingColor: #101635;
    --backgroundColor: #F8F9FE;
    --accentColor: #FDE047;
    --textColor: #4C5478;
    --logoColor: #EA580C;

    --primaryColorFilter: invert(27%) sepia(88%) saturate(6263%) hue-rotate(231deg) brightness(101%) contrast(88%);
    --headingColorFilter: invert(11%) sepia(16%) saturate(2430%) hue-rotate(192deg) brightness(89%) contrast(102%);
    --backgroundColorFilter: invert(88%) sepia(1%) saturate(3205%) hue-rotate(199deg) brightness(111%) contrast(99%);
    --accentColorFilter: invert(94%) sepia(35%) saturate(3516%) hue-rotate(321deg) brightness(110%) contrast(98%);
    --textColorFilter: invert(31%) sepia(27%) saturate(679%) hue-rotate(192deg) brightness(95%) contrast(87%);
    --logoColorFilter: invert(32%) sepia(27%) saturate(6692%) hue-rotate(13deg) brightness(107%) contrast(91%);
    
    --whiteFilter: invert(99%) sepia(37%) saturate(0%) hue-rotate(260deg) brightness(115%) contrast(100%);
    --blackFilter: invert(0%) sepia(1%) saturate(3%) hue-rotate(326deg) brightness(96%) contrast(104%);

    /* OPACITY COLORS */

    --low-opacity-black: rgba(0, 0, 0, 0.25);
    --high-opacity-black: rgba(0, 0, 0, 0.75);

    --low-opacity-gray: rgba(255, 255, 255, 0.25);
    --high-opacity-gray: rgba(255, 255, 255, 0.75);

    --low-opacity-primaryColor: rgba(43, 84, 240, 0.25);
    --high-opacity-primaryColor: rgba(43, 84, 240, 0.75);

    --high-opacity-primaryColorFilter: invert(27%) sepia(88%) saturate(6263%) hue-rotate(231deg) brightness(101%) contrast(88%) opacity(0.75);
    
    --low-opacity-headingColor: rgba(16, 22, 53, 0.25);
    --high-opacity-headingColor: rgba(16, 22, 53, 0.75);

    --low-opacity-backgroundColor: rgba(248, 249, 254, 0.25);
    --high-opacity-backgroundColor: rgba(248, 249, 254, 0.75);

    --low-opacity-accentColor: rgba(253, 224, 71, 0.25);
    --high-opacity-accentColor: rgba(253, 224, 71, 0.75);

    --low-opacity-textColor: rgba(76, 84, 120, 0.25);
    --high-opacity-textColor: rgba(76, 84, 120, 0.75);

    /* END OF OPACITY COLROS */

    /* BASIC COLORS */

    --light-gray: var(--low-opacity-backgroundColor);
    --basic-gray: var(--low-opacity-backgroundColor);
    --dark-gray: var(--high-opacity-textColor);
    --black: var(--textColor);
    --white: var(--backgroundColor);

    --whiteFilter: invert(99%) sepia(37%) saturate(0%) hue-rotate(260deg) brightness(115%) contrast(100%);
    --blackFilter: invert(0%) sepia(1%) saturate(3%) hue-rotate(326deg) brightness(96%) contrast(104%);

    /* END OF BASIC COLORS*/

    /* SHADOWS */

    --basic-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

    /* END OF SHADOWS */

  }

  html {
    font-family: Work Sans, sans-serif;
    font-weight: 400;
  }

  footer {
    font-family: Work Sans, sans-serif;
    font-weight: 700;
  }

  h1, h2 {
    font-family: Bricolage Grotesque, serif;
    font-weight: 700;
  }

  h3, h4, h5, h6 {
    font-family: Bricolage Grotesque, serif;
    font-weight: 700;
  }

  code {
    font-family: Space Mono, monospace;
    font-weight: 400;
  }

  .logo-text {
    font-family: Bricolage Grotesque;
    font-weight: 700;
  }
  
html { scroll-behavior: smooth; height: 100%; -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--textColor); line-height: 1.55; letter-spacing: 0; } h1, h2 { color: var(--headingColor); line-height: 1.06; letter-spacing: -0.03em; } h3, h4 { color: var(--headingColor); letter-spacing: -0.02em; } p { max-width: 68ch; } img { display: block; max-width: 100%; } a { color: inherit; } ::selection { background: var(--primaryColor); color: #ffffff; }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
  }
  .site-main {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
  }

header > * { animation: fadeSlideUp 0.8s cubic-bezier(0.16,1,0.3,1) both; } header > *:nth-child(1) { animation-delay: 40ms; } header > *:nth-child(2) { animation-delay: 130ms; } header >\n  *:nth-child(3) { animation-delay: 220ms; } header > *:nth-child(4) { animation-delay: 310ms; } header > *:nth-child(5) { animation-delay: 400ms; }
section { padding: 5.5rem 3rem; position: relative; } main > section:last-child, .site-main > section:last-child { padding-bottom: 0; } @media (max-width: 600px) { section { padding: 3.5rem 3rem; } }"


nav a { position: relative; text-decoration: none; color: var(--textColor); font-weight: 500; transition: color 0.25s cubic-bezier(0.16,1,0.3,1); } nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background-color: var(--primaryColor); transform: scaleX(0); transform-origin: right; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); } nav a:hover { color: var(--headingColor); } nav a:hover::after { transform: scaleX(1); transform-origin: left; }
footer { background-color: var(--headingColor); color: rgba(255,255,255,0.72); } footer h3, footer h4 { color: var(--backgroundColor); } footer a { text-decoration: none; transition: color 0.2s ease-out; } footer p { max-width: none; }
  footer {
    margin-top: auto;
  }

@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes revealUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { main > section > div { animation: revealUp linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }