.heroMiNombre {
     align-self: flex-end;
     margin-bottom: 17vh;
     animation: invisible 2s linear;
}

.heroMiNombre h2 {
     font-size: 2.2rem;
     font-weight: 48;
}

.heroMiNombre h1 {
     font-size: 3rem;
     font-weight: bold;
     display: flex;
     align-items: center;
}

.fuenteBlanca {
     color: #fff;
}

.marginBtm {
     margin-bottom: 1rem;
}

.fuenteCeleste {
     color: #61DAFB;
}

.fuenteNaranja {
     color: #D76627;
}

.heroCode {
     font-size: 4.5rem;
     font-weight: bold;
}

.heroDivDerecha h1 {
     display: flex;
     align-items: center;
}

.heroDivDerecha button::before {
     content: '';
     z-index: -1;
     position: absolute;
     bottom: 100%;
     right: 100%;
     width: 1em;
     height: 1em;
     border-radius: 50%;
     background-color: #111320;
     transform-origin: center;
     transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0);
     transition: transform 0.45s ease-in-out;
}

.heroDivDerecha button:hover::before {
     transform: translate3d(50%, 50%, 0) scale3d(15, 15, 15);
}

.heroDivDerecha button:hover i {
     filter: contrast(120%);
}

.heroDivDerecha button:hover {
     cursor: pointer;
     box-shadow: 0.1rem 0.1rem 0.7rem #ffffff42;
     filter: contrast(120%);
     opacity: 0.9;
}

.heroDivDerecha {
     display: flex;
     flex-direction: column;
     align-items: end;
}

.heroDivDerecha button {
     z-index: 1;
     position: relative;
     overflow: hidden;
     height: 2.3rem;
     width: 6rem;
     background-color: #D76627;
     color: #fff;
     border: 0.12rem solid #fff;
     outline: none;
     box-shadow: none;
     border-radius: 0.25rem;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     flex-wrap: nowrap;
     font-size: 0.8rem;
     font-family: 'Pridi', serif;
}

.heroDivDerecha i {
     color: #fff;
}

.heroDivDerecha button,
.heroDivDerecha button i {
     transition: all 0.3s ease-in-out;
}

@keyframes invisible {
     0% {
          opacity: 0;
     }

     10% {
          opacity: 0.1;
     }

     25% {
          opacity: 0.2;
     }

     50% {
          opacity: 0.5;
     }

     75% {
          opacity: 0.7;
     }

     80% {
          opacity: 0.8;
     }

     90% {
          opacity: 0.9;
     }

     100% {
          opacity: 1;
     }
}

@media screen and (max-width:767px) {

     .heroMiNombre {
          width: 90%;
          margin: 0 auto;
     }

     .heroMiNombre h1 {
          font-size: 2.3rem;
     }

     .heroDivDerecha button {
          align-self: center;
          font-size: 150%;
          height: 7vh;
          width: 50%;
          margin-bottom: 4rem;
     }
}

@media screen and (min-width:768px) and (max-width:1023px) {

     .heroMiNombre {
          width: 90%;
          margin: 0 auto;
     }

     .heroDivDerecha button {
          align-self: center;
          font-size: 150%;
          height: 6vh;
          width: 27%;
          margin-bottom: 4rem;
     }
}

@media screen and (min-width:1441px) and (max-width:1920px) {

     .heroMiNombre {
          width: 30%;
          margin-right: 10rem;
     }

     .heroMiNombre h2 {
          font-size: 2.5rem;
     }

     .heroMiNombre h1 {
          font-size: 4rem;
     }


}