.header-about .cloudbox {
    background-image: url("./cloud.webp");
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 1;
    background-size: 100%;
    background-position: center;
    background-repeat: repeat-x;
    height: 30rem;
    -webkit-animation: cloudMove;
    -moz-animation: cloudMove;
    -o-animation: cloudMove;
    animation: cloudMove;
    -webkit-animation-duration: 5000s;
    -moz-animation-duration: 5000s;
    -o-animation-duration: 5000s;
    animation-duration: 5000s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear; }

@keyframes cloudMove {
  0% {
    background-position: 0 0; }
  50% {
    background-position: 80000px 0; } }
  .header-about .title-about {
    position: absolute;
    top: 77%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2; }
    .header-about .title-about h1 span {
      color: #4ac80a; }
  .header-about .rock {
    position: absolute; }
  .header-about .r1 {
    top: -1rem;
    left: 48%;
    transform: translateX(0px);
    animation: r1anim 2s ease-in-out infinite; }
  .header-about .r2 {
    top: 2rem;
    left: 57%;
    transform: translateY(0px);
    animation: r2anim 3s ease-in-out infinite; }
  .header-about .r3 {
    top: 7rem;
    left: 57%;
    transform: translateX(0px);
    animation: r3anim 4s ease-in-out infinite; }
  .header-about .r4 {
    top: 2rem;
    left: 41%;
    transform: translateY(0px);
    animation: r4anim 5s ease-in-out infinite; }
  .header-about .r5 {
    top: -1rem;
    left: 52%;
    transform: translateX(0px);
    animation: r5anim 6s ease-in-out infinite; }
  .header-about .r6 {
    top: 8rem;
    left: 41%;
    transform: translateY(0px);
    animation: r6anim 7s ease-in-out infinite; }
  .header-about .r7 {
    top: 16rem;
    left: 54%;
    transform: translateX(0px);
    animation: r7anim 8s ease-in-out infinite; }

@keyframes r1anim {
  0% {
    transform: translateX(0px); }
  50% {
    transform: translateX(5px); }
  100% {
    transform: translateX(0px); } }

@keyframes r2anim {
  0% {
    transform: translateY(0px); }
  50% {
    transform: translateY(10px); }
  100% {
    transform: translateY(0px); } }

@keyframes r2animhov {
  0% {
    transform: translateY(0px); }
  100% {
    transform: translateY(40px); } }

@keyframes r3anim {
  0% {
    transform: translateX(0px); }
  50% {
    transform: translateX(7px); }
  100% {
    transform: translateX(0px); } }

@keyframes r4anim {
  0% {
    transform: translateY(0px); }
  50% {
    transform: translateY(10px); }
  100% {
    transform: translateY(0px); } }

@keyframes r5anim {
  0% {
    transform: translateX(0px); }
  50% {
    transform: translateX(9px); }
  100% {
    transform: translateX(0px); } }

@keyframes r6anim {
  0% {
    transform: translateY(0px); }
  50% {
    transform: translateY(12px); }
  100% {
    transform: translateY(0px); } }

@keyframes r7anim {
  0% {
    transform: translateX(0px); }
  50% {
    transform: translateX(10px); }
  100% {
    transform: translateX(0px); } }