* {
  box-sizing: border-box;
}

#slider, #sliderTextInput{
  width: 100px;
}

#exampleTwoSliderTextInput, #exampleTwoSlider {
  width: 200px;
}

#sliderTextInput, #exampleTwoSliderTextInput{
  text-align: center;
}

.sliderAndLabelHolder {
  display: flex;
  flex-direction: row;
}

.sliderAndTextInputHolder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

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

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

.sliderAndTextInputHolder {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.SVGLine{
  stroke-dashoffset: 300;
  stroke: red;
  stroke-width: 10;
}

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

svg {
  border: 1px rgb(173, 173, 173) solid;
}

.kittyPath {
  fill:none;
  stroke:#000000;
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
}

#kittenId {
  border: none;
}

#kittenMainPath {
  fill: transparent;
  stroke-dasharray: 1570;
  stroke-dashoffset: 0;
  animation-name: drawTheCat;
  animation-duration: 3.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;

}

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

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

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