.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    max-width: 68.75rem;
    margin: auto;
    padding: 32px 0;
}

.hero img {
    height: 20rem;
    width: 20rem;
    border-radius: 2.4rem;
    margin-bottom: 40px;
    margin-top: 20px;
    border: 1px solid black;
    box-shadow: 0px 2px 15px 2px #001eff;
  
}
.bio-title{
  color: var(--secondary-color);
  text-transform:uppercase;
  
}
.bio {
    width: 25rem;
    padding: 0.625rem;
    border-radius: 6px;
    border: 1px solid black;
    box-shadow: 0px 2px 15px 2px #001eff;
    background: black;

}

.bio h1 {
    margin-bottom: var(--bottom-margin);
}

.bio p {
    line-height: var(--line-height);
    padding: 0.3rem 0;
}

strong{
  text-decoration: underline ;
}

.more_about{
  border: 2px solid black;
  border-radius: 10px;
  box-shadow: 0px 2px 15px 2px #001eff;
  background: black;
}
.more-about h2 {
    margin-bottom: var(--bottom-margin);
    text-align: center;
}
.progress{
  margin: 6px;
}
.more-about p {
    line-height: var(--line-height);
    padding: 0.4rem; 
}
.hero-img{
    -webkit-animation: scale-in-center 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-center {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes scale-in-center {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
  }