@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap";

/* color palette from <https://github.com/vuejs/theme> */
@font-face {
  font-family:"lores-9-minus-wide";
  src:url("https://use.typekit.net/af/435fdf/00000000000000007735bf80/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/435fdf/00000000000000007735bf80/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/435fdf/00000000000000007735bf80/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
*,:before,:after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}
@font-face{
  font-family:ClashGrotesk;
  font-style:normal;
  font-weight:200;
  src:local("ClashGrotesk"),
  url(../ttf/ClashGrotesk-Extralight-3L17SZ0j.ttf) format("truetype")
}
@font-face{
  font-family:ClashGrotesk;
  font-style:normal;
  font-weight:300;
  src:local("ClashGrotesk"),
  url(../ttf/ClashGrotesk-Light-Db5deW6P.ttf) format("truetype")
}
@font-face{
  font-family:ClashGrotesk;
  font-style:normal;
  font-weight:400;
  src:local("ClashGrotesk"),
  url(../ttf/ClashGrotesk-Regular-BPwOxqjJ.ttf) format("truetype")
}
@font-face{
  font-family:ClashGrotesk;
  font-style:normal;
  font-weight:500;
  src:local("ClashGrotesk"),
  url(../ttf/ClashGrotesk-Medium-Dl97H9mo.ttf) format("truetype")
}
@font-face{
  font-family:ClashGrotesk;
  font-style:normal;
  font-weight:600;
  src:local("ClashGrotesk"),
  url(../ttf/ClashGrotesk-Semibold-j1h64Bed.ttf) format("truetype")
}
@font-face{
  font-family:ClashGrotesk;
  font-style:normal;
  font-weight:700;
  src:local("ClashGrotesk"),
  url(../ttf/ClashGrotesk-Bold-alnSQt0l.ttf) format("truetype")
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-family:ClashGrotesk;
  font-weight: normal;
}
body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@keyframes _preloader_d3brk_1{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes clouds{0%{transform:translate(0)}to{transform:translate(-1920px)}}
@keyframes pulse{50%{opacity:.5}}
@keyframes signRotation{0%,to{transform:rotate(0)}50%{transform:rotate(5deg)}}
@keyframes signRotationScale{0%,to{transform:rotate(0) scale(1.2);}50%{transform:rotate(5deg) scale(1.2);}}
@keyframes arrowleft{0%,to{transform:translate(0)}50%{transform:translate(-8px)}}
@keyframes arrowright{0%,to{transform:translate(0)}50%{transform:translate(8px)}}
.pd-0 {
  padding: 0px;
}
.pd-1 {
  padding: 1px;
}
.pd-2 {
  padding: 2px;
}
.pd-3 {
  padding: 3px;
}
.pd-4 {
  padding: 4px;
}
.pd-5 {
  padding: 5px;
}
.pd-6 {
  padding: 6px;
}
.pd-7 {
  padding: 7px;
}
.pd-8 {
  padding: 8px;
}
.pd-9 {
  padding: 9px;
}
.pd-10 {
  padding: 10px;
}
.pd-11 {
  padding: 11px;
}
.pd-12 {
  padding: 12px;
}
.pd-13 {
  padding: 13px;
}
.pd-14 {
  padding: 14px;
}
.pd-15 {
  padding: 15px;
}
.pd-16 {
  padding: 16px;
}
.pd-17 {
  padding: 17px;
}
.pd-18 {
  padding: 18px;
}
.pd-19 {
  padding: 19px;
}
.pd-20 {
  padding: 20px;
}
.pd-21 {
  padding: 21px;
}
.pd-22 {
  padding: 22px;
}
.pd-23 {
  padding: 23px;
}
.pd-24 {
  padding: 24px;
}
.pd-25 {
  padding: 25px;
}
.pd-26 {
  padding: 26px;
}
.pd-27 {
  padding: 27px;
}
.pd-28 {
  padding: 28px;
}
.pd-29 {
  padding: 29px;
}
.pd-30 {
  padding: 30px;
}
.pd-31 {
  padding: 31px;
}
.pd-32 {
  padding: 32px;
}
.pd-33 {
  padding: 33px;
}
.pd-34 {
  padding: 34px;
}
.pd-35 {
  padding: 35px;
}
.pd-36 {
  padding: 36px;
}
.pd-37 {
  padding: 37px;
}
.pd-38 {
  padding: 38px;
}
.pd-39 {
  padding: 39px;
}
.pd-40 {
  padding: 40px;
}
.xxl:pd-2 {
  padding: 2px;
}
.xxl:pd-3 {
  padding: 3px;
}
.xxl:pd-4 {
  padding: 4px;
}
.xxl:pd-5 {
  padding: 5px;
}
.xxl:pd-6 {
  padding: 6px;
}
.xxl:pd-7 {
  padding: 7px;
}
.xxl:pd-8 {
  padding: 8px;
}
.xxl:pd-9 {
  padding: 9px;
}
.xxl:pd-10 {
  padding: 10px;
}
.xxl:pd-11 {
  padding: 11px;
}
.xxl:pd-12 {
  padding: 12px;
}
.xxl:pd-13 {
  padding: 13px;
}
.xxl:pd-14 {
  padding: 14px;
}
.xxl:pd-15 {
  padding: 15px;
}
.xxl:pd-16 {
  padding: 16px;
}
.xxl:pd-17 {
  padding: 17px;
}
.xxl:pd-18 {
  padding: 18px;
}
.xxl:pd-19 {
  padding: 19px;
}
.xxl:pd-20 {
  padding: 20px;
}
.xxl:pd-21 {
  padding: 21px;
}
.xxl:pd-22 {
  padding: 22px;
}
.xxl:pd-23 {
  padding: 23px;
}
.xxl:pd-24 {
  padding: 24px;
}
.xxl:pd-25 {
  padding: 25px;
}
.xxl:pd-26 {
  padding: 26px;
}
.xxl:pd-27 {
  padding: 27px;
}
.xxl:pd-28 {
  padding: 28px;
}
.xxl:pd-29 {
  padding: 29px;
}
.xxl:pd-30 {
  padding: 30px;
}
.xxl:pd-31 {
  padding: 31px;
}
.xxl:pd-32 {
  padding: 32px;
}
.xxl:pd-33 {
  padding: 33px;
}
.xxl:pd-34 {
  padding: 34px;
}
.xxl:pd-35 {
  padding: 35px;
}
.xxl:pd-36 {
  padding: 36px;
}
.xxl:pd-37 {
  padding: 37px;
}
.xxl:pd-38 {
  padding: 38px;
}
.xxl:pd-39 {
  padding: 39px;
}
.xxl:pd-40 {
  padding: 40px;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
#app {
  font-weight: normal;
}
a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}
.btn-ui{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  border-radius: .5rem;
  transition-duration: .2s;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  overflow: hidden;
  padding: 0 12px;
  margin-right: 8px;
  border: 1px solid #ffffff80;
  background-color: #f4eaf566;
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  font-weight: 500;
  svg{
    width: 24px;
  }
  &:hover{
    background-color: #f4eaf599;
  }
  &.private{
    padding: 0 16px;
    border: none;
    font-weight: 600;
    background-color: #ff8500;
    color: #FFF;
    span {
      margin-left: 8px;
      font-weight: 600;
    }
    &:hover{
      background-color: #e87900;
    }
  }
}
.btn-inline-block {
  display: flex;
  &.btn-ui {
    flex: 0;
  }
}
@media (max-width: 750px) {
  .btn-ui{
    height: 32px;
    padding: 0 4px;
    margin-right: 4px;
    &.private{
      height: 40px;
      span{
        display: none;
      }
    }
    svg{
      width: 20px;
    }
  }
}
@media (max-width: 600px) {
  .btn-ui{
    height: 32px;
    padding: 0 4px;
    margin-right: 4px;
    &.private{
      height: 32px;
      padding: 0 12px;
      font-size: 12px;
      span{
        display: none;
      }
    }
    svg{
      width: 20px;
    }
  }
}