* {
  box-sizing: border-box;
}

body {
  background: radial-gradient(circle at 50% 0%, #d3c8ff76 15%, #7dff927f 75%);
  font-family: "Inter", Arial;
  margin: 1rem;
}

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

.mainContainer{
  /* display: flex;
  flex-direction: column; */
  max-width: 700px;
  margin: 0 auto;
}

p {
  margin: 0.5rem;
  margin-left: 0;
}

#mainIllustration {
  border: none;
}

.animate {
  fill: transparent;
  stroke-dasharray: 99;
  stroke-dashoffset: 0;
  animation-name: drawTheCat;
  animation-duration: 5s;
  animation-direction: alternate;
  animation-iteration-count: 1;
}

@keyframes drawTheCat {
  0% {
    stroke-dashoffset: -99;
  };
  100% {
    stroke-dashoffset: 0;
  }
}

/* Glowing Button CS */
.glowingButton {
  margin-top: 2vh;
  margin-bottom: 2vh;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  appearance: none;
  outline: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  background-image: linear-gradient(90deg, #fcecfe, #fbf6e7, #e6fcf5);
  border-radius: 11px;
  padding: 12px 20px;
  position: relative;
  line-height: 24px;
  color: black;
  box-shadow: 0 1px 2px rgba(0, 0, 0, ), 0 4px 16px rgba(0, 0, 0, ), 0 4px 24px rgba(0, 0, 0, );
}

.glowingButtonLinesContainer {
  position: absolute;
  inset: 0;
  mix-blend-mode: hard-light;
  pointer-events: none;
  z-index: 1;
}

/* if it has glowing button class and start class and is a child svg, will animate. */
.glowingButton.start svg{
  animation: makeTheButtonGlow 1s linear;
}

.glowingbuttonSVG {
  display: block;
  position: absolute;
  inset: 0;
  overflow: visible;
  fill: none;
  stroke-width: 2;
  stroke: #1da5ff;
  width: 100%;
  height: 100%;
  stroke-dasharray: 2 3;
  stroke-dashoffset: 14;
  opacity: 0;
  border: none;
}

.glowingbuttonSVG.noBlurCore {
  stroke: #1f6dcc;
}

.glowingbuttonSVG.mediumBlur {
  stroke-width: 6px;
  filter: blur(20px);
}

.glowingbuttonSVG.smallBlur {
  stroke-width: 5px;
  filter: blur(6px);
}

.glowingbuttonSVG.largeBlur {
  stroke-width: 10px;
  filter: blur(56px);
}

@keyframes makeTheButtonGlow {
  0% {
    opacity: 0;
    /* stroke-dashoffset: 14; is set on the element, 0 uses initial state */
  }

  30%, 55% {
    opacity: 1;
 }
  100% {
    opacity: 0;
    stroke-dashoffset: 4;
 }
}

/* twitter badge */

.twitter {
  position: fixed;
  display: block;
  right: 12px;
  bottom: 12px;
}
.twitter svg {
  width: 32px;
  height: 32px;
  fill: rgb(66, 239, 255);
  border: none;
}