<template>
  <div class="logo">
    <div v-if="$colorMode.value == 'dark'">
      <svg
        width="40"
        height="40"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 509 454.27"
      >
        <path
          d="M363.3,307.79v.31l.28-.48Z"
          fill="#fff"
          stroke="#fff"
          stroke-miterlimit="10"
          stroke-width="9"
        />
        <path
          d="M16.88,307.79v.3l.27-.46ZM83.1,350.1l.15.25.14-.08Z"
          fill="#fff"
          stroke="#fff"
          stroke-miterlimit="10"
          stroke-width="9"
        />
        <path
          d="M433.22,259.49V139.58l-102-58.85V49.53L254.48,5.2,251.38,7,177.69,49.53V80.79L75.85,139.58V259.44L4.5,300.64v88.68l76.79,44.33,73.27-42.3,100,57.73,100-57.71,73.23,42.28,76.79-44.33V300.64ZM254.48,19.5l57.89,33.41L254,86.37C238.27,77,212.74,61.79,197.24,52.54Zm64.41,43.94v67.62l-58.22,33.61V96.81Zm-128.82-.75c13.83,8.23,44,26.24,58.22,34.69v67.29l-58.22-33.61ZM16.88,307.79l.27-.16-.27.46Zm58.22,108L16.88,382.16V313.8L75.1,348.49Zm5.7-78.29c.71.41-55.37-33-56.76-33.82L81.29,270.6,139.18,304Zm2.45,12.87-.15-.25.29.17Zm62.45,31.81-3.52,2-54.7,31.57V347.92l58.22-33.37Zm205.22-81.52v78.49l-96.39,55.65-96.45-55.69V300.64L88.23,260.32V146.73l89.46-51.65V138.2l76.79,44.33,76.79-44.33V95l89.57,51.71V260.27Zm12.66,7-.28.48v-.31Zm57.94,108.15-54.65-31.55-3.57-2.06V313.79l58.22,34.7Zm5.7-78.29-56.76-33.82,57.25-33.06L485.59,304Zm64.9,44.68L433.9,415.77V347.92l58.22-33.37Z"
          fill="#fff"
          stroke="#fff"
          stroke-miterlimit="10"
          stroke-width="9"
        />
        <path
          d="M83.1,350.1l.15.25.14-.08Zm0,0,.15.25.14-.08Zm0,0,.15.25.14-.08Z"
          fill="#fff"
          stroke="#fff"
          stroke-miterlimit="10"
          stroke-width="9"
        />
        <path
          d="M322.58,277.47l-34.44-57.86a9.2,9.2,0,0,0-3.4-3.3,9.47,9.47,0,0,0-12.67,3.3l-8.81,14.8L246,205.46c-3.46-6-12.61-6-16.07,0l-42.86,72a8.78,8.78,0,0,0,0,9,9.33,9.33,0,0,0,8,4.5h32.19c12.76,0,22.16-5.43,28.64-16,5.44-9.14,18.84-31.66,24.13-40.53l25.26,42.44H271.68L263.26,291h51.29C321.45,291.06,326.22,283.5,322.58,277.47Zm-79-10c-4.3,6.87-9.18,9.38-16.76,9.38H204.34L238,220.24l16.8,28.3Z"
          fill="#fff"
          stroke="#fff"
          stroke-miterlimit="10"
          stroke-width="9"
        />
      </svg>
    </div>

    <div v-else>
      <svg
        width="40"
        height="40"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 509 454.27"
      >
        <path
          d="M363.3,307.79v.31l.28-.48Z"
          stroke="#000"
          stroke-miterlimit="10"
          stroke-width="9"
        />
        <path
          d="M16.88,307.79v.3l.27-.46ZM83.1,350.1l.15.25.14-.08Z"
          stroke="#000"
          stroke-miterlimit="10"
          stroke-width="9"
        />
        <path
          d="M433.22,259.49V139.58l-102-58.85V49.53L254.48,5.2,251.38,7,177.69,49.53V80.79L75.85,139.58V259.44L4.5,300.64v88.68l76.79,44.33,73.27-42.3,100,57.73,100-57.71,73.23,42.28,76.79-44.33V300.64ZM254.48,19.5l57.89,33.41L254,86.37C238.27,77,212.74,61.79,197.24,52.54Zm64.41,43.94v67.62l-58.22,33.61V96.81Zm-128.82-.75c13.83,8.23,44,26.24,58.22,34.69v67.29l-58.22-33.61ZM16.88,307.79l.27-.16-.27.46Zm58.22,108L16.88,382.16V313.8L75.1,348.49Zm5.7-78.29c.71.41-55.37-33-56.76-33.82L81.29,270.6,139.18,304Zm2.45,12.87-.15-.25.29.17Zm62.45,31.81-3.52,2-54.7,31.57V347.92l58.22-33.37Zm205.22-81.52v78.49l-96.39,55.65-96.45-55.69V300.64L88.23,260.32V146.73l89.46-51.65V138.2l76.79,44.33,76.79-44.33V95l89.57,51.71V260.27Zm12.66,7-.28.48v-.31Zm57.94,108.15-54.65-31.55-3.57-2.06V313.79l58.22,34.7Zm5.7-78.29-56.76-33.82,57.25-33.06L485.59,304Zm64.9,44.68L433.9,415.77V347.92l58.22-33.37Z"
          stroke="#000"
          stroke-miterlimit="10"
          stroke-width="9"
        />
        <path
          d="M83.1,350.1l.15.25.14-.08Zm0,0,.15.25.14-.08Zm0,0,.15.25.14-.08Z"
          stroke="#000"
          stroke-miterlimit="10"
          stroke-width="9"
        />
        <path
          d="M322.58,277.47l-34.44-57.86a9.2,9.2,0,0,0-3.4-3.3,9.47,9.47,0,0,0-12.67,3.3l-8.81,14.8L246,205.46c-3.46-6-12.61-6-16.07,0l-42.86,72a8.78,8.78,0,0,0,0,9,9.33,9.33,0,0,0,8,4.5h32.19c12.76,0,22.16-5.43,28.64-16,5.44-9.14,18.84-31.66,24.13-40.53l25.26,42.44H271.68L263.26,291h51.29C321.45,291.06,326.22,283.5,322.58,277.47Zm-79-10c-4.3,6.87-9.18,9.38-16.76,9.38H204.34L238,220.24l16.8,28.3Z"
          stroke="#000"
          stroke-miterlimit="10"
          stroke-width="9"
        />
      </svg>
    </div>
	
    <ProseStrong>tRPC Nuxt</ProseStrong>
  </div>
</template>

<style scoped>
	.logo {
		display: flex;
		align-items: center;
		gap: 10px;
		font-weight: 800;
	}
</style>
