* {
  margin: 0;
  padding: 0;
}
html {
  width: 99%;
  height: 99%;
}

body {
  background-image: url(code.png);
  background-color: rgb(199, 197, 197);
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  max-width: 400px;
  background-color: #FFF;
  margin: 0;
  padding-top: 10px;
  box-sizing: border-box;
  border: solid 3px rgb(6, 6, 6);
  border-radius: 0.9em;
  font-family: "Source Sans Pro", sans-serif;
  box-shadow: 7px 7px 15px black;
}
form .svgContainer {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 1em;
  border-radius: 50%;
  background: none;
  border: solid 2.5px #3A5E77;
  overflow: hidden;
  pointer-events: none;
}
form .svgContainer div {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 100%;
}
form .svgContainer .mySVG {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.title {
  inset: 1px;
  background-color: white;
  font-family: 'Times New Roman', Times, serif;
  margin-left: 12px;
}
h2 {
  font-family: monospace;
  float: left;
  position: relative;
  font-size: 40px;
}
h2 span {
  position: absolute;
  right: 0;
  width: 0;
  background: white;
  border-left: 1px solid white;
  animation: maquina 4s alternate steps(17);
}
@keyframes maquina {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

.btn {
  text-decoration: none;
  text-align: center;
  padding: 20px;
  display: none;
  width: 150px;
  background-color: #FFF;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  font-weight: bolder;
  color: #FFF;
  background-color: black;
  border-radius: 15px;
  border: 1px solid white;
  box-shadow: 5px 5px 10px black;
  cursor: pointer;
}
.btn:hover {
  background-color: rgb(75, 75, 75);
}

.whatsapp {
  position: absolute;
  top: 85%;
  left: 49.5%;
  transform: translate(-50%, -50%);
}
.wsp {
  position: absolute;
  top: 500px;
  left: 65px;
  width: 55px;
}

.nav {
  background-color: rgb(17, 144, 202);
  height: 100%;
  width: 200px;
}

.yo {
  width: 180px;
  height: 180px;
  margin: 10px;
  border-radius: 50%;
}

.icon {
  text-decoration: none;
  color: white;
  position: absolute;
  font-size: 25px;
  top: 230px;
  left: 50px;
  background-color: rgb(129, 173, 177);
  padding: 15px;
  border-radius: 30px;
}
.icon:hover {
  border: 1px solid black ;
}
.pro {
  top: 320px;
  margin-left: -20px;
}

.background {
  position: absolute;
  top: 10px;
  margin-left: 230px;
  background-color: rgb(57, 91, 99);
  border-radius: 20px;
  width: 75%;
  height: 91%;
  color: white;
  padding: 20px 50px;
  font-size: 20px;
  text-align: justify;
  line-height: 30px;
}

.card {
  position: absolute;
  top: 15px;
  margin-left: 220px;
  border-radius: 20px;
  background-color: rgb(57, 91, 99);
  width: 330px;
  height: 375px;
  text-align: center;
}
.img {
  margin: 10px;
  width: 300px;
  height: 320px;
  border-radius: 20px;
}
.nombre-card {
  text-decoration: none;
  color: white;
  font-size: 20px;
}
.segunda {
  margin-left: 570px;
}
.tercera {
  margin-left: 920px;
}
.cuarta {
  margin-top: 400px;
  margin-left: 220px;
}

.github {
  position: absolute;
  width: 70px;
  top: 400px;
  left: 15px;
}
.linkedin {
  position: absolute;
  width: 70px;
  top: 400px;
  left: 105px;
  border-radius: 22px;
  background-color: white;
}
.proyectos {
  position: absolute;
  top: 415px;
  margin-left: 570px;
  border-radius: 20px;
  background-color: rgb(57, 91, 99);
  width: 330px;
  padding: 10px 0px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
}

@media (max-width: 1340px) {
  .tercera {
    margin-left: 570px;
    top: 415px;
  }
  .background {
    margin-left: 210px;
    width: auto;
    height: auto;
  }
  .proyectos {
    margin-left: 230px;
    top: 800px;
  }
}
@media (max-width: 920px) {
  .github {
    width: 50px;
    top: 12px;
    left: 310px;
  }
  .linkedin {
    width: 50px;
    top: 70px;
    left: 310px;
  }
  .wsp {
    top: 40px;
    left: 390px;
  }
  .background {
    top: 160px;
    margin-left: 10px;
  }
  .nav {
    height: 130px;
    width: 100%;
  }
  .yo {
    margin: 10px;
    width: 110px;
    height: 110px;
  }
  .icon {
    top: 10px;
    left: 180px;
    font-size: 20px;
    padding: 10px;
  }
  .pro {
    top: 70px;
    margin-left: -20px;
  }
  .card {
    margin-top: 140px;
    margin-left: 50px;
  }
  .segunda {
    margin-left: 400px;
  }
  .cuarta {
    margin-top: 540px;
    margin-left: 400px;
  }
  .proyectos {
    top: 950px;
  }
}


@media (max-width: 750px) {
  .segunda {
    margin-left: 50px;
    margin-top: 940px;
  }
  .cuarta {
    margin-left: 50px;
    margin-top: 1340px;
  }
  .proyectos {
    top: 1750px;
    margin-left: 50px;
  }
}

@media (max-width: 475px) {
  .github {
    width: 40px;
    left: 220px;
  }
  .linkedin {
    width: 40px;
    left: 220px;
    top: 65px;
  }
  .wsp {
    width: 40px;
    left: 285px;
  }

  .background {
    margin-left: 0;
    font-size: 15px;
    padding: 20px;
    top: 125px;
  }
  h2 {
    font-size: 36px;
  }  
  .card {
    margin-left: 0;
  }
  .yo {
    width: 100px;
    height: 100px;
  }
  .nav {
    height: 120px;
  }
  .icon {
    font-size: 15px;
    left: 130px;
  }
  .pro {
    top: 60px;
    margin-left: -10px;
  }
  .card {
    margin-left: 10px;
  }
  .proyectos {
    margin-left: 20px;
    width: 300px;
  }
}