body,
html {
  background: #11a37f;
  height: 95vh;
  margin: 0px;
}
body {
  border: 2px solid white;
  margin: 20px;
}
.pooster {
  width: auto;
  max-height: 92vh;
}
path {
  transform: all ease 0.3s;
}
.icon-chatgpt {
  animation: bounceIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}
.gpt-robot {
  animation: flash; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}
.whatis,
.whatdoes {
  animation: flip; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}
.fadedownanim1 {
  animation: fadeInDown; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.5s; /* don't forget to set a duration! */
}
.fadedownanim2 {
  animation: fadeInDown; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.7s; /* don't forget to set a duration! */
}
.fadedownanim3 {
  animation: fadeInDown; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.9s; /* don't forget to set a duration! */
}
.fadedownanim4 {
  animation: fadeInDown; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.1s; /* don't forget to set a duration! */
}
.fadedownanim5 {
  animation: fadeInDown; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.3s; /* don't forget to set a duration! */
}
.fadedownanim6 {
  animation: fadeInDown; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.5s; /* don't forget to set a duration! */
}
.fadedownanim7 {
  animation: fadeInDown; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.7s; /* don't forget to set a duration! */
}
.chartanim1 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.3s; /* don't forget to set a duration! */
}
.chartanim2 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.5s; /* don't forget to set a duration! */
}
.chartanim3 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.7s; /* don't forget to set a duration! */
}
.chartanim4 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}
.chartanim5 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.3s; /* don't forget to set a duration! */
}
.chartanim6 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.9s; /* don't forget to set a duration! */
}
.chartanim7 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.2s; /* don't forget to set a duration! */
}
.chartanim8 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.2s; /* don't forget to set a duration! */
}
.chartanim9 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.5s; /* don't forget to set a duration! */
}
.chartanim10 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.6s; /* don't forget to set a duration! */
}
.chartanim11 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.8s; /* don't forget to set a duration! */
}
.chartanim12 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.3s; /* don't forget to set a duration! */
}
.chartanim13 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.4s; /* don't forget to set a duration! */
}
.chartanim14 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.9s; /* don't forget to set a duration! */
}
.chartanim15 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}
.chartanim16 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.3s; /* don't forget to set a duration! */
}
.chartanim17 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.7s; /* don't forget to set a duration! */
}
.chartanim18 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.3s; /* don't forget to set a duration! */
}
.chartanim19 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}
.chartanim20 {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.6s; /* don't forget to set a duration! */
}
.circlechart {
  animation: fadeInDown; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.9s; /* don't forget to set a duration! */
}
.namnamanavasat {
  animation: bounceIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.5s; /* don't forget to set a duration! */
}
.namnamana1 {
  animation: rubberBand; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.1s; /* don't forget to set a duration! */
}
.namnamana2 {
  animation: rubberBand; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.7s; /* don't forget to set a duration! */
}
.namnamana3 {
  animation: rubberBand; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.6s; /* don't forget to set a duration! */
}
.namnamana4 {
  animation: rubberBand; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}
.namnamana5 {
  animation: rubberBand; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.5s; /* don't forget to set a duration! */
}
.namnamana6 {
  animation: rubberBand; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.2s; /* don't forget to set a duration! */
}
.question {
  animation: swing; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1.2s; /* don't forget to set a duration! */
}
.boxess {
    fill: #099b77;
}
.bg {
  height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: center center;
  transform: rotate(0deg); /* No rotation for larger screens */
}

@media (max-width: 900px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bg {
    /* background: red; */
    height: 100vw;
    width: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    /* translate: -26.6% 41.4%; */
    transform: rotate(90deg);
  }

  .pooster {
    width: auto;
    height: 85vw;
  }
}