body {
  color: black;
  font-family: 'PT Sans', sans-serif;
  margin: 0;
  padding: 0;

}

h1 {
  text-align: center;
  text-shadow: 1px 1px #cfcece;
  font-family: 'PT Sans', sans-serif;
}

.pseudo{
  font-family: 'PT Sans', sans-serif;
}

.images {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  text-align: center;
}

#circle1 {
  padding-top: 20%;
  animation: rotate1 5s infinite;
  z-index: -1;
}

#circle2 {
  padding-top: 20%;
  animation: rotate2 5s infinite;
  z-index: -1;
}

@keyframes rotate1 {
  100% {transform: rotate(360deg); transform-origin: center;}
}

@keyframes rotate2 {
  100% {transform: rotate(-360deg); transform-origin: center;}
}

#baba {
  --_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
  --m:
    left   var(--_i,0%) top    var(--_g),
    bottom var(--_i,0%) left   var(--_g),
    top    var(--_i,0%) right  var(--_g),
    right  var(--_i,0%) bottom var(--_g);
  -webkit-mask: var(--m);
          mask: var(--m);
  filter: grayscale();
  transition: .3s linear;
  cursor: pointer;
}

#baba:hover {
  --_i: 10%;
  filter: grayscale(0);
  border-radius: 23%;
  filter: sepia(65%);
}

h2 {
  text-align: center;
  font-family: 'PT Sans', sans-serif;
}

#clip{
  color: #99c986;
  text-align: center;
  font-family: 'PT Sans', sans-serif;
  text-shadow: 1px 1px #000000;
}

#contenido {
  display: flex;
  flex-direction: column;
  padding: 20px;
  align-items: center;
}

p {
  margin: 10px;
  text-align: justify;
  font-family: 'PT Sans', sans-serif;
  font-size: x-large;
  background: linear-gradient(0.25turn,rgba(235, 184, 31, 0.2), rgba(235,	248,	225, 0.2), rgba(235, 184, 31, 0.2));
  padding: 1%;
  border-radius: 0%;
}

figcaption {
  color: rgb(0, 0, 0);
  font-style: normal;
  font-family: 'PT Sans', sans-serif;
  font-size: 15px;
  padding: 2px;
  text-align: center;
}

a:link {
  color: rgb(157, 18, 73); 
  background-color: transparent; 
}

a:visited {
  background-color: transparent;
  color: rgb(17, 92, 17);
}

.footer {
  position: static;
  border-color: black;
  left: 10px;
  bottom: 20%;
  width: 100%;
  background: rgba(243, 204, 244, 0.6);
  margin-left: 5px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "a b c d";
  text-align: center;
}

.fa {
  padding: 3px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 70%;
  size: 50%;
}

.fa-linkedin {
  grid-area: b;
  background: #007bb5;
  color: rgb(56, 56, 56);
  text-align: center;
}

.fa-twitter {
  grid-area: c;
  background: #55ACEE;
  color: rgb(56, 56, 56);
}

.fa-instagram {
  grid-area: d;
  background: #125688;
  color: rgb(56, 56, 56);
}

.fa-github {
  grid-area: a;
  background: #125688;
  color: rgb(56, 56, 56);
}

h4 {
  text-align: center;
  font-size: x-large;
  font-family: 'PT Sans', sans-serif;
}

.robots {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  margin-left: auto;
  margin-right: auto;
  min-width: fit-content;
  max-width: fit-content;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-left: auto;
  margin-right: auto;
  width: 68%;
  gap: 50px;
}

#robot1 {
  animation: move-horizontal-1 6s;
}

@keyframes move-horizontal-1 {
  from {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

#robot3 {
  animation: move-horizontal-3 6s;
}

@keyframes move-horizontal-3 {
  from {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

.bg-success:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.animate-character
{
  background-image: linear-gradient(
    -225deg,
    #c1a30c 0%,
    #6ac61a 29%,
    #ff8001 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  font-size: 50px;
  text-align: center;
  font-family: 'PT Sans', sans-serif;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

#javi {
  font-family: 'PT Sans', sans-serif;
  margin: auto;
  font-size: 6rem;
  font-weight: 300;
  animation: lights 5s 750ms linear infinite;
}

@keyframes lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
}

#contact-form {
  position: sticky;
  left: 50%;
  display: block;
  gap: 3px;
  text-align: center;
}