.introduction {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 4.2rem;
  padding-top: 17.1rem;
  padding-bottom: 7.7rem;
}

.introduction > .img {
  background: linear-gradient(
    242.26deg,
    #f4e6e4 0%,
    #ded8ff 49.36%,
    #ade4ff 100%
  );

  border: 5px solid transparent;

  box-shadow: 0 20px 40px #e3d6ffbf, 20px 20px 40px #fff2d080,
    -20px 20px 40px #82edff40;

  width: 23.3rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}

.introduction > .img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.introduction > h1 {
  text-align: center;
  font-size: 5.5rem;
  max-width: 67rem;
  margin: 0 auto;
  line-height: 114%;
}

.introduction > pre {
  font-size: 3.2rem;
  color: #797979;
}

@media screen and (max-width: 1200px) {
  .introduction {
    padding-top: 14.1rem;
    gap: 3.2rem;
  }

  .introduction > .img {
    width: 17.5rem;
  }

  .introduction > h1 {
    font-size: 4rem;
  }

  .introduction > pre {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 810px) {
  .introduction {
    padding-top: 10rem;
    gap: 2.4rem;
  }

  .introduction > .img {
    width: 14.5rem;
  }

  .introduction > h1 {
    font-size: 3.2rem;
  }

  .introduction > pre {
    font-size: 2.8rem;
    display: grid;
    justify-items: center;
  }

  .introduction > pre > span.hidden {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .introduction {
    padding-top: 10rem;
    gap: 1.6rem;
  }

  .introduction > h1 {
    font-size: 2.4rem;
  }

  .introduction > pre {
    font-size: 2rem;
  }
}








.btn-resume-mine {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 21rem;
  /* overflow: hidden; */
  height: 7rem;
  background-size: 300% 300%;
  backdrop-filter: blur(1rem);
  border-radius: 2rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  background-image: linear-gradient(#3238a5, #000000);
  cursor: pointer;
  border: unset !important;
  text-decoration: none;
  position: relative;

  box-shadow: inset 0px -17px 24px #212121, inset 0px 15px 13px 4px #ffffff5e;
  
}

.Astronaut-container{
  z-index: 5;
  width: 5rem;
  height: 5rem;
  margin-right: 1rem;
}

.Astronaut-div{

  animation: ani-rocket 0.6s ease-in-out infinite alternate;
  width: 100%;
  height: 100%;
  transition: all 0.2s;

}

.btn-resume-mine:hover .Astronaut-div{
  width: 0%;
  height: 0%;



}

.Astronaut-img{
  font-size: 40px;
  display: block;
  transform-origin: center center;
  transition: transform 0.4s ease-in-out;
  width: 100%;
  height: 100%;

}


.btn-resume-mine:hover .planet-container{
  transform: translateX(1em) rotate(53deg) scale(1.5);
  animation: ani-planet 1s ease-in-out infinite alternate;
  


  position: absolute;
  z-index: 4;
  right: -1rem;
  top: -2rem;
  visibility: visible;
  width: 5rem;
  height: 5rem;
  
  
}

.planet-container{
  width: 0rem;
  height: 0rem;
  visibility: hidden;
  transition: all 1s;
  right: 3rem;
  top: 2rem;

}

.btn-resume-mine:hover .planet-container2{
  transform: translateX(1em) rotate(53deg) scale(1.5);
  animation: ani-planet2 2s ease-in-out infinite alternate;


  position: absolute;
  z-index: 4;
  right: 16rem;
  top: 2rem;
  visibility: visible;
  width: 5rem;
  height: 5rem;
  
  
}

.planet-container2{
  width: 0rem;
  height: 0rem;
  visibility: hidden;
  transition: all 1s;
  right: 10rem;
  top: 4rem;

}

.rocket-container-all{
  width: 85%;
  height: 85%;
  overflow: hidden;
  position: absolute;
}


.rocket-container{
  width: 0rem;
  height: 0rem;

  transition: all 1s;
  left: -7rem;
  position: absolute;
  transform: rotate(53deg) scale(1.5);

}

.btn-resume-mine:hover .rocket-container{

  width: 5rem;
  height: 5rem;
  z-index: 5;
  left: 5rem;
  animation: ani-rocket2 3s ease-in-out infinite alternate;

}

.rocket-img{

  width: 100%;
  height: 100%;

}


.planet-img{

  width: 100%;
  height: 100%;
}

.planet-img2{

  width: 100%;
  height: 100%;
}

#container-stars {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
}


strong {
  z-index: 2;
  font-size: 20px;
  letter-spacing: 2px;
  color: #FFFFFF;
  transition: all 0.5s;
}

#glow {
  position: absolute;
  display: flex;
  width: 12rem;
}

.circle {
  width: 100%;
  height: 30px;
  filter: blur(2rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: rgba(254, 83, 186, 0.636);
}

.circle:nth-of-type(2) {
  background: rgba(142, 81, 234, 0.704);
}

.btn-resume-mine:hover #container-stars {
  z-index: 1;
  background-color: #212121;
}

.btn-resume-mine:hover {
  transform: scale(1.2);
  width: 19rem;
  border-radius: 6rem;
}

.btn-resume-mine:hover strong{
  transform: translateX(10em);
  visibility: hidden;
  transition: all 0.5s;
}



.btn-resume-mine:active {
  border: double 4px #FE53BB;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: none;
}

.btn-resume-mine:active .circle {
  background: #FE53BB;
}

#stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}

#stars::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;
}

#stars::after {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}

#stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;
}

#stars::before {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.5;
}

@keyframes animStar {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-135rem);
  }
}

@keyframes animStarRotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0);
  }
}

@keyframes gradient_301 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse_3011 {
  0% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}


@keyframes ani-rocket {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}

@keyframes ani-rocket2 {
  0% {
    transform: translateX(-0.6em);
    
   
  }

  25% {
    
    transform: translateY(-0.4em);
   
  }

  50% {
    
    transform: translateY(0.4em);
  }

  100% {
    transform: translateX(2em);
    
  }
}

@keyframes ani-planet {
  from {
    transform: translateY(0.2em);
  }

  to {
    transform: translateY(-0.2em);
  }
}

@keyframes ani-planet2 {
  0% {
    transform: translateX(-0.1em);
    
   
  }

  25% {
    
    transform: translateY(0em);
   
  }

  50% {
    
    transform: translateY(0.4em);
  }

  100% {
    transform: translateX(0em);
    
  }
}

@keyframes ani-Astronaut {
  from {
    transform: translateY(-10em);
  }

  to {
    transform: translateY(-10em);
  }
}