html {
  height: 100%;
  width: 100%;
  overflow: hidden;
  top: 0;
  overscroll-behavior: none;
  position: fixed;
  background: #000;
}

  :root {
    --smoof: .7;
    --fac: 1;

    --backtrans: cubic-bezier(.46,.03,.09,.99);
    --ease-in: cubic-bezier(.71,0,.65,.34);
    --ease-out: cubic-bezier(.165,.84,.44,1);
    --ease-out-bounce: cubic-bezier(.185,.94,.26,1.17);
    --ease-in-strong: cubic-bezier(.83,0,.865,.195);
    --ease-out-strong: cubic-bezier(0,1,.15,1);
    --ease: cubic-bezier(.25,.1,.25,1);
    --sine: cubic-bezier(.445,.05,.55,.95);
    --bounce: cubic-bezier(.655,.66,.185,1.265);
  }

  body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
    caret-color: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
  }

  .abs {position: absolute}
  .rel {position: relative}

  .abs10 {
    position: absolute;
    z-index: 10;
  }
  .above {
    z-index: 100;
  }

  .hid {display: none;opacity: 0}

  .full {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }
  .full.vh {
    position: fixed;
    width: 100vw;
    height: 100vh;
  }

  .mid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .mid.o {
    width: 0;
    height: 0;
  }

  .midx {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .midy {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .bdrop {
    backdrop-filter: blur(2vmin);
  }

  .noclick {
    pointer-events: none;
    touch-action: none;
  }

  .nofocus {
    user-select: none;
    -webkit-user-select: none;
  }

  .noselect, .noselect div, .noselect p, .noselect *, .noselect input {
    user-select: none!important;
    -webkit-user-select: none!important;
    -moz-user-select: none;
    -ms-user-select: none;
    caret-color: transparent;
  }
  .noselect::selection {
    color: currentColor;
    background-color: transparent;
  }

  .deact {filter: contrast(0.5);pointer-events: none}

  .hidy { transform: scale(0)!important }
  .hidx { transform: scaleX(0)!important }
  .nomar { margin: 0!important }
  .smscrl {scroll-behavior: smooth}

  .shrunk, .shrunk * {
    margin: 0vh!important;
    padding: 0vh!important;
    font-size: 0vh!important;
    border: 0vh!important;
    overflow: hidden;
    /* transition: all calc(var(--smoof)* var(--fac)* 1s) cubic-bezier(0.44, 0.07, 0.57, 0.93); */
    /* border-radius: 50%; */
    --fac: 1;
  }

  .shrunk.x, .shrunk.x {
    width: 0vh!important;
    min-width: 0vh!important;
  }
  .shrunk.y, .shrunk.y {
    height: 0vh!important;
    min-height: 0vh!important;
  }
  .shrunk.flx, .shrunk.flx {
    flex: 0 0 0vh!important;
  }

  .shrunk.x.all *, .shrunk.x.all * {
    width: 0vh!important;
    min-width: 0vh!important;
  }
  .shrunk.y.all *, .shrunk.y.all * {
    height: 0vh!important;
    min-height: 0vh!important;
  }
  .shrunk.flx.all *, .shrunk.flx.all * {
    flex: 0 0 0vh!important;
  }

  .clickShld {
    overscroll-behavior: none;
    background-color: rgba(36, 49, 58, .5);
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    backdrop-filter: blur(5px) brightness(.5) contrast(.8);
  }

  /* ::: flex! ::: */
  .ctext {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    text-align: center;
    user-select: none;
    word-wrap: break-word;
    font-size: 2rem;
  }

  .cflex {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flexrow {
    display: flex;
    flex-direction: row;
  }
  .rowc {
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: row!important;
    justify-content: space-around;
    justify-items: center;
    /* margin: 1vh; */
  }

  .clmn { flex-direction: column }


  .trs {transition: all calc(var(--smoof)* var(--fac)* 1s) cubic-bezier(0.44, 0.07, 0.57, 0.93)}
  .trs.all * {transition: all calc(var(--smoof)* var(--fac)* 1s) cubic-bezier(0.44, 0.07, 0.57, 0.93)}
  .trsb {transition: all calc(var(--smoof)* var(--fac)* 1s) cubic-bezier(0.36, 0.31, 0.29, 0.98)}

  .trs_var {
    transition: var(--all) calc(var(--smoof)* var(--fac)* 1s) cubic-bezier(0.44, 0.07, 0.57, 0.93);
    --all: all;
  }

  .trso {/* transition: opacity calc(var(--smoof)* var(--fac)* 1s) cubic-bezier(0.44, 0.07, 0.57, 0.93); */}

  .notrs {transition: none!important}

  .trstrf {
    transition: transform calc(var(--smoof)* var(--fac)* 1s) cubic-bezier(0.44, 0.07, 0.57, 0.93) !important;
    --fac: 1 !important;
  }

  .box {box-sizing: border-box}
  .wfit {width: fit-content}
  .hfit {height: fit-content}

  .picCover {
    background-size: cover;
    background-position: center;
  }




  /* : TAPS : */

  ._brTap {
    border: var(--inset) solid #0000;
    --inset: 15%;
    cursor: pointer;
  }

  ._btnTap {--inset: -0.7rem;}
  ._btnTap::after {
    content: "";
    position: absolute;
    z-index: 10;
    inset: var(--inset);
    border-radius: inherit;
    cursor: pointer;
    user-select: none!important;
  }


  .btnTap, .btnTapH, .btnTapW {
    position: absolute;
    z-index: 10;
    inset: -0.7rem;
    border-radius: inherit;
    cursor: pointer;
    user-select: none!important;
  }
  .btnTap.up {
    inset: -0.7rem -0.7rem -0.2rem -0.7rem;
  }
  .btnTapH {
    inset: -150% -25%;
    cursor: grab
  }
  .btnTapW {
    inset: -25% -150%;
    cursor: grab
  }


  ._rndbtn {
    position: relative;
    width: var(--w);
    height: var(--w);
    border-radius: 36%;
    box-shadow: inset 0.1em 0.07em 0.25em #fff3, inset -0.1em -0.1em 0.2em #0003;
    --w: 3.6rem;
    font-size: 2.5rem;
  }

  .colorPiece {
    border-radius: 50px;
    box-shadow: inset .2vh .3vh 0.8vh #fffa, inset -0.3vh -0.2vh 0.8vh #0008, 0.3vh 0.5vh 0.9vh #2224;
    --vh: 5vh;
    width: var(--vh);
    height: var(--vh);
    flex: 0 0 var(--vh);
    margin: .5vh;
    /* transition: transform 2s ease, height 2s ease, flex 2s ease, width 2s ease, margin 2s ease, opacity 2s ease-in, color .5s; */
    /* --fac: 2.1; */
    transition: inherit;
  }

  /* ::: scrolls ::: */


  .scroll::-webkit-scrollbar {
    width: 2vh;
  }

  .scroll.small::-webkit-scrollbar {
    width: .25rem;
  }

  .scroll.x {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .scroll.y {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .scroll.no::-webkit-scrollbar {
    display: none;
  }


  .scroll::-webkit-scrollbar-button, .scrollX::-webkit-scrollbar-button {
    display: none;
  }


  .scroll::-webkit-scrollbar-thumb:hover {
    /* background-size: 88% 100%; */
    /* background: linear-gradient(transparent 0%, #3dd 45%, currentColor 55%, transparent 100%); */

  }
  .scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(transparent 0%, currentColor 45%, currentColor 55%, transparent 100%);
    background-repeat: repeat-y;
    background-size: 15% 100%;
    background-position: right;
    cursor: grab;
    transition: all 1s;
  }
  .scroll::-webkit-scrollbar-thumb:active {
    cursor: grabbing;
  }

  .scroll.small::-webkit-scrollbar-thumb {
    background-size: 100%;
  }

  .scroll::-webkit-scrollbar-track {
    background-color: #0003;
    background-color: transparent;
  }


  .scrollX::-webkit-scrollbar {
    -ms-overflow-style: none;
    display: none;
    width: 0;
    height: 0;
  }
  .scrollX { scrollbar-width: none }

  .scrY {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .scrX {
    overflow-y: hidden;
    scrollbar-height: 0.26vh;
    /* scrollbar-width: none;
    -ms-overflow-style: none; */
  }
  .scrX::-webkit-scrollbar {
    height: 2vh;
    border-radius: 50%;
  }

  .scrX::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #0000 0%, currentColor 49%, currentColor 51%, #0000 100%);
    background-repeat: repeat-x;
    background-size: 100% 15%;
    background-position: center;
    cursor: pointer;
  }

  .scrX::-webkit-scrollbar-track {
    background-color: #0000;
  }





  .contour {box-shadow: inset 0 0 .5vmax -.2vh #fff8;}

  .insetVar {
    box-shadow: inset var(--shx) var(--shy) var(--shb) var(--shin) var(--shc);
    --shc: currentColor;
    --shb: 1vh;
    --shin: -0.2vh;
    --shx: 0;
    --shy:  0;
  }

  .bxshVar {
    box-shadow: var(--shx) var(--shy) var(--shb) var(--shin) var(--shc);
    --shc: currentColor;
    --shb: 1vh;
    --shin: -0.2vh;
    --shx: 0;
    --shy:  0;
  }

  .flufVar {
    box-shadow: inset var(--shx) var(--shy) var(--shbin) var(--shin) var(--shc0),
    var(--shx) var(--shy) var(--shb) var(--shin) var(--shc1);
    --shc0: currentColor;
    --shc1: currentColor;
    --shb: 1vh;
    --shin: -0.2vh;
    --shx: 0;
    --shy: 0;
    --shbin: var(--shb);


    );
  }

  .graded {
    background: linear-gradient(var(--deg), var(--bgc1) 35%, var(--bgc0) 100%);
    --deg: -45deg;
  }

  .graded.var {
    /* --bgc0: hsl(var(--a), calc(var(--sat)*1%), calc(var(--t)*15% + var(--light)*1%)); */
    /* --bgc1: hsl(calc(var(--a) + var(--b)), calc(var(--sat)*1%), calc(var(--t)*15% + var(--light)*1%)); */
  }

  .petal {
    width: calc(var(--w) * 1%);
    height: calc(var(--w) * 1%);
    --bgc: hsl(var(--a), calc(var(--sat)*1%), calc(var(--t)*15% + var(--light)*1%));
    background: var(--bgc);
    color: var(--bgc);
    box-shadow: inset var(--shx) var(--shy) var(--shb) var(--shin)
    hsl(calc(var(--a)), calc(var(--sat)*1% - 10%), calc(var(--t)*15% + var(--light)*1% + 15%)),
    var(--shx) var(--shy) var(--shb2) var(--shin)
    hsl(calc(var(--a)), calc(var(--sat)*1% - 10%), calc(var(--t)*15% + var(--light)*1% + 15%));
    transform: translate(-50%, -50%) rotate(var(--rad)) scale(var(--sf)) translateZ(0);
     /* rotate3d(1, 1, 1, var(--r3d)); */
    border-radius: var(--brr);
    mix-blend-mode: var(--mx);
    --deg: -45deg;
  }


  .petal.grad {
    background: linear-gradient(
      var(--deg),
      hsl(var(--a), calc(var(--sat)*1%), calc(var(--t)*15% + var(--light)*1%)) 35%,
      hsl(calc(var(--a) + var(--b)), calc(var(--sat)*1%), calc(var(--t)*15% + var(--light)*1%)) 100%
    );
    box-shadow: inset var(--shx) var(--shy) var(--shb) var(--shin)
    hsl(calc(var(--a) - var(--b)), calc(var(--sat)*1% - 10%), calc(var(--t)*15% + var(--light)*1% + 15%)),
    var(--shx) var(--shy) var(--shb2) var(--shin)
    hsl(calc(var(--a) + var(--b)*2), calc(var(--sat)*1% - 10%), calc(var(--t)*15% + var(--light)*1% + 15%));

  }

  .petal.svg {
    --rad: 0;
    background: none;
    color: var(--bgc);
    box-shadow: none;
    /* filter: drop-shadow(var(--shx) var(--shy) var(--shb) hsl(calc(var(--a)), calc(var(--sat)*1% - 10%), calc(var(--t)*15% + var(--light)*1% + 15%))); */

  }

  .petal.chroma {
    background: linear-gradient(
      var(--deg),
      hsl(calc(var(--start) + var(--t) * var(--range)), calc(var(--sat)*1%), calc(var(--t)*20% + var(--light)*1%)) 35%,
      hsl(calc(var(--start) + var(--t) * var(--range)), calc(var(--sat)*1%), calc(var(--t)*20% + var(--light)*1%)) 100%
    );
    box-shadow: none;
    /* box-shadow: inset var(--shx) var(--shy) var(--shb) var(--shin)
    hsl(calc(var(--a) - var(--b)), calc(var(--sat)*1% - 10%), calc(var(--t)*15% + var(--light)*1% + 15%)),
    var(--shx) var(--shy) var(--shb) var(--shin)
    hsl(calc(var(--a) + var(--b)*2), calc(var(--sat)*1% - 10%), calc(var(--t)*15% + var(--light)*1% + 15%)); */
  }


  .petal_nope {
    width: calc(var(--w) * 1%);
    height: calc(var(--w) * 1%);
    background: linear-gradient(
      var(--deg),
      var(--bgc0) 35%,
      var(--bgc1) 100%
    );

    box-shadow: inset var(--shx) var(--shy) var(--shb) var(--shin)
    hsl(calc(var(--a) - var(--b)), calc(var(--sat)*1% - 10%), calc(var(--t)*15% + var(--light)*1% + 15%)),
    var(--shx) var(--shy) var(--shb) var(--shin)
    hsl(calc(var(--a) + var(--b)*2), calc(var(--sat)*1% - 10%), calc(var(--t)*15% + var(--light)*1% + 15%));
    transform: translate(-50%, -50%) rotate(var(--rad)) scale(var(--sf)) translateZ(0);
     /* rotate3d(1, 1, 1, var(--r3d)); */
    border-radius: var(--brr);
    mix-blend-mode: var(--mx);
  }


  .btnPressed svg, .svgPressed svg {
    color: var(--c) !important;
    filter: drop-shadow(-0.3px -0.2px 0.4px #222) drop-shadow(0.4px 0.4px 0.6px);
    --c: #ffba6a;
  }


  .rotateHue {
    animation: rotateHue 20s linear infinite;
    filter: hue-rotate(var(--hueR));
  }

  @property --hueR {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes rotateHue { 0% { --hueR: 0deg } 100% { --hueR: 360deg } }

  @property --a {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
  }
  @property --b {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
  }



  .ionRight{--oo: 0}
  .ionRight::after {
    content: ' ';
    position: absolute;
    top: -7%;
    left: 108%;
    width: 0.14em;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: currentColor;
    opacity: var(--oo);
    transition: all 1.3s ease-out;
    /* filter: brightness(1.3); */
    /* box-shadow: 0 0 0.01em .02em #fffa, inset 0 0 0.04em .01em #111; */
  }


  ._textShine {
    text-shadow: 0 0 0.5em #fff7;
  }


  input::-webkit-inner-spin-button,
  input::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
  input [type='number'] {
    -moz-appearance: textfield;
  }

  .inputAbove {
    text-align: center;
    z-index: 15;
    bottom: 110%;
    width: 90%;
    padding-bottom: 0.3vh;
    aspect-ratio: 1;
    background: #fff1;
    color: #aaa;
    border: none;
    outline: none;
    backdrop-filter: blur(.2vh);
    border-radius: 50%;
    /* font: 300 1.8vh 'Inter Tight'; */
    font: 300 2vh 'Ysabeau Office';
    -moz-appearance: textfield;
    appearance: textfield;
    cursor: default;
  }


  .progBar {
    contain: content;
    --prog: 0;
  }

  .progBar::after {
    content: '';
    position: absolute;
    left: 0;
    width: calc(var(--prog) * 100%);
    height: 100%;
    background: currentColor;
    transition: none;
    opacity: .4;
  }

  .insetCur {
    box-shadow: inset 0 var(--y) var(--vh1) -0.2vh;
    --vh1: 1vh;
    --y: 0;
  }


  .uploading {
    animation: uploading var(--s) infinite;
    background-image: linear-gradient(var(--deg), transparent, #ffffff52, transparent);
    background-repeat: round;
    background-size: contain;
    animation-timing-function: linear;
    --deg: 0deg;
    --s: 7s;
  }

  .uploading.x {
    background-color: unset;
    background-image: linear-gradient(var(--deg), #f5f5f5aa, #ffffff12, #f5f5f5aa);
    animation: uploadingX var(--s) infinite;
    animation-timing-function: linear;
    animation-direction: var(--dir);
    --dir: normal;
    --s: 7s;
    --deg: -90deg;
  }


  @keyframes glare {
    0% {
      background-position: 0 0%;
    }
    50% {
      background-position: 0 -50%;
    }
    100% {
      background-position: 0 -100%;
    }
  }

  @keyframes uploading {
    0% {
      background-position: 0 0;
      box-shadow: 0 0 0.4vh #ffffff80;
    }
    50% {
      background-position: 0 -5.3vh;
      box-shadow: 0 0 0.4vh rgba(255, 255, 255, 0.8);
    }
    100% {
      background-position: 0 -10.6vh;
      box-shadow: 0 0 0.4vh #ffffff80;
    }
  }

  @keyframes uploadingX {
    0% {
      background-position: 0 0;
      box-shadow: 0 0 .2vh #ffffff80;
    }
    40% {
      background-position: 3.8vh 0;
      box-shadow: 0 0 .2vh rgba(255, 255, 255, 0.8);
    }
    70% {
      background-position: 5.1vh 0;
      box-shadow: 0 0 .2vh rgba(255, 255, 255, 0.8);
    }
    100% {
      background-position: 11.4vh 0;
      box-shadow: 0 0 .2vh #ffffff80;
    }
  }

  ._shino:hover {
    text-shadow: 0 0 .4em;
    --fac: 1.2;
  }



  button {
    border-width: 0;
  }



  /* latin */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-300-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-300-normal.woff) format('woff');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  /* cyrillic */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-300-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-300-normal.woff) format('woff');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-ext-300-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-ext-300-normal.woff) format('woff');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }



  /* cyrillic-ext */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-ext-300-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-ext-300-normal.woff) format('woff');
    unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  }


  /* latin */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-400-normal.woff) format('woff');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  /* cyrillic */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-400-normal.woff) format('woff');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-ext-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-ext-400-normal.woff) format('woff');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }

  /* cyrillic-ext */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-ext-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-ext-400-normal.woff) format('woff');
    unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  }


  /* latin */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-500-normal.woff) format('woff');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  /* cyrillic */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-500-normal.woff) format('woff');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-ext-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-ext-500-normal.woff) format('woff');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }



  /* cyrillic-ext */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-ext-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-ext-500-normal.woff) format('woff');
    unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  }


  /* latin */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-600-normal.woff) format('woff');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  /* cyrillic */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-600-normal.woff) format('woff');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-ext-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-ext-600-normal.woff) format('woff');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }



  /* cyrillic-ext */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-ext-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-ext-600-normal.woff) format('woff');
    unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  }


  /* latin */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-700-normal.woff) format('woff');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  /* cyrillic */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-700-normal.woff) format('woff');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-ext-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-latin-ext-700-normal.woff) format('woff');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }



  /* cyrillic-ext */
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-ext-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/comfortaa/files/comfortaa-cyrillic-ext-700-normal.woff) format('woff');
    unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  }



  /* latin */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 200;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-200-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-200-normal.woff) format('woff');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }


  /* cyrillic */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 200;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-200-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-200-normal.woff) format('woff');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 200;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-ext-200-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-ext-200-normal.woff) format('woff');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }



  /* cyrillic-ext */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 200;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-ext-200-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-ext-200-normal.woff) format('woff');
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  }



  /* latin */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-300-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-300-normal.woff) format('woff');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }


  /* cyrillic */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-300-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-300-normal.woff) format('woff');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-ext-300-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-ext-300-normal.woff) format('woff');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }



  /* cyrillic-ext */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-ext-300-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-ext-300-normal.woff) format('woff');
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  }



  /* latin */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-400-normal.woff) format('woff');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }


  /* cyrillic */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-400-normal.woff) format('woff');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-ext-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-ext-400-normal.woff) format('woff');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }



  /* cyrillic-ext */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-ext-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-ext-400-normal.woff) format('woff');
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  }


  /* latin */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-500-normal.woff) format('woff');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  /* cyrillic */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-500-normal.woff) format('woff');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-ext-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-ext-500-normal.woff) format('woff');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }



  /* latin */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-600-normal.woff) format('woff');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }


  /* cyrillic */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-600-normal.woff) format('woff');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-ext-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-latin-ext-600-normal.woff) format('woff');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }


  /* cyrillic-ext */
  @font-face {
    font-family: 'Ysabeau Office';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-ext-600-normal.woff2) format('woff2'), url(https://fonts.bunny.net/ysabeau-office/files/ysabeau-office-cyrillic-ext-600-normal.woff) format('woff');
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
  }