:root{--sans:'Nunito Sans', -apple-system, -BlinkMacSystemFont, "Segoe Flex", "Roboto Flex", sans-serif, system-ui;--cursive:'Graffiti', var(--sans), script, cursive;--border:solid 0.5px var(--color-neutral);--thin:200;--light:250;--regular:350;--medium:550;--bold:700;--bolder:1000;--color-clearer:#f2f2f3;--color-clear:#f2f2f3;--color-neutral:#5C5C5A;--color-neutral-alt:#81888A;--color-dark:#313335;--color-darker:#1B1B1C;--color-main:#048BA8;--color-main-dark:#0F5A6B;--color-key:#FDC300;--color-key-dark:#FDC300;--color-alt:#BBCC34;--color-alt-dark:#BBCC34}@font-face{font-family:nunito sans;font-style:normal;font-weight:200..1000;font-stretch:100%;font-display:optional;src:local('Nunito Sans'),local('Noto Sans'),url(/_core/fonts/nunito-sans.woff2)format('woff2');unicode-range:U+20-5D,U+5F,U+61-7E,U+AA,U+B0,U+B2-B3,U+BA,U+BC-BE,U+C0-C3,U+C7,U+C9-CA,U+CD,U+D3-D5,U+DA,U+E0-E3,U+E7,U+E9-EA,U+ED,U+F3-F5,U+FA,U+131,U+2BB-2BC,U+2DA,U+2013-2014,U+2018-2019,U+201C-201D,U+2039-203A,U+2215}@font-face{font-family:nunito sans;font-style:italic;font-weight:200..1000;font-stretch:100%;font-display:optional;src:local('Nunito Sans'),local('Noto Sans'),url(/_core/fonts/nunito-sans-italic.woff2)format('woff2');unicode-range:U+20-5D,U+5F,U+61-7E,U+AA,U+B0,U+B2-B3,U+BA,U+BC-BE,U+C0-C3,U+C7,U+C9-CA,U+CD,U+D3-D5,U+DA,U+E0-E3,U+E7,U+E9-EA,U+ED,U+F3-F5,U+FA,U+131,U+2BB-2BC,U+2DA,U+2013-2014,U+2018-2019,U+201C-201D,U+2039-203A,U+2215}@font-face{font-family:graffiti;font-display:swap;src:local('Subway Paris SC Regular'),local('Subway Paris SC'),local('Rock Salt'),url(/_core/fonts/graffiti.woff2)format('woff2');unicode-range:U+20-5D,U+5F,U+61-7D,U+AA,U+B0,U+C0-C3,U+C7,U+C9-CA,U+CD,U+D3-D5,U+DA,U+E0-E3,U+E7,U+E9-EA,U+ED,U+F3-F5,U+FA,U+2BB-2BC,U+2013,U+2215}*{margin:0;padding:0;border:0;outline:0;max-width:100%;box-sizing:border-box;vertical-align:baseline;font-weight:inherit;font-family:inherit;font-style:inherit;font-size:100%;color:inherit}html{background-color:var(--color-clear);color:var(--color-dark);font-family:var(--sans);font-size:clamp(16px,4vw,24px);font-weight:var(--light);line-height:1.5;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,header,main,footer{width:100%;max-width:100%}header,footer{background-color:var(--color-dark);font-weight:var(--light);line-height:1;color:#fff;fill:#fff;font-size:80%}header{position:absolute;top:0;text-transform:uppercase}header nav,footer nav,footer div{display:flex;flex:initial;gap:2rem;width:95vw;max-width:1280px}header nav{margin:5px auto;align-content:flex-start;justify-content:space-between;place-items:center}header ul{display:flex;justify-content:flex-end;gap:.3rem}header li{margin:auto 5px}header svg{max-height:1.3rem;fill:currentColor;position:relative;top:2px}@scope(#what-matters){:scope {
    width: minmax(240px, 900px);
    margin: 3rem auto 5rem;
    font: clamp(1rem, 2rem, 3rem)/2rem var(--cursive);
  }
  ul {
    display: grid;
    grid: repeat(3, 2rem)/repeat(3, minmax(80px, 300px));
    gap: 1rem 0;
    justify-content: center
  }

  li {
    animation: 8s normal ease-in-out infinite;
    opacity: 0;
    will-change: opacity, transform;
    transform: translateZ(1);
  }

  li.a1,
  li.a2,
  li.a3,
  li.c1,
  li.c2,
  li.c3 {
    animation-name: WORDS;
    text-align: center;
    color: var(--color-neutral-alt)
  }

  li.a1 {
    animation-delay: 3s
  }

  li.a2 {
    animation-delay: 2.2s
  }

  li.a3 {
    animation-delay: 3.8s
  }

  li.c1 {
    animation-delay: 1.8s
  }

  li.c2 {
    animation-delay: 3.4s
  }

  li.c3 {
    animation-delay: 2.6s
  }

  @keyframes WORDS {

    0%,
    25%,
    100% {
      opacity: 0
    }

    10%,
    15% {
      opacity: 1
    }
  }

  li.b1,
  li.b3 {
    animation-name: WHAT;
    color: var(--color-main)
  }

  li.b1 {
    text-align: right
  }

  li.b3 {
    text-align: left
  }

  @keyframes WHAT {

    0%,
    5%,
    30%,
    100% {
      opacity: 0
    }

    20%,
    25% {
      opacity: 1
    }
  }

  li.b2 {
    animation-name: MATTERS
  }

  li.b2 svg {
    max-height: 2rem
  }

  @keyframes MATTERS {

    0%,
    91%,
    93%,
    95%,
    100% {
      opacity: 0
    }

    25%,
    90%,
    92%,
    94% {
      opacity: 1
    }

    0%,
    20% {
      fill: var(--color-neutral)
    }

    35%,
    100% {
      fill: var(--color-main)
    }
  }
}