svelte unused css error

Header.svelte

<script>
	import { page } from '$app/stores';
  import BtnDarkMode from './BtnDarkMode.svelte';

  const nav_y_offset_bg = 130;

  const nav_y_offset_animation = 100;
  
  const nav_links = [
    {
      title: 'Leistungen',
      url:'/leistungen'
    },
    {
      title: 'Projekte',
      url:'/projekte'
    },
    {
      title: 'Kontakt',
      url:'/kontakt'
    }
  ]

  let scroll_y;

  $: header_offset_y = scroll_y < nav_y_offset_animation ? scroll_y/nav_y_offset_animation*10 : 10;

  
</script>

<svelte:window bind:scrollY={scroll_y}/>

<header 
  style="transform:translateY(-{header_offset_y}px)" 
  class:stuck={scroll_y >= nav_y_offset_bg}
>
  <div class="container">
    <a class="logo" href="/">
      <svg class="logo-form" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 379.28 400"><path d="M0,0V348.45a51.56,51.56,0,0,0,103.11,0v-278Z"/><path d="M137.8,0V348.45a51.56,51.56,0,0,0,103.11,0v-278Z"/><polygon points="275.61 231.6 275.61 0 379.28 70.41 275.61 231.6"/><circle cx="327.44" cy="348.16" r="51.84"/></svg>
      {#if $page.url.pathname !== '/' || scroll_y > nav_y_offset_bg}
        <svg class="logo-text" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 600.07 114.24"><path d="M14.24,90.75H3q-3,0-3-3V3A2.67,2.67,0,0,1,3,0H14.24a2.67,2.67,0,0,1,3,3V9.43H18Q23.13,0,36.83,0h5.88Q58.19,0,64.77,11.74A19.42,19.42,0,0,1,73.49,3,27.23,27.23,0,0,1,86.12,0h5.7q13,0,19.84,7.21t6.85,20.37V87.72a2.68,2.68,0,0,1-3,3H104.09q-3,0-3-3V28.29q0-13.17-12.81-13.17H83.1q-14.77,0-14.77,15.49V87.72q0,3-3.2,3H53.92a2.68,2.68,0,0,1-3-3V28.29q0-13.17-12.81-13.17H31.85q-14.59,0-14.59,15.13V87.72Q17.26,90.75,14.24,90.75Z"/><path d="M181.5,90.75H165.84q-13.17,0-20.38-7.3t-7.2-20.28V27.58q0-13.17,7.2-20.37T165.84,0H181.5q13,0,20.37,7.21t7.38,20.37V63.17q0,13-7.38,20.28T181.5,90.75ZM168.33,75.62h10.85q12.81,0,12.81-13V28.11q0-13-12.81-13H168.33q-6.77,0-9.79,3.12t-3,9.87V62.63q0,6.76,3,9.88T168.33,75.62Z"/><path d="M244,90.75H232.74c-2,0-3-1-3-3V3a2.67,2.67,0,0,1,3-3H244q3,0,3,3V9.79h.71a13.92,13.92,0,0,1,6.85-7.12A23.85,23.85,0,0,1,265.84,0h6.58q3,0,3,3v9.26q0,3.38-3,2.84H261.75Q247,15.12,247,31.32v56.4A2.68,2.68,0,0,1,244,90.75Z"/><path d="M303.56,90.75H292.35a2.68,2.68,0,0,1-3-3V3q0-3,3-3h11.21a2.67,2.67,0,0,1,3,3V9.79h.72a13.92,13.92,0,0,1,6.85-7.12A23.85,23.85,0,0,1,325.45,0H332a2.67,2.67,0,0,1,3,3v9.26c0,2.25-1,3.2-3,2.84H321.35q-14.76,0-14.77,16.2v56.4C306.58,89.74,305.58,90.75,303.56,90.75Z"/><path d="M390.39,90.75H374.73q-13.17,0-20.37-7.3t-7.21-20.28V27.58q0-13.17,7.21-20.37T374.73,0h15.66q13,0,20.38,7.21t7.38,20.37V63.17q0,13-7.38,20.28T390.39,90.75ZM377.23,75.62h10.85q12.81,0,12.81-13V28.11q0-13-12.81-13H377.23q-6.76,0-9.79,3.12t-3,9.87V62.63q0,6.76,3,9.88T377.23,75.62Z"/><path d="M470.46,90.75h-15.3c-1.78,0-3-1-3.56-3L431.14,3c-.48-2,.24-3,2.14-3h12.81q3.2,0,3.56,3l13,67.27h1.24L479.54,3c.36-2,1.48-3,3.38-3h11.74a3.51,3.51,0,0,1,3.74,3l15.3,67.27H515L527.94,3a3.27,3.27,0,0,1,3.56-3h12.81c2,0,2.73,1,2.13,3L526,87.72a3.27,3.27,0,0,1-3.56,3h-15.3q-2.85,0-3.56-3l-14.23-66h-1.25L474,87.72A3.27,3.27,0,0,1,470.46,90.75Z"/><path d="M587.44,37.44l1.67,1.09a2.67,2.67,0,0,1,.76,3.71L571.21,70.48a23.87,23.87,0,0,1,7.6-1.36,20.18,20.18,0,0,1,15.07,6.41,21.84,21.84,0,0,1,6.19,15.77,22.88,22.88,0,0,1-3,11.62,21.93,21.93,0,0,1-8.5,8.26,23.93,23.93,0,0,1-11.83,3.06,22.85,22.85,0,0,1-11.39-3,21.27,21.27,0,0,1-8.23-8.33,23.19,23.19,0,0,1-3-11.5,27.71,27.71,0,0,1,1.85-9.6,59.67,59.67,0,0,1,6.62-12.12l21.15-31.54A2.67,2.67,0,0,1,587.44,37.44ZM578.32,75.7A16.06,16.06,0,0,0,565,81.34a14.75,14.75,0,0,0-3.37,7.36,16.1,16.1,0,0,0,5.36,14.62A15.39,15.39,0,0,0,579,106.9a14.56,14.56,0,0,0,7.94-3.4,15.72,15.72,0,0,0,1.18-23.27A15,15,0,0,0,578.32,75.7Z"/></svg>
      {/if}
    </a>
    <nav>
      <ul>
        {#each nav_links as link}
        <li class:current={$page.url.pathname === link.url}>
          <a href="{link.url}">{link.title}</a>
        </li>
        {/each}
      </ul>
      <BtnDarkMode />
    </nav>
  </div>
</header>

<style lang="scss">
  header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    transition: transform .1s;
    font-family: $display-font;
    &::before {
      position: absolute;
      content:'';
      top:0;
      left: 0;
      right: 0;
      bottom: 10px;
      opacity: 0;
      z-index: -1;
      backdrop-filter: blur(10px);
      border-bottom: 1px solid #fff3;
      transition: opacity .3s;
      background-color: rgba($color-snowstorm-1, .5);
      html.dark & {
        border-bottom: 1px solid #0003;
        background-color: rgba($color-polarnight-4, .5);
      }
    }
    &.stuck::before {
      opacity: 1;
    }
  }

  header .container {
    height: $header-height;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    color: $color-polarnight-4;
    html.dark & {
      color: $color-snowstorm-1;
    }
  }

  a.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 15px;
    color: inherit;
    .logo-form {
      display: block;
      height: 28px;
      width: auto;
    }
    .logo-text {
      display: block;
      height: 20px;
      width: auto;
      position: relative;
      top:3px;
    }
  }

  nav {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    gap: 30px;
    align-items: center;
    ul {
      display: flex;
      align-items: center;
      gap: 30px;
      list-style: none;
    }
  }


  /* link hover animation */
  nav ul a {
    display: block;
    position: relative;
    transition: color 0.4s;
    text-decoration: none;
    color: inherit;

    &::before,
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      transform: scale3d(0, 1, 1);
      transform-origin: center left;
      transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    &::before {
      background-color: $color-polarnight-4;
      html.dark & {
        background-color: $color-snowstorm-1;
      }
      transition-delay: 0.4s;
    }
    &::after {
      background-color: $color-frost-2;
    }
    &:hover,
    &:focus {
      color: inherit;
      &::before {
        transform: scale3d(1, 1, 1);
        transition-delay: 0s;
      }
    }
  }

  nav ul li.current {
    a,
    a:hover,
    a:focus {
      color: $color-frost-2;
    }
    a::after,
    a::before {
      transform: scale3d(1, 1, 1);
    }
    a::before {
      transition-delay: 0s;
    }
  }


</style>