@import url("https://fonts.googleapis.com/css2?family=Bungee&family=Cutive+Mono&family=Fascinate&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=New+Rocker&display=swap");

:root {
  --clr-1: #0c151c;
  --clr-2: #898a8f;
  --clr-3: #c89768;
  --clr-4: #6b99c3;
  --clr-5: #16354d;
  --clr-6: #000000;
  --clr-7: #ffffff;
  --clr-8: #3feff2;

  --fnt-1: "Fascinate", cursive;
  --fnt-2: "Bungee", cursive;
  --fnt-3: "Cutive Mono", monospace;
  --fnt-4: "Montserrat", sans-serif;
  --fnt-5: "New Rocker", cursive;
}

/**CLASE DE USO COMUN**/
.modalNotification {
  position: absolute;
  width: clamp(200px, 50%, 500px);
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.2em;
  box-shadow: 0px 0px 5px 5px var(--clr-4);
  background-color: var(--clr-1);
  transition: all 0.5s ease-in-out;
  opacity: 0;
  z-index: 2;
}

.modalNotification.modalActive {
  display: flex;
  opacity: 1;
}

.modalNotification .modalBody {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  padding: 1.2em;
  row-gap: 1em;
}

.modalNotification .modalBody h1 {
  font-size: 1em;
}

.modalNotification .modalBody span {
  display: none;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  border: 2px solid var(--clr-4);
  border-top: none;
  border-left: none;
  animation: spinner 1s linear infinite;
}

.modalNotification .modalBody span.spinnerActive {
  display: block;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.modalNotification button {
  justify-self: center;
  font-size: 0.9em;
}

.activeNav {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cont-logo {
  display: flex;
  width: 5em;
  height: 5em;
  z-index: 2;
  user-select: none;
}

.ulSocials {
  display: flex;
  flex-direction: row;
  column-gap: 1em;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
}

.ulSocials span {
  display: none;
}

.cont-img {
  position: relative;
  display: flex;
  width: clamp(200px, 50%, 300px);
  border: 1px outset var(--clr-2);
  border-radius: 0.5em;
  box-shadow: 0px 0px 5px 5px var(--clr-4);
  margin: 1em 0em 1.5em 0em;
  z-index: 1;
}

.cont-img img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.5em;
}

.cont-img-befAf::after,
.cont-img-befAf::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid var(--clr-4);
  transform: rotate(15deg);
  border-radius: 0.5em;
  z-index: -1;
  box-shadow: 0px 0px 5px 5px var(--clr-4);
}

.cont-img-befAf::after {
  transform: rotate(15deg);
}

.cont-img-befAf::before {
  transform: rotate(-15deg);
}

.sectionStyle {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding-top: 6em;
  justify-content: space-evenly;
  background-image: linear-gradient(
    to right,
    var(--clr-5),
    var(--clr-6),
    var(--clr-6)
  );
}

.tittleClass {
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  transition: all 0.5s ease-in-out;
}

.tittleClass h2 {
  font-family: var(--fnt-2);
  font-size: 1.5em;
  color: var(--clr-8);
}

.ic-socials {
  display: flex;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

.ic-cardService {
  padding: 0.5em;
  width: 3.5em;
  height: 3.5em;
  justify-content: center;
  align-items: center;
  background-color: var(--clr-5);
  cursor: pointer;
}

.ic-cardService img {
  width: 2em;
  height: 2em;
}

.ic-skill {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.li-skill {
  min-width: 3rem;
}

.btn-class {
  position: relative;
  width: 90%;
  padding: 0.5em;
  font-size: 1.2em;
  font-family: var(--fnt-2);
  border-radius: 0.1em;
  background-color: var(--clr-5);
  border: 1px solid var(--clr-4);
  color: var(--clr-7);
  transition: all 0.5s ease-in-out;
}

/**CONFIGURACIONES GENERALES**/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--clr-3);
  scroll-behavior: smooth;
  scrollbar-width: 0px;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

/**CONFIGURACIONES MOBILE**/
body {
  min-width: 270px;
  font-family: var(--fnt-4);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
  height: 100vh;
  background: var(--clr-6);
}

header {
  position: fixed;
  width: 100%;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2em;
  background: var(--clr-1);
  backdrop-filter: blur(5px) brightness(1);
  border-radius: 0em 0em 0.5em 0.5em;
  border-bottom: 1px solid var(--clr-4);
  z-index: 3;
}

header nav {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(-100%) scale(0.5);
  transition: all 0.5s ease-in-out;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9));
}

header nav ul {
  width: 90%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-size: 2em;
}

/**BOTÓN DE MENÚ*/
header button {
  display: grid;
  place-items: center;
  width: 2em;
  height: 3em;
  background: transparent;
  border: none;
  z-index: 2;
  margin-right: 10px;
}

header button span {
  width: 0.5em;
  height: 0.5em;
  border-radius: 0.5em;
  background-color: var(--clr-4);
}

/**AJUSTES DE SECCIÓN INICIO**/
main #home {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "tittle"
    "cont-img"
    "information";
  background: var(--clr-1);
}

main #home .art-tittle {
  grid-area: tittle;
  width: 70%;
  padding: 0.1em;
  user-select: none;
}

main #home .art-tittle h1 {
  font-family: var(--fnt-3);
  font-size: 1em;
}

main #home .art-tittle h1 em {
  color: var(--clr-8);
}

main #home .cont-img {
  grid-area: cont-img;
  justify-self: center;
  z-index: 2;
}

.art-information {
  grid-area: information;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1em;
  justify-content: space-evenly;
  z-index: 2;
  font-family: var(--fnt-3);
  font-size: 1em;
  user-select: none;
}

main #home .art-information .containerHabilitiesHome {
  height: 1.5em;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
}

main #home .art-information .containerHabilitiesHome h3 {
  font-size: 1.2em;
  text-align: center;
  transition: all 0.5s ease-in-out;
  animation: desplace 8s steps(1, end) infinite alternate;
}

main #home .containerSocials {
  width: 100%;
  padding: 0.5em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

main #home .containerSocials .contLogo {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  column-gap: 1em;
}

main #home .containerSocials a span {
  display: none;
}

main #home #svg {
  position: absolute;
  width: 100%;
  height: 9em;
  bottom: 0;
  left: 0;
  z-index: 0;
}

/**AJUSTES DE LA SECCION SOBRE MI MOBILE*/
main #about {
  display: grid;
  place-items: center;
  text-align: center;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "tittle"
    "information"
    "cont-img";
}

main #about .tittleClass {
  grid-area: tittle;
}

main #about .art-information {
  grid-area: information;
}

main #about .art-information p {
  position: relative;
  text-align: justify;
  font-size: 0.7em;
  padding: 0.3em;
  padding-top: 1.5em;
  border-radius: 0.5em;
  border: 1px solid var(--clr-4);
  box-shadow: 0px 3px 5px var(--clr-4);
}

main #about .art-information p::after {
  position: absolute;
  content: "";
  width: 7em;
  top: 0;
  left: 0.5em;
  border: 15px solid transparent;
  border-top-color: var(--clr-8);
}

main #about .art-information p::before {
  position: absolute;
  content: "RolDev-22";
  top: 0.2em;
  left: 2.3em;
  width: 6em;
  height: 1em;
  display: grid;
  place-items: center;
  border-radius: 0.5em;
  background-color: var(--clr-1);
  border-top-color: var(--clr-3);
  z-index: 1;
}

main #about .skilsContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0.2em;
}

main #about .skilsContainer h3 {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 0.2em;
  background-color: var(--clr-8);
  color: var(--clr-1);
  font-weight: bolder;
  transform: skew(-35deg);
}

main #about .skilsContainer ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 0.2em;
  gap: 0.2em;
}

main #about .skilsContainer ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.3em;
  border-radius: 0.3em;
  font-family: var(--fnt-4);
  color: var(--clr-7);
  background-color: var(--clr-5);
}

main #about .cont-img {
  grid-area: cont-img;
  box-shadow: none;
  border: none;
  box-shadow: inset 10px 0px 1px 1px var(--clr-5);
  padding: 0.1em;
  border-radius: 0;
}

main #about .cont-img img {
  border-radius: 0;
}

/**AJUSTES DE LA SECCION SERVICIOS MOBILE*/

main #service {
  background-image: linear-gradient(
    to left,
    var(--clr-5),
    var(--clr-6),
    var(--clr-6)
  );
}

main #service .containerServices {
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
  padding: 0.5em;
}

main #service .card-service {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  align-items: center;
  padding: 0.5em;
  row-gap: 0.5em;
  border-radius: 0.3em;
  background-color: var(--clr-4);
  box-shadow: 1px 1px 5px 1px var(--clr-4);
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

main #service .card-service::before {
  position: absolute;
  content: "👆";
  width: 3em;
  height: 3em;
  top: 0;
  right: 0;
  color: var(--clr-2);
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 0.7em;
  margin: 0.3em;
  background-color: var(--clr-1);
  z-index: -1;
  animation: movingCard 1s ease-in-out alternate infinite;
}

main #service .card-service figure {
  align-self: center;
  justify-self: center;
  user-select: none;
}

main #service .card-service h2 {
  align-self: center;
  justify-self: center;
  font-family: var(--fnt-5);
  font-size: 1.5em;
  color: var(--clr-7);
  user-select: none;
}

main #service .card-service .p-service {
  text-align: center;
  overflow: hidden;
  width: 0;
  opacity: 0;
  height: 0;
  color: var(--clr-7);
  transition: all 0.5s ease-in-out;
  user-select: none;
}

main #service .card-service .p-service.activeInfo {
  height: auto;
  width: 100%;
  opacity: 1;
}

main #service .card-service button {
  align-self: center;
  justify-self: center;
  width: 50%;
  padding: 0.3em;
  border-radius: 0.3em;
  font-size: 1em;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  background-color: var(--clr-1);
}

/** AJUSTES DE LA SECCIÓN PROYECTOS MOBILE**/

main #project .containerProjects {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  row-gap: 1.5em;
  column-gap: 1.1em;
  padding: 2em;
}

main #project .cardProject {
  position: relative;
  width: clamp(270px, 90%, 380px);
  min-height: 300px;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-around;
  row-gap: 0.5em;
  box-shadow: 0px 0px 5px 5px var(--clr-4);
  border-radius: 0.3em;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  color: var(--clr-7);
  z-index: 1;
  user-select: none;
}

main #project .cardProject::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: var(--preview-bg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0.1);
  transition: all 0.5s ease-in-out;
  z-index: -1;
}

main #project .cardProject .titleCardProject {
  font-size: 1.2em;
  font-family: var(--fnt-2);
  color: var(--clr-7);
}

main #project .cardProject .descritionProject {
  font-size: 0.8em;
  text-align: justify;
  color: var(--clr-7);
  transition: all 0.5s ease-in-out;
}

main #project .cardProject .ulLenguaje {
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  column-gap: 0.5em;
  transition: all 0.5s ease-in-out;
}

main #project .cardProject .ulLenguaje li {
  padding: 0.2em;
  border-radius: 0.3em;
  font-family: var(--fnt-4);
  color: var(--clr-7);
  background-color: var(--clr-4);
}

main #project .cardProject .containerBtnsProject {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  column-gap: 1em;
  padding: 0.2em;
}

main #project .cardProject .containerBtnsProject .btn-project {
  width: 45%;
  padding: 0.5em;
  font-size: 1em;
  border-radius: 0.7em;
}

main #project .cardProject .containerBtnsProject .btn-project:nth-child(1) {
  background-color: var(--clr-3);
}

/**AJUSTES DE LA SECCION CONTACTO MOBILE*/
main #contact {
  background-image: linear-gradient(
    to left,
    var(--clr-5),
    var(--clr-6),
    var(--clr-6)
  );
}

main #contact .generalContainerForm {
  display: grid;
  place-items: center;
  padding: 0.5em;
  row-gap: 1em;
}

main #contact .generalContainerForm .containerContactForm {
  display: grid;
  place-items: center;
  text-align: center;
  row-gap: 0.3em;
  padding: 0.3em;
  box-sizing: border-box;
}

main #contact .containerContactForm .pLogoForm {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.2em;
  width: 90%;
}

main #contact .containerContactForm .pLogoForm img {
  width: 20px;
  object-fit: fill;
}

main #contact .containerForm {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 0.3em;
  box-sizing: border-box;
}

main #contact .containerForm form {
  width: 100%;
  display: grid;
  place-items: center;
  row-gap: 0.5em;
  padding: 0.3em;
}

main #contact .containerForm form .containerInput {
  width: 100%;
  display: grid;
  place-items: left;
  row-gap: 0.5em;
  padding: 0.3em;
}

main #contact .containerForm form .containerInput input,
main #contact .containerForm form .containerInput textarea {
  width: 100%;
  padding: 0.9em;
  border-radius: 0.3em;
  resize: none;
  background: transparent;
  border: 2px solid var(--clr-5);
  outline: none;
}

main #contact .containerForm form .containerInput textarea {
  min-height: 100px;
  text-align: justify;
  padding: 0.5em;
}

main #contact .containerForm form button {
  justify-self: center;
  opacity: 0.3;
}

main #contact .containerForm form button.enabledBtn {
  opacity: 1;
}

/**AJUSTES DEL FOOTER PARA MOBILE*/
footer {
  width: 100%;
  padding: 0.5em;
  display: grid;
  place-items: center;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto 0.5fr;
  grid-template-areas:
    "logo info"
    "social social"
    "copy copy";
  row-gap: 1em;
  background: var(--clr-1);
  border-top: 1px solid var(--clr-4);
}

footer section {
  text-align: center;
  justify-content: center;
  align-items: center;
}

footer .logoFooter {
  grid-area: logo;
  display: grid;
  place-items: center;
}

footer .informationFooter {
  grid-area: info;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

footer .informationFooter h2 {
  font-size: 1em;
  font-family: var(--fnt-4);
  font-weight: 200;
}

footer .informationFooter h3 {
  font-size: 0.8em;
  font-family: var(--fnt-2);
}

footer .informationFooter h4 {
  font-size: 0.6em;
  font-family: var(--fnt-3);
  font-weight: 200;
}

footer .socialsFooter {
  grid-area: social;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

footer a span {
  display: none;
}

footer .copyFooter {
  grid-area: copy;
  font-size: 0.65em;
}

/**MEDIA QUERIES**/

/*****MOBILE****/
@media screen and (min-height: 600px) {
  main #home .art-tittle h1 {
    font-family: var(--fnt-3);
    font-size: 1.5em;
  }

  main #about .art-information p {
    font-size: 0.9em;
  }
}

/*****TABLET****/
@media screen and (min-width: 768px) {
  main #home #svg {
    height: 13em;
  }

  .cont-img {
    margin: 1.5em 0em 2.5em 0em;
    width: 60%;
  }

  .tittleClass {
    width: 40%;
    padding: 0.5em;
    clip-path: polygon(0% 0%, 75% 0%, 80% 50%, 75% 100%, 0% 100%);
    background: #16354d;
    border-bottom: 1px solid var(--clr-4);
    border-top: 1px solid var(--clr-4);
    transition: all 0.5s ease-in-out;
  }

  .ic-socials {
    height: 3em;
    width: 3em;
  }

  .ulSocials {
    column-gap: 4em;
  }

  .btn-class {
    width: 80%;
    font-size: 1.7em;
  }

  /**AJUSTES DE LA SECCION INICIO PARA TABLET*/
  main #home .art-tittle {
    width: 100%;
  }

  main #home .art-tittle h1 {
    font-size: 2em;
  }

  /**AJUSTES DE LA SECCION SOBRE MI PARA TABLET*/
  main #about {
    text-align: left;
    grid-template-columns: auto auto;
    grid-template-rows: 0.5fr 1fr;
  }

  main #about .tittleClass {
    justify-self: self-start;
  }

  main #about .skilsContainer h3 {
    width: 40%;
  }

  main #about .cont-img {
    justify-self: self-end;
    margin: 0em;
    box-shadow: none;
  }

  main #service .containerServices {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 0.5em;
    padding: 0.5em;
  }

  main #service .card-service {
    width: 95%;
    margin: 0.5em;
  }

  /**AJUSTES DE LA SECCION CONTACTO PARA TABLET*/

  main #contact .generalContainerForm .containerContactForm {
    row-gap: 1em;
    font-size: 1.5em;
  }

  main #contact .containerContactForm .ulSocials {
    column-gap: 1em;
  }

  main #contact .containerForm form {
    width: 80%;
    row-gap: 1.5em;
  }

  main #contact .containerForm form .containerInput label {
    font-size: 1.5em;
  }

  main #contact .containerForm form .containerInput .inputActive {
    font-size: 1.2em;
  }

  /**AJUSTES DEL FOOTER PARA TABLET*/
  footer {
    grid-template-columns: auto auto auto;
    grid-template-rows: auto 0.5fr;
    grid-template-areas:
      "logo info social"
      "copy copy copy";
    row-gap: 1em;
  }

  footer .informationFooter h2 {
    font-size: 1.5em;
  }

  footer .informationFooter h3 {
    font-size: 1.3em;
  }

  footer .informationFooter h4 {
    font-size: 1.1em;
  }

  footer .socialsFooter img {
    width: 2em;
    height: 2em;
  }

  footer .copyFooter {
    font-size: 1em;
  }
}

/**-----TABLET CON PANTALLA GRANDE------**/

@media screen and (max-width: 1024px) and (min-height: 1200px) {
  main #contact .generalContainerForm .containerForm form {
    row-gap: 5em;
  }

  main #contact .generalContainerForm .containerForm form button {
    margin-top: 2em;
  }
}

/*****DESKTOP****/
@media screen and (min-width: 1025px) {
  * {
    scroll-snap-type: y proximity;
  }

  .scroll-snap {
    scroll-snap-align: start;
  }

  .ic-socials:hover {
    transform: scale(1.2);
  }

  .cont-img {
    margin: 0em;
    width: 80%;
  }

  .btn-class {
    width: 60%;
    font-size: 1.5em;
  }

  .btn-class:hover {
    transform: scale(1.05) translateY(0.2em);
    box-shadow: 1px 5px 5px 1px var(--clr-4);
    color: var(--clr-3);
    border-color: var(--clr-3);
  }

  .ic-cardService {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    padding: 1em;
    height: 5em;
    width: 5em;
    border-radius: 50%;
    background-color: var(--clr-1);
  }

  .ic-cardService img {
    width: 3em;
    height: 3em;
    object-fit: contain;
  }

  .li-skill {
    min-width: 5rem;
  }

  header {
    justify-self: center;
    width: 90%;
  }

  header nav {
    position: relative;
    height: auto;
    width: auto;
    background: transparent;
    opacity: 1;
    transform: translateY(0) scale(1);
    padding: 0.2em;
    box-sizing: content-box;
  }

  header nav ul {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0.2em;
    column-gap: 1em;
    box-sizing: content-box;
  }

  header nav ul li {
    min-width: 5em;
    justify-content: space-around;
    font-size: 0.8em;
    padding: 0.1em;
  }

  header nav ul li a {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    color: var(--clr-4);
    transition: all 0.5s ease-in-out;
  }

  header nav ul li a:hover {
    color: var(--clr-8);
  }

  header nav ul li a::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 0.1em;
    background-color: var(--clr-8);
    bottom: 0;
    transition: all 0.5s ease-in-out;
    transform-origin: center;
  }

  header nav ul li a:hover::after {
    width: 100%;
  }

  header button {
    display: none;
  }

  main #home {
    grid-template-columns: auto auto;
    grid-template-rows: 0.5fr 0.5fr;
    grid-template-areas:
      "cont-img tittle"
      "cont-img information";
  }

  main #home .art-tittle h1 {
    font-size: 2.5em;
  }

  main #home .art-information h3 {
    font-size: 2.5em;
  }

  main #home .art-information .containerHabilitiesHome {
    width: 100%;
    height: 2.5em;
  }

  main #home .art-information .containerHabilitiesHome h3 {
    font-size: 2.2em;
  }

  main #home .ulSocials a {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
  }

  main #home .ulSocials a span {
    position: absolute;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    width: 0;
    top: 0;
    height: 2em;
    padding: 0.5em;
    border-radius: 0.5em;
    transition: all 0.5s ease-in-out;
    text-align: center;
    color: var(--clr-7);
    border: 1px solid var(--clr-6);
    background-color: var(--clr-1);
    z-index: -1;
  }

  main #home .ulSocials a:hover {
    border-radius: 50%;
    background-color: var(--clr-1);
  }

  main #home .ulSocials a:hover span {
    opacity: 1;
    width: 6.5em;
    transform: translateY(2.7em);
  }

  /**AJUSTES DE LA SECCION SOBRE MI PARA DESKTOP*/
  main #about {
    text-align: left;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.1fr 0.5fr;
    grid-template-areas:
      "tittle tittle"
      "information cont-img";
    box-shadow: 5px 0px 30px -20px #000022;
  }

  main #about .art-information {
    height: 100%;
    margin-top: 1em;
  }

  main #about .art-information p {
    font-size: 1em;
    max-width: 35em;
  }

  main #about .art-information p::after {
    border-top-width: 1.4em;
  }

  main #about .art-information p::before {
    left: 1.8em;
  }

  main #about .skilsContainer h3 {
    width: 56%;
  }

  main #about .skilsContainer li {
    transition: all 0.5s ease-in-out;
  }

  main #about .skilsContainer li:hover {
    background-color: var(--clr-4);
    transform: scale(1.1);
    margin: 0em 0.3em 0em 0.3em;
  }

  main #about .cont-img {
    padding: 0.2em;
    align-self: self-start;
    justify-self: center;
    width: 60%;
    max-height: 75dvh;
    transform: translateY(-2em);
  }

  main #about .cont-img img {
    aspect-ratio: 0/1;
    object-fit: fill;
  }

  main #about .skilsContainer ul li:hover {
    background-color: var(--clr-4);
  }

  /**AJUSTES DE LA SECCION SERVICIOS PARA DESKTOP*/

  main #service .containerServices {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1em;
    padding: 0.5em;
  }

  main #service .card-service {
    position: relative;
    width: 10%;
    height: 25em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5em;
    background-color: var(--clr-5);
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
  }

  main #service .card-service::before {
    display: none;
  }

  main #service .card-service:after {
    content: "";
    width: 30%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.1));
    z-index: 1;
    position: absolute;
  }

  main #service .card-service.activeCard {
    width: 30%;
  }

  main #service .card-service:nth-child(1) {
    border-radius: 0.7em 0em 0em 0.7em;
  }

  main #service .card-service:nth-child(1)::after {
    background: none;
  }

  main #service .card-service:last-child {
    border-radius: 0em 0.7em 0.7em 0em;
  }

  main #service .card-service h2 {
    min-width: 120px;
    margin-top: 0.5em;
    transform: rotate(-90deg) translateY(0.6em) translateX(-4.5em);
    transition: all 0.5s ease-in-out;
    font-family: var(--fnt-5);
    color: var(--clr-7);
    font-size: 1.8em;
  }

  main #service .card-service.activeCard h2 {
    text-align: center;
    max-width: 80%;
    transform: rotate(0deg);
    font-size: 2.2em;
    transition: all 0.3s ease-in-out;
  }

  main #service .card-service p {
    position: relative;
    font-size: 0.8em;
    padding: 0.5em;
    transition: all 0.2s ease-in-out alternate;
  }

  main #service .card-service.activeCard p {
    width: 100%;
    opacity: 1;
    height: auto;
  }

  main #service .card-service button {
    display: none;
  }

  /** AJUSTES DE LA SECCIÓN PROYECTOS DESKTOP**/

  main #project .cardProject {
    transition: all 0.5s ease-in-out;
  }

  main #project .cardProject:hover::before {
    filter: brightness(0.9);
    transform: scale(1.2);
  }

  main #project .cardProject:hover .descritionProject {
    opacity: 0;
  }

  main #project .cardProject:hover .ulLenguaje {
    opacity: 0;
  }

  main #project .cardProject .btn-project:nth-child(1):hover {
    color: var(--clr-5);
    border-color: var(--clr-5);
  }

  /**AJUSTES DE LA SECCION CONTACTO DESKTOP*/

  main #contact .generalContainerForm {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "contInf ContForm";
  }

  main #contact .generalContainerForm .containerContactForm {
    background-color: var(--clr-8);
    padding: 4em;
    border-radius: 82% 18% 80% 20% / 25% 64% 36% 75%;
    border: 1px inset var(--clr-7);
    box-shadow: 0px 0px 30px 5px var(--clr-4);
    row-gap: 1.5em;
    font-size: 0.9em;
  }

  main #contact .containerContactForm p,
  main #contact .containerContactForm em {
    color: var(--clr-1);
    font-size: 1.5em;
  }

  main #contact .containerContactForm .pLogoForm img {
    width: 1.5em;
  }

  main #contact .generalContainerForm .containerForm {
    width: 80%;
    transform: translateY(-1em);
  }

  main #contact .containerForm form {
    row-gap: 0.3em;
    transition: all 0.5s ease-in-out;
  }

  main #contact .containerForm .containerInput {
    position: relative;
    row-gap: 0.3em;
  }

  main #contact .containerForm .containerInput label {
    position: absolute;
    top: 0.3em;
    left: 0.5em;
    font-size: 0.5em;
    opacity: 0.4;
    color: var(--clr-2);
    transition: all 0.5s ease-in-out;
    user-select: none;
  }

  main #contact .containerForm form .containerInput input {
    padding: 0.2em;
  }

  main #contact .containerForm .containerInput label.selectedLabel {
    transform: translateY(-1.2em);
    opacity: 1;
    color: var(--clr-8);
  }

  main #contact .containerForm .containerInput span {
    margin: 0em 0em 1em 0em;
    font-size: 0.7em;
    color: var(--clr-3);
  }
}

/**KEYFRAMES DEL EFECTO DESPLAZAMIENTO DE SKILLS EN HOME**/
@keyframes desplace {
  0%,
  23% {
    transform: translateY(0);
  }

  25%,
  48% {
    transform: translateY(-100%);
  }

  50%,
  73% {
    transform: translateY(-200%);
  }

  75%,
  98% {
    transform: translateY(-300%);
  }
  100% {
    transform: translateY(-300%);
  }
}

/** KEYFRAMES DEL EFECTO DE MOVIMIENTO DE CARD**/
@keyframes movingCard {
  to {
    font-size: 0.7em;
    background-color: var(--clr-5);
  }
  from {
    font-size: 0.72em;
  }
}

/**STYLADO DEL EFECTO OLAS DEL HOME**/
.path-0 {
  animation: pathAnim-0 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pathAnim-0 {
  0% {
    d: path(
      "M 0,500 L 0,75 C 62.2220176730486,54.884020618556704 124.4440353460972,34.7680412371134 181,45 C 237.5559646539028,55.2319587628866 288.44587628865986,95.81185567010309 341,110 C 393.55412371134014,124.18814432989691 447.7724594992635,111.98453608247424 514,98 C 580.2275405007365,84.01546391752576 658.4642857142858,68.25 731,66 C 803.5357142857142,63.75000000000001 870.3703976435935,75.01546391752578 925,76 C 979.6296023564065,76.98453608247422 1022.0541237113403,67.68814432989691 1084,64 C 1145.9458762886597,60.31185567010309 1227.4131075110456,62.23195876288659 1290,65 C 1352.5868924889544,67.76804123711341 1396.2934462444773,71.3840206185567 1440,75 L 1440,500 L 0,500 Z"
    );
  }

  25% {
    d: path(
      "M 0,500 L 0,75 C 45.31240795287188,63.02761413843888 90.62481590574376,51.055228276877756 151,58 C 211.37518409425624,64.94477172312224 286.8131443298969,90.80670103092784 363,90 C 439.1868556701031,89.19329896907216 516.1226067746686,61.7179675994109 568,60 C 619.8773932253314,58.2820324005891 646.6964285714287,82.32142857142857 706,90 C 765.3035714285713,97.67857142857143 857.091678939617,88.99631811487482 922,89 C 986.908321060383,89.00368188512518 1024.9368556701031,97.69329896907216 1081,90 C 1137.0631443298969,82.30670103092784 1211.1608983799704,58.23048600883653 1274,53 C 1336.8391016200296,47.76951399116347 1388.4195508100147,61.38475699558174 1440,75 L 1440,500 L 0,500 Z"
    );
  }

  50% {
    d: path(
      "M 0,500 L 0,75 C 57.26988217967599,85.20544918998527 114.53976435935198,95.41089837997053 182,95 C 249.46023564064802,94.58910162002947 327.110824742268,83.5618556701031 380,70 C 432.889175257732,56.4381443298969 461.0169366715759,40.34167893961709 521,51 C 580.9830633284241,61.65832106038291 672.8214285714286,99.07142857142857 744,98 C 815.1785714285714,96.92857142857143 865.6973490427099,57.37260677466861 918,54 C 970.3026509572901,50.62739322533139 1024.389175257732,83.43814432989693 1090,99 C 1155.610824742268,114.56185567010307 1232.7459499263623,112.87481590574373 1293,106 C 1353.2540500736377,99.12518409425627 1396.6270250368188,87.06259204712813 1440,75 L 1440,500 L 0,500 Z"
    );
  }

  75% {
    d: path(
      "M 0,500 L 0,75 C 57.694771723122244,88.25607511045655 115.38954344624449,101.5121502209131 174,96 C 232.6104565537555,90.4878497790869 292.1365979381443,66.20747422680412 353,68 C 413.8634020618557,69.79252577319588 476.06406480117823,97.6579528718704 531,91 C 585.9359351988218,84.3420471281296 633.6071428571429,43.160714285714285 689,38 C 744.3928571428571,32.839285714285715 807.5073637702503,63.69918998527247 869,71 C 930.4926362297497,78.30081001472753 990.3634020618558,62.04252577319587 1056,51 C 1121.6365979381442,39.95747422680413 1193.039027982327,34.13070692194403 1258,39 C 1322.960972017673,43.86929307805597 1381.4804860088366,59.43464653902798 1440,75 L 1440,500 L 0,500 Z"
    );
  }

  100% {
    d: path(
      "M 0,500 L 0,75 C 62.2220176730486,54.884020618556704 124.4440353460972,34.7680412371134 181,45 C 237.5559646539028,55.2319587628866 288.44587628865986,95.81185567010309 341,110 C 393.55412371134014,124.18814432989691 447.7724594992635,111.98453608247424 514,98 C 580.2275405007365,84.01546391752576 658.4642857142858,68.25 731,66 C 803.5357142857142,63.75000000000001 870.3703976435935,75.01546391752578 925,76 C 979.6296023564065,76.98453608247422 1022.0541237113403,67.68814432989691 1084,64 C 1145.9458762886597,60.31185567010309 1227.4131075110456,62.23195876288659 1290,65 C 1352.5868924889544,67.76804123711341 1396.2934462444773,71.3840206185567 1440,75 L 1440,500 L 0,500 Z"
    );
  }
}

.path-1 {
  animation: pathAnim-1 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pathAnim-1 {
  0% {
    d: path(
      "M 0,500 L 0,175 C 54.02411634756996,165.55633284241532 108.04823269513992,156.11266568483066 165,161 C 221.95176730486008,165.88733431516934 281.83118556701027,185.1056701030928 345,189 C 408.16881443298973,192.8943298969072 474.62702503681896,181.46465390279823 543,182 C 611.372974963181,182.53534609720177 681.6607142857143,195.03571428571428 745,196 C 808.3392857142857,196.96428571428572 864.7301178203239,186.39248895434463 924,189 C 983.2698821796761,191.60751104565537 1045.4188144329896,207.3943298969072 1100,208 C 1154.5811855670104,208.6056701030928 1201.5946244477173,194.0301914580265 1257,186 C 1312.4053755522827,177.9698085419735 1376.2026877761414,176.48490427098676 1440,175 L 1440,500 L 0,500 Z"
    );
  }

  25% {
    d: path(
      "M 0,500 L 0,175 C 55.19348306332843,188.470176730486 110.38696612665686,201.94035346097203 173,206 C 235.61303387334314,210.05964653902797 305.645618556701,204.70876288659792 361,196 C 416.354381443299,187.29123711340208 457.03055964653913,175.22459499263624 520,179 C 582.9694403534609,182.77540500736376 668.2321428571428,202.3928571428571 727,194 C 785.7678571428572,185.6071428571429 818.0408689248895,149.2039764359352 874,151 C 929.9591310751105,152.7960235640648 1009.604381443299,192.79123711340205 1080,198 C 1150.395618556701,203.20876288659795 1211.5416053019146,173.63107511045655 1270,164 C 1328.4583946980854,154.36892488954345 1384.2291973490428,164.68446244477173 1440,175 L 1440,500 L 0,500 Z"
    );
  }

  50% {
    d: path(
      "M 0,500 L 0,175 C 51.87702503681885,176.26380706921944 103.7540500736377,177.52761413843888 161,167 C 218.2459499263623,156.47238586156112 280.86082474226805,134.15335051546393 340,138 C 399.13917525773195,141.84664948453607 454.8026509572901,171.85898379970544 515,176 C 575.1973490427099,180.14101620029456 639.9285714285714,158.4107142857143 699,160 C 758.0714285714286,161.5892857142857 811.4830633284242,186.49815905743742 882,189 C 952.5169366715758,191.50184094256258 1040.1391752577317,171.59664948453607 1105,158 C 1169.8608247422683,144.40335051546393 1211.960235640648,137.11524300441826 1264,141 C 1316.039764359352,144.88475699558174 1378.019882179676,159.94237849779086 1440,175 L 1440,500 L 0,500 Z"
    );
  }

  75% {
    d: path(
      "M 0,500 L 0,175 C 63.35493372606774,185.6899852724595 126.70986745213548,196.379970544919 197,199 C 267.2901325478645,201.620029455081 344.5154639175258,196.17010309278348 392,194 C 439.4845360824742,191.82989690721652 457.22827687776146,192.93961708394698 517,189 C 576.7717231222385,185.06038291605302 678.5714285714286,176.07142857142858 746,183 C 813.4285714285714,189.92857142857142 846.4860088365244,212.77466863033874 906,204 C 965.5139911634756,195.22533136966126 1051.4845360824743,154.8298969072165 1111,142 C 1170.5154639175257,129.1701030927835 1203.575846833579,143.90574374079532 1254,154 C 1304.424153166421,164.09425625920468 1372.2120765832105,169.54712812960236 1440,175 L 1440,500 L 0,500 Z"
    );
  }

  100% {
    d: path(
      "M 0,500 L 0,175 C 54.02411634756996,165.55633284241532 108.04823269513992,156.11266568483066 165,161 C 221.95176730486008,165.88733431516934 281.83118556701027,185.1056701030928 345,189 C 408.16881443298973,192.8943298969072 474.62702503681896,181.46465390279823 543,182 C 611.372974963181,182.53534609720177 681.6607142857143,195.03571428571428 745,196 C 808.3392857142857,196.96428571428572 864.7301178203239,186.39248895434463 924,189 C 983.2698821796761,191.60751104565537 1045.4188144329896,207.3943298969072 1100,208 C 1154.5811855670104,208.6056701030928 1201.5946244477173,194.0301914580265 1257,186 C 1312.4053755522827,177.9698085419735 1376.2026877761414,176.48490427098676 1440,175 L 1440,500 L 0,500 Z"
    );
  }
}

.path-2 {
  animation: pathAnim-2 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pathAnim-2 {
  0% {
    d: path(
      "M 0,500 L 0,275 C 58.15187776141384,253.77411634756993 116.30375552282769,232.5482326951399 173,239 C 229.6962444771723,245.4517673048601 284.9368556701031,279.5811855670103 354,286 C 423.0631443298969,292.4188144329897 505.94882179675983,271.12702503681885 564,267 C 622.0511782032402,262.87297496318115 655.2678571428571,275.9107142857143 713,276 C 770.7321428571429,276.0892857142857 852.9797496318113,263.23011782032404 915,260 C 977.0202503681887,256.76988217967596 1018.8131443298969,263.1688144329896 1071,275 C 1123.1868556701031,286.8311855670104 1185.7676730486007,304.09462444771725 1249,305 C 1312.2323269513993,305.90537555228275 1376.1161634756995,290.4526877761414 1440,275 L 1440,500 L 0,500 Z"
    );
  }

  25% {
    d: path(
      "M 0,500 L 0,275 C 77.54105301914578,266.71097201767304 155.08210603829156,258.42194403534614 213,258 C 270.91789396170844,257.57805596465386 309.2126288659794,265.0231958762886 353,269 C 396.7873711340206,272.9768041237114 446.06737849779086,273.4852724594993 517,281 C 587.9326215022091,288.5147275405007 680.517857142857,303.0357142857143 747,307 C 813.482142857143,310.9642857142857 853.8611929307806,304.3718703976436 904,298 C 954.1388070692194,291.6281296023564 1014.0373711340205,285.47680412371136 1078,290 C 1141.9626288659795,294.52319587628864 1209.989322533137,309.7209131075111 1271,309 C 1332.010677466863,308.2790868924889 1386.0053387334315,291.6395434462445 1440,275 L 1440,500 L 0,500 Z"
    );
  }

  50% {
    d: path(
      "M 0,500 L 0,275 C 76.25883652430045,257.27945508100146 152.5176730486009,239.55891016200295 213,243 C 273.4823269513991,246.44108983799705 318.18814432989694,271.04381443298973 370,269 C 421.81185567010306,266.95618556701027 480.7297496318115,238.2658321060383 540,244 C 599.2702503681885,249.7341678939617 658.8928571428572,289.89285714285717 726,298 C 793.1071428571428,306.10714285714283 867.6988217967598,282.1627393225331 928,269 C 988.3011782032402,255.83726067746687 1034.3118556701033,253.45618556701032 1091,254 C 1147.6881443298967,254.54381443298968 1215.0537555228277,258.01251840942564 1275,262 C 1334.9462444771723,265.98748159057436 1387.4731222385863,270.4937407952872 1440,275 L 1440,500 L 0,500 Z"
    );
  }

  75% {
    d: path(
      "M 0,500 L 0,275 C 58.11377025036819,273.42912371134025 116.22754050073638,271.85824742268045 187,275 C 257.7724594992636,278.14175257731955 341.2036082474227,285.9961340206185 391,283 C 440.7963917525773,280.0038659793815 456.95802650957285,266.15721649484533 507,271 C 557.0419734904272,275.84278350515467 640.9642857142858,299.37500000000006 721,294 C 801.0357142857142,288.62499999999994 877.1848306332843,254.3427835051546 932,254 C 986.8151693667157,253.6572164948454 1020.2963917525774,287.25386597938143 1073,301 C 1125.7036082474226,314.74613402061857 1197.6296023564064,308.6417525773196 1262,301 C 1326.3703976435936,293.3582474226804 1383.1851988217968,284.1791237113402 1440,275 L 1440,500 L 0,500 Z"
    );
  }

  100% {
    d: path(
      "M 0,500 L 0,275 C 58.15187776141384,253.77411634756993 116.30375552282769,232.5482326951399 173,239 C 229.6962444771723,245.4517673048601 284.9368556701031,279.5811855670103 354,286 C 423.0631443298969,292.4188144329897 505.94882179675983,271.12702503681885 564,267 C 622.0511782032402,262.87297496318115 655.2678571428571,275.9107142857143 713,276 C 770.7321428571429,276.0892857142857 852.9797496318113,263.23011782032404 915,260 C 977.0202503681887,256.76988217967596 1018.8131443298969,263.1688144329896 1071,275 C 1123.1868556701031,286.8311855670104 1185.7676730486007,304.09462444771725 1249,305 C 1312.2323269513993,305.90537555228275 1376.1161634756995,290.4526877761414 1440,275 L 1440,500 L 0,500 Z"
    );
  }
}

.path-3 {
  animation: pathAnim-3 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pathAnim-3 {
  0% {
    d: path(
      "M 0,500 L 0,375 C 74.99447717231223,387.06424889543445 149.98895434462446,399.1284977908689 207,400 C 264.01104565537554,400.8715022091311 303.0386597938144,390.5502577319588 362,394 C 420.9613402061856,397.4497422680412 499.8564064801178,414.670471281296 572,407 C 644.1435935198822,399.329528718704 709.5357142857143,366.7678571428571 752,359 C 794.4642857142857,351.2321428571429 814.000736377025,368.25810014727534 877,367 C 939.999263622975,365.74189985272466 1046.4613402061855,346.19974226804123 1111,352 C 1175.5386597938145,357.80025773195877 1198.1539027982326,388.9429307805596 1246,397 C 1293.8460972017674,405.0570692194404 1366.9230486008837,390.02853460972017 1440,375 L 1440,500 L 0,500 Z"
    );
  }

  25% {
    d: path(
      "M 0,500 L 0,375 C 58.96980854197349,354.0648011782032 117.93961708394698,333.12960235640645 184,341 C 250.06038291605302,348.87039764359355 323.2113402061856,385.54639175257734 381,386 C 438.7886597938144,386.45360824742266 481.21502209131074,350.6848306332842 544,338 C 606.7849779086893,325.3151693667158 689.9285714285714,335.7142857142858 752,348 C 814.0714285714286,360.2857142857142 855.0706921944036,374.4580265095729 912,378 C 968.9293078055964,381.5419734904271 1041.7886597938143,374.45360824742266 1097,373 C 1152.2113402061857,371.54639175257734 1189.7746686303387,375.7275405007364 1244,377 C 1298.2253313696613,378.2724594992636 1369.1126656848305,376.6362297496318 1440,375 L 1440,500 L 0,500 Z"
    );
  }

  50% {
    d: path(
      "M 0,500 L 0,375 C 52.34536082474226,391.47956553755523 104.69072164948452,407.9591310751105 160,408 C 215.30927835051548,408.0408689248895 273.5824742268041,391.6430412371134 331,377 C 388.4175257731959,362.3569587628866 444.97938144329896,349.46870397643596 507,350 C 569.020618556701,350.53129602356404 636.4999999999999,364.48214285714283 707,368 C 777.5000000000001,371.51785714285717 851.020618556701,364.6027245949926 914,356 C 976.979381443299,347.3972754050074 1029.4175257731958,337.1069587628866 1087,346 C 1144.5824742268042,354.8930412371134 1207.3092783505153,382.969440353461 1267,391 C 1326.6907216494847,399.030559646539 1383.3453608247423,387.0152798232695 1440,375 L 1440,500 L 0,500 Z"
    );
  }

  75% {
    d: path(
      "M 0,500 L 0,375 C 47.250184094256255,382.49392488954345 94.50036818851251,389.9878497790869 159,393 C 223.4996318114875,396.0121502209131 305.2487113402062,394.5425257731959 377,386 C 448.7512886597938,377.4574742268041 510.5047864506628,361.84204712812954 568,360 C 625.4952135493372,358.15795287187046 678.7321428571429,370.0892857142857 732,379 C 785.2678571428571,387.9107142857143 838.5666421207658,393.8008100147275 890,385 C 941.4333578792342,376.1991899852725 991.001288659794,352.7074742268041 1058,343 C 1124.998711340206,333.2925257731959 1209.4282032400588,337.369293078056 1276,345 C 1342.5717967599412,352.630706921944 1391.2858983799706,363.815353460972 1440,375 L 1440,500 L 0,500 Z"
    );
  }

  100% {
    d: path(
      "M 0,500 L 0,375 C 74.99447717231223,387.06424889543445 149.98895434462446,399.1284977908689 207,400 C 264.01104565537554,400.8715022091311 303.0386597938144,390.5502577319588 362,394 C 420.9613402061856,397.4497422680412 499.8564064801178,414.670471281296 572,407 C 644.1435935198822,399.329528718704 709.5357142857143,366.7678571428571 752,359 C 794.4642857142857,351.2321428571429 814.000736377025,368.25810014727534 877,367 C 939.999263622975,365.74189985272466 1046.4613402061855,346.19974226804123 1111,352 C 1175.5386597938145,357.80025773195877 1198.1539027982326,388.9429307805596 1246,397 C 1293.8460972017674,405.0570692194404 1366.9230486008837,390.02853460972017 1440,375 L 1440,500 L 0,500 Z"
    );
  }
}