* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* Estilos generales */
body {
  font-family: "Catamaran", sans-serif;
  display: block;
  background-color: #292a3a;
  color: #e46ea7;
}

section {
  /* height: 100vh; */
  width: 100vw;
  display: block;
  /* z-index: 101; */
}

h1 {
  font-weight: 800;
  font-size: 35px;
}

h2 {
  font-weight: 700;
}

h3 {
  font-weight: 400;
  color: #6192f5;
}
/* Estilos NAVBAR */
.container {
  display: flex;
  z-index: 1000;
  border-bottom: 3em;
  background-color: #29293a;
  width: 100%;
  height: auto;
  padding: 10px;
  text-align: center;
}

.logo {
  height: 9vh;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.logo-tab {
  display: none;
}

.logo img {
  height: 9vh;
}

header {
  position: fixed;
  /* z-index: 1000; */
  top: 0;
  /* width: 100%; */
}

header::after {
  content: "";
  clear: both;
  display: block;
}

.navigation {
  top: 100%;
  left: 0;
  position: absolute;
  height: 0;
  overflow: hidden;
}

.nav-open {
  width: 100vw;
  height: auto;
}

.navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation ul li a {
  display: block;
  text-decoration: none;
  color: #e46ea6;
  padding: 13% 11% 12% 0px;
  text-align: right;
  width: 100vw;
  cursor: pointer;
  height: 25%;
  background-color: #292a3a;
  font-weight: 800;
}

.menu-toggle {
  padding: 1em;
  position: absolute;
  right: 1em;
  margin-top: 4px;
}

.hamburguer,
.hamburguer::before,
.hamburguer::after {
  content: "";
  display: block;
  height: 7px;
  width: 2em;
  border-radius: 10px;
  background: #e46ea6;
}

.hamburguer::before {
  transform: translateY(-12px);
}

.hamburguer::after {
  transform: translateY(5px);
}

/* HEADER */
.presentation {
  position: relative;
  overflow: hidden;
  background-color: #29293a;
  height: 100vh;
}

.name-header {
  width: 70vw;
  height: auto;
  left: 47px;
  text-align: center;
  margin-top: 75vh;
  position: absolute;
  z-index: 100;
}

.name-header h1 {
  font-size: 3vh;
  margin-block-end: -7px;
}

.name-header h2 {
  font-size: 2.5vh;
  color: #6192f5;
}

.name-header p {
  margin-block-end: -7px;
  font-size: 3vh;
  font-weight: 800;
  color: #efe536;
}

.name-designer {
  margin-block-start: -6px;
}

/* .fisrt-section {
  position: fixed;
} */

main span {
  position: absolute;
  font-size: 80px;
  font-weight: 900;
  font-family: "Fredoka One", cursive;
  color: #f5f8fe;
}

main .m,
.u,
.n,
.d,
.oo {
  font-size: 60px;
}

.h {
  left: 12vw;
  bottom: 64vh;
  animation: letterh 9s linear infinite;
}

@keyframes letterh{
  50% {
    transform: translate(10px, 20px);
 }
 75% {
  transform: translate(15px, 10px);
}
}

.o {
  left: 34vw;
  bottom: 60vh;
  animation: lettero 8s linear infinite;
}

@keyframes lettero{
  50% {
    transform: translate(15px, -10px);
 }
 75% {
  transform: translate(10px, -20px);
}
}

.l {
  left: 56vw;
  bottom: 62vh;
  animation: letterl 10s linear infinite;
}

@keyframes letterl{
  50% {
    transform: translate(12px, 22px);
 }
 75% {
  transform: translate(17px, 12px);
}
}

.a {
  left: 71vw;
  bottom: 64vh;
  animation: lettera 10s linear infinite;
}

@keyframes lettera{
  50% {
    transform: translate(9px, -13px);
 }
 75% {
  transform: translate(7px, -23px);
}
}

.m {
  left: 4vw;
  bottom: 43vh;
  animation: letterm 9s linear infinite;
}

@keyframes letterm{
  50% {
    transform: translate(9px, -13px);
 }
 75% {
  transform: translate(7px, -23px);
}
}

.u {
  left: 22vw;
  bottom: 47vh;
  animation: letteru 11s linear infinite;
}

@keyframes letteru{
  50% {
    transform: translate(12px, 22px);
 }
 75% {
  transform: translate(17px, 12px);
}
}

.n {
  left: 40vw;
  bottom: 44vh;
  animation: lettern 8s linear infinite;
}

@keyframes lettern{
  50% {
    transform: translate(7px, -10px);
 }
 75% {
  transform: translate(5px, -20px);
}
}

.d {
  left: 55vw;
  bottom: 47vh;
  animation: letterd 8s linear infinite;
}

@keyframes letterd{
  50% {
    transform: translate(5px, 30px);
 }
 75% {
  transform: translate(7px, 25px);
}
}

.oo {
  left: 70vw;
  bottom: 41vh;
  animation: letteroo 10s linear infinite;
}

@keyframes letteroo{
  50% {
    transform: translate(7px, -20px);
 }
 75% {
  transform: translate(5px, -40px);
}
}

.exclamation {
  left: 84vw;
  bottom: 43vh;
  animation: letterexc 11s linear infinite;
}

@keyframes letterexc{
  50% {
    transform: translate(5px, 50px);
 }
 75% {
  transform: translate(7px, 10px);
}
}

.key-mark {
  font-family: "Catamaran", sans-serif;
  font-weight: 900;
  font-size: 300px;
  left: -7vw;
  bottom: 31vh;
  color: #6192f5;
  display: block;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  animation: markkey 45s ease-in-out infinite;
}

@keyframes markkey{
  35% {
    transform: translate(100vw, 40vh) rotate(-130deg);
 }
 65% {
  transform: translate(1vw, 50vh) rotate(10deg);
}
75% {
  transform: translate(100vw, -10vh) rotate(150deg);
}
}



.quote-mark {
  font-family: "Catamaran", sans-serif;
  font-weight: 900;
  font-size: 250px;
  left: 78vw;
  bottom: -21vh;
  color: #6192f5;
  display: block;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  animation: markquote 47s ease-in-out infinite;
}

@keyframes markquote{
  25% {
    transform: translate(-20vw, -90vh) rotate(360deg);
 }
 55% {
  transform: translate(-3vw, -10vh) rotate(35deg);
}
65% {
  transform: translate(7vw, -10vh) rotate(-50deg);
}
}

.equal-mark {
  font-family: "Catamaran", sans-serif;
  font-weight: 900;
  font-size: 260px;
  left: -7vw;
  bottom: -14vh;
  color: #f0e535;
  display: block;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  animation: markequal 46s linear infinite;
}

@keyframes markequal{
  28% {
    transform: translate(40vw, -90vh) rotate(20deg);
 }
 60% {
  transform: translate(-10vw, 10vh) rotate(120deg);
}
77% {
  transform: translate(20vw, 3vh) rotate(12deg);
}
}

.parenthesis-mark {
  font-family: "Catamaran", sans-serif;
  font-weight: 900;
  font-size: 230px;
  left: 82vw;
  bottom: 34vh;
  color: #e46ea7;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  animation: markeparenthesis 48s linear infinite;
}

@keyframes markeparenthesis{
  25% {
    transform: translate(-60vw, 60vh) rotate(20deg);
 }
 50% {
  transform: translate(-70vw, -50vh) rotate(-70deg);
}
75% {
  transform: translate(-30vw, 3vh) rotate(12deg);
}
}

.diple-mark {
  font-family: "Catamaran", sans-serif;
  font-weight: 900;
  font-size: 120px;
  left: 23vw;
  bottom: 23vh;
  color: #e46ea7;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  animation: markediple 46s linear infinite;
}

@keyframes markediple{
  25% {
    transform: translate(30vw, -50vh) rotate(12deg);
 }
 60% {
  transform: translate(-10vw, 40vh) rotate(-180deg);
}
85% {
  transform: translate(20vw, 3vh) rotate(90deg);
}
}

.cl-diple {
  font-family: "Catamaran", sans-serif;
  font-weight: 900;
  font-size: 150px;
  left: 51vw;
  bottom: 39vh;
  color: #f0e535;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  animation: markcldiple 49s linear infinite;
}

@keyframes markcldiple{
  15% {
    transform: translate(-30vw, 30vh) rotate(-120deg);
 }
 60% {
  transform: translate(30vw, -10vh) rotate(70deg);
}
75% {
  transform: translate(-30vw, 3vh) rotate(-300deg);
}
}

.about-me {
  position: relative;
  /* overflow: scroll; */
  background-color: #29293a;
  height: 100%;
  padding-top: 4%;
}

.me-illustration {
  margin-left: auto;
  margin-right: auto;
  width: 61vw;
  display: block;
  margin-top: 11vh;
}

.about-me-text {
  width: 83vw;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 130%;
  margin-top: 19px;
  font-size: 82%;
}

/* -------------------------------------------------------- */

.skills-section {
  position: relative;
  /* overflow: scroll; */
  background-color: #29293a;
  height: auto;
  padding-top: 15vh;
}

.skills-section h2 {
  color: #efe536;
  text-align: center;
  line-height: 23px;
}

.skills-section h3 {
  font-weight: 700;
}

.skills-section p {
  font-weight: 500;
}

.ts-skills {
  margin-left: 30px;
}

.ts-skills-tech {
  margin-bottom: 45px;
  margin-left: 77px;
}

.ts-skills-soft {
  margin-left: 35vw;
  padding-bottom: 30px;
}

.ts-skills-soft h3 {
  font-weight: 700;
}

.skills-item {
  width: 20px;
  float: left;
  margin-right: 7px;
}

.skills-item-FB {
  width: 14px;
  padding-bottom: 6px;
  margin-left: 5px;
}

.skills-item-FIG {
  width: 13px;
  padding-bottom: 6px;
  margin-left: 6px;
}

.skills-item-MARVEL {
  padding-top: 4px;
}

.skills-item-ADOBE {
  width: 17px;
}

.skills-item-soft {
  width: 20px;
}

.skills-item-TE {
  width: 20px;
  padding-bottom: 6px;
}

.project-description{
  padding-bottom: 30px;
}

/* -------------------------------------------------------- */
.projects-section {
  position: relative;
  /* overflow: scroll; */
  background-color: #29293a;
  height: auto;
  padding-top: 13vh;
  padding-bottom: 30px;
  text-align: center;
}

.projects-section h2 {
  color: #efe536;
  text-align: center;
  margin-bottom: 25px;
}

.container-projects {
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
}

.project {
  height: 100px;
}
/* ----------------------------------- */

.contact-section {
  position: relative;
  /* overflow: scroll; */
  background-color: #29293a;
  height: auto;
  padding-top: 13vh;
  padding-bottom: 30px;
  height: 100vh;
}

.contact-me {
  width: 20px;
  float: left;
  margin-right: 10px;
}

.contact-me-CV {
  width: 25px;
  margin-right: 3px;
  margin-left: -2px;
  margin-top: 3px;
}

.data-container {
  width: 70vw;
  margin-left: auto;
  margin-right: auto;
}

.data-container h2 {
  color: #6192f5;
  font-weight: 800;
  text-align: center;
}

.data-container a {
  text-decoration: none;
  color: #f0e535;
  font-family: "Catamaran", sans-serif;
  font-weight: 700;
}

.project-description a {
  color: #e46ea6;
  text-decoration: none;
}

.project-description h3 {
  font-weight: 800;
}

.contact-me-gh {
  width: 23px;
}

.container-made{
  margin-left: 104px;
}

.br-tab{
  display: none;
}

@media screen and (min-width: 768px) {
  .hamburguer,
  .hamburguer::before,
  .hamburguer::after {
    display: none;
  }

  .container {
    height: 13vh;
  }

  .navigation {
    overflow: visible;
    top: 0%;
    height: 0;
    width: 100vw;
    text-align: center;
  }

  .navigation ul {
    width: 90vw;
    margin-left: 43px;
  }

  .navigation ul li {
    float: left;
    width: fit-content;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5vh;
  }

  .navigation ul li a {
    display: contents;
    float: left;
    font-size: 23px;
  }

  .logo {
    display: none;
  }

  .logo-tab {
    display: block;
    width: 7vh;
  }

  .name-header {
    position: unset;
    margin-left: auto;
    margin-right: auto;
  }

  main span {
    font-size: 151px;
  }

  main .m,
  .u,
  .n,
  .d,
  .oo {
    font-size: 135px;
  }

  .key-mark {
    left: 1vw;
    bottom: 45vh;
    font-size: 390px;
  }

  .quote-mark {
    bottom: -12vh;
    font-size: 390px;
  }
  .equal-mark {
    left: -1vh;
    font-size: 390px;
  }

  .parenthesis-mark {
    font-size: 390px;
  }

  .diple-mark {
    font-size: 350px;
    bottom: 8vh;
  }

  .cl-diple {
    font-size: 343px;
    bottom: 37vh;
  }

  .o {
    left: 35vw;
    bottom: 59vh;
  }

  .l {
    left: 57vw;
    bottom: 65vh;
  }

  .a {
    left: 75vw;
    bottom: 60vh;
  }

  /* ------------------------------- */

  .me-illustration {
    width: 51vw;
    margin-bottom: 51px;
  }

  .about-me-text {
    font-size: 29px;
  }

  .delete-br {
    display: none;
  }

  .skills-section h2 {
    font-size: 41px;
    margin-bottom: 30px;
    padding-top: 30px;
  }

  .skills-section p {
    font-size: 31px;
  }

  .skills-item {
    width: 39px;
  }

  .skills-item-FB {
    width: 32px;
  }

  .skills-item-FIG {
    width: 30px;
  }

  .skills-item-ADOBE {
    width: 40px;
  }

  .skills-section h3 {
    font-size: 40px;
  }

  .ts-skills-soft {
    left: 9vw;
    position: absolute;
    bottom: 117px;
    width: 50vw;
  }

  /* ------------------------------------ */

  .projects-section h2 {
    font-size: 41px;
    margin-bottom: 30px;
    padding-top: 30px;
  }

  

  .project {
    height: 172px;
  }

  .link-gh {
  text-decoration: none;
  color: #e46ea6;
  /* padding: 13% 11% 12% 0px; */
  text-align: right;
  /* width: 100vw; */
  /* cursor: pointer; */
  /* height: 25%; */
  /* background-color: #292a3a; */
  /* font-weight: 800; */
  }

  /* ------------------------------------------------- */
  .data-container h2 {
    font-size: 41px;
    margin-bottom: 30px;
    padding-top: 30px;
  }

  .data-container {
    width: 57vw;
  }

  .data-container p {
    font-size: 33px;
  }

  .contact-me {
    width: 49px;
  }

  .contact-me-CV {
    width: 55px;
  }

  .container-items-menu {
    position: absolute;
    margin-right: auto;
    margin-left: auto;
  }

  .project-description h3 {
    font-size: 27px;
}

.contact-me-gh {
  width: 39px;
  padding-top: 3px; 
}

.project-description p, a {
  font-size: 23px;
}

.br-tab{
  display: block;
}

.container-made {
  margin-left: 233px;
}
  
}

@media screen and (min-width: 1024px) {
  .container-items-menu {
    position: relative;
  }
  .navigation ul {
    width: 90vw;
    left: 44%;
    position: relative;
  }

  .navigation ul li {
    float: left;
    width: fit-content;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5vh;
    right: 40%;
    position: relative;
  }

  .logo-tab {
    width: 9vh;
  }

  .container {
    height: 15vh;
  }

  .me-illustration {
    width: 31vw;
    margin-bottom: 31px;
  }

  .about-me-text {
    font-size: 25px;
  }

  .skills-section p {
    font-size: 21px;
  }

  .container-projects {
    float: none;
    text-align: left;
  }

  .project {
    float: left;
    margin-left: 13px;
    margin-right: 13px;
    margin-top: 17vh;
  }

  .projects-section {
    height: auto;
  }

  .key-mark {
    bottom: 32vh;
  }

  .quote-mark {
    bottom: -29vh;
  }

  .equal-mark {
    left: 8vh;
    bottom: -22vh;
  }

  .parenthesis-mark {
    bottom: 21vh;
  }

  .diple-mark {
    left: 30vw;
    bottom: 2vh;
  }

  .cl-diple {
    bottom: 28vh;
  }

  .h {
    bottom: 61vh;
  }

  .l {
    bottom: 62vh;
  }

  .m {
    bottom: 33vh;
  }

  .u {
    bottom: 42vh;
  }

  .n {
    bottom: 37vh;
  }

  .d {
    bottom: 29vh;
  }

  .oo {
    bottom: 38vh;
  }

  .exclamation {
    bottom: 27vh;
  }

  .skills-item {
    width: 27px;
  }

  .skills-item-FB {
    width: 21px;
  }

  .skills-item-MARVEL {
    width: 23px;
  }

  .skills-item-FIG {
    width: 20px;
  }

  .skills-item-ADOBE {
    width: 29px;
  }

  .skills-section {
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
  }

  .contact-section {
    height: 100vh;
  }
}

@media screen and (min-width: 1280px) {
  .presentation {
    height: 100vh;
  }

  .skills-section {
    height: 100vh;
  }

  .projects-section {
    height: auto;
  }

  .contact-section {
    height: 100vh;
  }

  .me-illustration {
    width: 19vw;
  }

  .navigation ul {
      left: 57%;
  }

  .about-me {
    height: 100vh;
  }

  .data-container {
    width: 35vw;
  }

  .project {
    margin-left: 1vw;
    margin-right: 1vw;
    margin-top: 7vh;
  }

  .skills-item-FB {
    width: 19px;
  }

  .skills-item-MARVEL {
    width: 23px;
  }

  .skills-item-FIG {
    width: 17px;
  }

  .skills-item-ADOBE {
    width: 23px;
  }
}