:root{
    --bg:#f3f1f2;
    --green:#27e111;
    --violet:#7035f0;
    --blue:#138ed8;
    --pink:#ed1daf;
    --yellow:#cec700;
  }

  html,body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:var(--bg);
    font-family:Arial,Helvetica,sans-serif;
  }

  svg{
    width:100vw;
    height:100vh;
    display:block;
    user-select:none;
    touch-action:none;
  }

  @font-face{
    font-family:"Portfolio566";
    src:url("https://dariaivans.neocities.org/fonts/566-font.otf") format("opentype");
    font-display:swap;
  }

  .nav{
    font-size:29px;
    cursor:pointer;
    letter-spacing:.15px;
    font-family:"Portfolio566", Arial, Helvetica, sans-serif;
    font-weight:400;
  }

  .nav:hover{opacity:.62}

  .nav.active text{
    text-decoration:underline;
    text-decoration-thickness:3px;
    text-underline-offset:6px;
  }

  .shadow{
    filter:url(#shadow);
  }

  .hidden{opacity:0}

  #ball{
    will-change:transform,opacity;
  }

  #downPath{
    opacity:0;
    transition:opacity .28s ease;
  }

  #downPath.open{opacity:1}

  #particles circle{
    pointer-events:none;
  }

  .twinkle{
    animation:twinkle 2.6s ease-in-out infinite;
    transform-box:fill-box;
    transform-origin:center;
  }

  @keyframes twinkle{
    0%,100%{opacity:.9}
    50%{opacity:.2}
  }

  .route-glint{
    animation:routeGlint 3.2s ease-in-out infinite;
  }

  @keyframes routeGlint{
    0%,100%{opacity:.35}
    50%{opacity:.9}
  }

  .nav text{
    paint-order:stroke fill;
    stroke:var(--bg);
    stroke-width:2px;
  }

  #pageTitle image{
    image-rendering:auto;
  }


  #pageTitle .title-letter{
    transform-box:fill-box;
    transform-origin:center;
    will-change:transform;
  }

  #pageTitle .title-letter image{
    image-rendering:auto;
  }