@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, Helvetica, Arial,
    sans-serif;
}

.logo {
  font-family: Figtree, sans-serif;
  font-weight: 600;
  font-style: italic;
}

/* .container {
  max-width: 1600px !important;
} */

@-webkit-keyframes spinAround {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spinAround {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.is-hero {
  font-size: 5rem;
  font-weight: 900 !important;
}

.is-bolder {
  font-weight: 900 !important;
}

.short {
  p {
    font-style: italic;
    margin-left: 1rem;
    line-height: 1.1rem !important;
  }
  blockquote {
    p {
      line-height: 1.2rem !important;
    }
  }
}

a {
  color: #f50c5f;
}

.is-sparkly {
  background-color: rgb(245, 12, 95);
  color: white;
}

.has-text-colour-sparkly {
  color: rgb(245, 12, 95);
}

.company {
  filter: grayscale(80%) opacity(60%);
}

.underline {
  /*   background: red; */
  position: relative;
}

.box-h {
  height: 100%;
}

.underline-mask:after {
  content: "";
  position: absolute;
  top: 95%;
  width: 150%;
  aspect-ratio: 3 / 1;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  border: 6px solid hsl(280 80% 50%);
  /* Use a conic gradient mask to hide and show the bits you want */
  --spread: 140deg;
  --start: 290deg;
  mask: conic-gradient(
    from var(--start),
    white 0 var(--spread),
    transparent var(--spread)
  );
}

.content {
  blockquote {
    border-inline-start-color: rgb(245, 12, 95);
    font-style: italic;
    line-height: 1lh;
    position: relative;
    width: 60%;
    padding: 45px 10px 30px 40px;

    p {
      margin-bottom: 0px !important;
    }
  }

  blockquote::before {
    font-family: Arial;
    content: "\201C";
    color: rgb(245, 12, 95);
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: 40px;
  }

  blockquote::after {
    content: "";
  }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
  .content {
    blockquote {
      width: 100%;
      padding: 35px 0px 20px 40px;
    }
  }
}

.navbar-burger {
  border-top-color: rgb(245, 12, 95) !important;
  border-bottom-color: rgb(245, 12, 95) !important;
  border-left-color: rgb(245, 12, 95) !important;
  border-right-color: rgb(245, 12, 95) !important;
  color: rgb(245, 12, 95) !important;
}

.underline-overflow:after {
  content: "";
  position: absolute;
  top: 95%;
  width: 150%;
  aspect-ratio: 3 / 1;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  border: 6px solid hsl(10 80% 50%);
  /* Use a clip-path to hide and show the bits you want */
  clip-path: polygon(0 0, 50% 50%, 100% 0);
}

.underline-clip:after {
  content: "";
  position: absolute;
  top: 95%;
  width: 150%;
  aspect-ratio: 3 / 1;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  border: 6px solid hsl(130 80% 50%);
  /* Use a clip-path to hide and show the bits you want */
  clip-path: polygon(0 0, 50% 50%, 100% 0);
}

.is-highlight {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=F50C5F);
  margin: -2px -6px;
  padding: 2px 6px;
  color: white;
  font-weight: 400;
}
.is-highlight-two {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-2&color=F50C5F);
  margin: -2px -6px;
  padding: 2px 6px;
  color: white;
  font-weight: 400;
}
.is-highlight-three {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-3&color=F50C5F);
  margin: -2px -6px;
  padding: 2px 6px;
  color: white;
  font-weight: 400;
}
.is-highlight-four {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-4&color=F50C5F);
  margin: -2px -6px;
  padding: 2px 6px;
  color: white;
  font-weight: 400;
}
.is-highlight-five {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-5&color=F50C5F);
  margin: -2px -6px;
  padding: 2px 6px;
  color: white;
  font-weight: 400;
}
.is-highlight-six {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-6&color=F50C5F);
  margin: -2px -6px;
  padding: 2px 6px;
  color: white;
  font-weight: 400;
}
.is-highlight-seven {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-7&color=F50C5F);
  margin: -2px -6px;
  padding: 2px 6px;
  color: white;
  font-weight: 400;
}
.is-highlight-eight {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-8&color=F50C5F);
  margin: -2px -6px;
  padding: 2px 6px;
  color: white;
  font-weight: 400;
}
.is-highlight-nine {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-9&color=F50C5F);
  margin: -2px -6px;
  padding: 2px 6px;
  color: white;
  font-weight: 400;
}
.is-highlight-ten {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-10&color=F50C5F);
  margin: -2px -6px;
  padding: 2px 6px;
  color: white;
  font-weight: 400;
}
.steps-segment:after {
  background-color: rgb(245, 12, 95);
}
.steps:not(.is-hollow) .steps-segment.is-active .steps-marker:not(.is-hollow) {
  background-color: rgb(245, 12, 95);
  color: #fff;
}
.steps:not(.is-hollow) .steps-marker:not(.is-hollow) {
  background-color: rgb(245, 12, 95);
  color: #fff;
}
.is-inline-block {
  display: inline-block;
}

.is-underlined-gradient {
  background: linear-gradient(to left, #f50c5f, #f5f5f5 100%);
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: repeat-x;
}

.star {
  color: #ffb302;
}

.rotate {
  transform: rotate(0.009turn);
}

.rotate-reverse {
  transform: rotate(-0.009turn);
}

.navbar-link:not(.is-arrowless):after {
  border-color: rgb(245, 12, 95);
  inset-inline-end: 1.125em;
  margin-top: -0.375em;
}

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
  .expressive-code {
    width: 100% !important;
  }
}
/* @media only screen and (min-device-width: 813px) {
  .expressive-code {
    width: 50% !important;
  }
} */
@media print {
  .title.is-hero {
    font-size: 1em;
  }
}