@charset 'UTF-8';
:root{
  --c_violeta: #233057;
  --c_celeste: #677194;
  --c_celeste_oscuro: #274156;
  --c_blanco: #fbfcff;
  --c_negro: #605856;
  --c_btncert: #3b3d8f;
}
/*
Paleta de colores
celeste:         1c6e8c
celeste oscuro:  274156
blanco:          fbfcff
negro:           605856
*/

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--c_blanco);
}

header {
  background-color: var(--c_violeta); 
  color: var(--c_blanco);
  font-family: 'Fredoka One', cursive;
  align-items:center;
  justify-content: space-between;
  padding: 20px;
  width: 100vw;
  position: fixed;
}
header nav {
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  text-decoration: underline;
}
.navlink{
  padding: 1rem 1rem;
}
.navr .active{
  color: gray;
}


header .nav-button {
  display: none;
}

a:hover {
  background-size: 100% 2px;
  color: var(--c_celeste_oscuro);
  text-decoration: underline;
}


header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

header nav ul li a {
  color: var(--c_blanco);
  text-decoration: none;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 20px;

  padding-top: 60px;
}
.inicio{
  display: flex;
  text-align: left;
}
section {
  background-color: var(--c_blanco);
  color: #333;
  border-radius: 5px;
  overflow: hidden;
}

section h2 {
  margin-top: 0;
  background-color: var(--c_celeste);
  color: var(--c_blanco);
  padding: 20px;
}

section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

.bold{
  font-weight: bold;
  font-size: large;
  font-family: "Arial Black", Gadget, sans-serif;
  text-shadow: 2px 2px 3px rgb(129, 198, 211);
}
section ul li {
  width: 30%;
  margin-bottom: 20px;
  text-align: center;
}

section ul li h3 {
  margin-top: 0;
  color: var(--c_celeste); 
}
.cert h3{
  margin-left: 15px;
  margin-top: 10px;
  min-height: 44px;
}

.btncertificados{
  width: 100%;
  height: 43px;
  background-color: var(--c_btncert);
  color: var(--c_blanco);
  border-color: var(--c_negro);
}
.btncertificados:hover{
  background-color: var(--c_blanco);
  color: var(--c_negro);
}
.contenedor{
  width: 100%;
 display: grid;
 grid-template-columns: repeat(auto-fit,300px);
 place-content: center;
 gap: 1rem;


}

.card{
 border-radius: 4px;
 background-color: #ffff;
 box-shadow: 0 5px 10px -3px rgba(0,0,0,  0.5);
}
  .card img{
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
 }

 .card article{
     padding: 1em;
 }
 .card .low{
  font-size: 0.7em;
  color: grey;
 }
.card article section{
  display: flex;
  justify-content: space-between;
}
.card a{
  color: blue;
  font-weight: bold;
}
.card picture{
  height: 231.56px;
  display: inline-flex;
}

section ul li p {
  color: #666;
}

section form {
  background-color: var(--c_blanco); 
  padding: 20px;
}

section form label {
  display: block;
  margin-bottom: 5px;
  margin-top: 8px;
}

section form input[type="text"],
section form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--c_negro);
  border-radius: 5px;
  padding: 5px;
  font-size: 16px;
}
#mensaje{
  height: 108px
}
section form input[type="submit"] {
  background-color: var(--c_celeste);
  color: var(--c_blanco);
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
.contacto{
  max-width: 600px;
  margin: 0 auto;
}
.boton{
  float: right;
}
footer {
  background-color: var(--c_negro);
  color: var(--c_blanco);
  text-align: center;
  padding: 20px;
}

/* * {
  outline: 1px solid red;
}*/
/*CV*/
.cv{
  font-family: Roboto,Helvetica,sans-serif;
  color: #000;
  background-color: #c1c1c1;
  font-size: 14px;
  line-height: 1.5;
  max-width: 100%;
}

.pdf{
  height: 99vh;
}

nav.visible {
  display: block;
  
}

.imagenesH{
  transition: all;
  margin-top: 17px;
  transition: 0.5s;
}
.imagenesH:hover{
  transform: scale(1.1) rotate(15deg);

}
.foto{
  border-radius: 100%;
  float: left;
  margin-right: 20px;
  max-height: 128px;
  border:3px solid var(--c_negro);
  margin-left: 10px;
}

.contenido{
  margin-left: 10px;
  margin-right: 10px;
}
.justify{
  text-align: justify;
}

.github{
  text-align: center;
}
.github a{
  color: var(--c_blanco);
}
.github-logo {
  display: inline-block;
  height: 30px;
  width: 30px;
  margin-right: 5px;
  vertical-align: middle;
  fill: #000;
}

/*RESPONSIVE*/
@media (max-width: 767px) {
  header .logo {
    display: block;
  }
  main {
    grid-template-columns: repeat(1, 1fr);
  }
  section ul li {
    width: 100%;
  }
  header nav ul{
    list-style: none;
    position: fixed;
    right: 20px;
    top: 60px;
    z-index: 1;
    padding: 0;
    display: block;
    animation: anim-jelly 0.8s linear forwards;
  }
  header .nav-button {
    display: block;
    background-color: var(--c_violeta);
    color: var(--c_blanco);
    border: none;
    padding: 10px;
    cursor: pointer;
    position: fixed;
    border-radius: 100%;
    width: 37px;
    height: 37px;
    right: 20px;
    top: 20px;
    z-index: 1;
  }
  header nav {
    display: none;


  }
  header{
    padding:0px;
  }
  header nav ul li{
    text-align: center;
    font-size: 20px;
    margin-bottom: 8px;
    
  
  }
  .menu{
    opacity: 1;
    transition: opacity 0.3s 0.3s;
  }
  .menu-circle{
    height: 500px;
    width: 500px;
    right: -250px;
    top: -250px;
    z-index: 0;
    position: fixed;
    background-color: var(--c_violeta);
    border-radius: 500%;
    animation: anim-jelly 0.8s linear forwards;

    
  }
  .navlink{
    padding: 0.10rem 1rem;
  }
  #inicio{
    margin-top: 1em;
  }
  .foto{
    max-height: unset;
    margin: auto;
    max-width: 75vw;
  }
  .inicio{
    flex-direction: column
  }
  /*cv*/
  .cv{
    width: auto;
    margin: 0 auto;

    
  }

  

}

@keyframes anim-jelly { 
  0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.333333% { -webkit-transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.666667% { -webkit-transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% { -webkit-transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% { -webkit-transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { -webkit-transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% { -webkit-transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% { -webkit-transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% { -webkit-transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% { -webkit-transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% { -webkit-transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% { -webkit-transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% { -webkit-transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% { -webkit-transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% { -webkit-transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% { -webkit-transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% { -webkit-transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% { -webkit-transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% { -webkit-transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% { -webkit-transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% { -webkit-transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% { -webkit-transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% { -webkit-transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% { -webkit-transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);} 
}