@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono/woff2/JetBrainsMono-Bold.woff2') format('woff2'),
      url('../fonts/JetBrainsMono/woff/JetBrainsMono-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* override browser default */
html,
body {
  margin: 0;
  padding: 0;
}

/* use viewport-relative units to cover page fully */
body {
  height: 100vh;
  width: 100vw;
}

/* include border and padding in element width and height */
* {
  box-sizing: border-box;
}

#haha {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1F232C;
}

#hello {
    font-family: 'JetBrains Mono';
    font-size: 800%;
    color: #DFD6D1;
}

/***************************************************
 * Generated by SVG Artista on 6/13/2024, 11:52:21 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

 svg .svg-elem-1 {
    stroke-dashoffset: 356.8000183105469px;
    stroke-dasharray: 356.8000183105469px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.3s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.3s;
  }
  
  svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }
  
  svg .svg-elem-2 {
    stroke-dashoffset: 310.19171142578125px;
    stroke-dasharray: 310.19171142578125px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.22s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.22s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
  }
  
  svg.active .svg-elem-2 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }
  
  svg .svg-elem-3 {
    stroke-dashoffset: 242.765869140625px;
    stroke-dasharray: 242.765869140625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.33999999999999997s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.33999999999999997s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
  }
  
  svg.active .svg-elem-3 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }
  
  svg .svg-elem-4 {
    stroke-dashoffset: 242.765869140625px;
    stroke-dasharray: 242.765869140625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45999999999999996s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6000000000000001s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45999999999999996s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6000000000000001s;
  }
  
  svg.active .svg-elem-4 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }
  
  svg .svg-elem-5 {
    stroke-dashoffset: 272.7465515136719px;
    stroke-dasharray: 272.7465515136719px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.58s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.58s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
  }
  
  svg.active .svg-elem-5 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }
  
  svg .svg-elem-6 {
    stroke-dashoffset: 94.82017517089844px;
    stroke-dasharray: 94.82017517089844px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  }
  
  svg.active .svg-elem-6 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }
  
  svg .svg-elem-7 {
    stroke-dashoffset: 597.5594482421875px;
    stroke-dasharray: 597.5594482421875px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.82s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9000000000000001s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.82s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9000000000000001s;
  }
  
  svg.active .svg-elem-7 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }
  
  svg .svg-elem-8 {
    stroke-dashoffset: 272.7467956542969px;
    stroke-dasharray: 272.7467956542969px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.94s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.94s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
  
  svg.active .svg-elem-8 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }
  
  svg .svg-elem-9 {
    stroke-dashoffset: 232.87582397460938px;
    stroke-dasharray: 232.87582397460938px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.06s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.06s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  }
  
  svg.active .svg-elem-9 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }
  
  svg .svg-elem-10 {
    stroke-dashoffset: 242.7660369873047px;
    stroke-dasharray: 242.7660369873047px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1800000000000002s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1800000000000002s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
  }
  
  svg.active .svg-elem-10 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }
  
  svg .svg-elem-11 {
    stroke-dashoffset: 351.01116943359375px;
    stroke-dasharray: 351.01116943359375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
  }
  
  svg.active .svg-elem-11 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }
  
  svg .svg-elem-12 {
    stroke-dashoffset: 171.20594787597656px;
    stroke-dasharray: 171.20594787597656px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.42s,
                          fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.42s,
                  fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
  }
  
  svg.active .svg-elem-12 {
    stroke-dashoffset: 0;
    fill: rgb(223, 214, 209);
  }