#cardImage{
  display: flex;
  align-items: center;
  border: none;

 }

 #cardGroup{
  border: none;
  position: static;
 }
 #mainProfile{
  display: flex;
  width: 10vw;
  /* background-color: burlywood; */
  justify-content: flex-start;
  flex-direction: column;
  left: 17vw;
  top: 10vh;
  align-items: flex-start;
  position: fixed;
 }
 #sectionContent{
  width: 40vw;
  margin-top: 8vh;
 }

 .card{
  width: 100% !important;
  border: none;
 }
 #myName{
  font-size: 4rem;
 }
 #profession{
  font-size: 2rem;
  font-weight: 700;
 }
 /* #btnSocial{ 
  background-color: red;
  width: 195px;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 15px;
  height: 35px;
 } */
  #linkSocial{
    text-decoration: none;
    color: inherit;
  }
  .linksBtn{
    display: flex;
    flex-direction: row;
    gap: 34px;
  }
  #myXp{
    font-size:2rem ;
  }
  .card-body{
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
    gap: 28px;
    display: flex;
    flex-direction: column;
  }
  #xphist{
    margin-top: 10%;
  }
  #informationsTec{
    max-width: 100% !important;
    border: none;
  }
  .card-header{
    font-size: 1.3rem;
    font-weight: 700;
  }
  .row{
    --bs-gutter-x: -14.5rem;
    --bs-gutter-y: 1rem;

  }
  #txtSt{
    font-weight: 700;
    text-decoration: none;
    color: white;
  }
  .uxUi{
    opacity: 30%;
  }
  .figma{
    opacity: 40%;
  }
  .jQuery{
    opacity: 50%;
  }
  .testing{
    opacity: 50%;
  }
  .router{
    opacity: 60%;
  }
  .TypeScript{
    opacity: 70%;
  }
  .Native{
    opacity: 80%;
  }
  .React{
    opacity: 90%;
  }
  .Bootstrap{
    opacity: 90%;
  }
  .Script{
    opacity: 100%;
  }
  .CSS3{
    opacity: 100%;
  }
  .HTML5{
    opacity: 100%;
  }
  .btn-outline-secondary{
    border:none !important;
  }
  .card-title{
    text-align: center;
  }
  .Git{
    opacity: 90%;

  }
  @media only screen and (max-width: 820px) {
    #sectionContent{
      width: 100vw !important;
    }
    .btn btn-outline-secondary{
          display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    }
    .col{
       width: 100%;
    }
}


  @media (max-width: 1311px)  {
    #mainProfile{
      display: none;
    }
    #habilidadesGrid{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
  }

  @media (min-width: 993px)  and (max-width:1290px){
    .container-fluid{
    left: 15%;
    top: 15px;
    position: absolute;
    }
  }