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

:root {
  --ghost: #f9f9ff;
  --ghost-transparent-light: #f9f9ff27;
  --ghost-transparent-mid: #f9f9ff72;
  --ghost-transparent-dark: #f9f9ffd2;

  --blue-chill-50: #f2f9f9;
  --blue-chill-100: #ddeff0;
  --blue-chill-200: #bfe0e2;
  --blue-chill-300: #92cace;
  --blue-chill-400: #5faab1;
  --blue-chill-500: #438e96;
  --blue-chill-600: #3b757f;
  --blue-chill-700: #356169;
  --blue-chill-800: #325158;
  --blue-chill-900: #2d464c;
  --blue-chill-950: #1a2c32;

  --matisse-transparent-dark-0: #f0f9ffda;
  --matisse-transparent-dark-10: #effaffda;
  --matisse-transparent-dark-50: #b7eaffd2;
  --matisse-transparent-dark-100: #b9e7fed2;
  --matisse-transparent-dark-200: #7bd6fed2;
  --matisse-transparent-dark-300: #34c2fcd2;
  --matisse-transparent-dark-400: #0aabedd2;
  --matisse-transparent-dark-500: #0089cbd2;
  --matisse-transparent-dark-600: #006da4d2;
  --matisse-transparent-dark-700: #055c87d2;
  --matisse-transparent-dark-800: #0a4c70d2;
  --matisse-transparent-dark-900: #07304ad2;
  --matisse-transparent-dark-950: #032030d2;

  --matisse-transparent-light-0: #f0f9ff97;
  --matisse-transparent-light-10: #effaff36;
  --matisse-transparent-light-50: #b7eaff36;
  --matisse-transparent-light-100: #b9e7fe36;
  --matisse-transparent-light-200: #7bd6fe36;
  --matisse-transparent-light-300: #34c2fc36;
  --matisse-transparent-light-400: #0aabed36;
  --matisse-transparent-light-500: #0089cb36;
  --matisse-transparent-light-600: #006da436;
  --matisse-transparent-light-700: #055c8736;
  --matisse-transparent-light-800: #0a4c7036;
  --matisse-transparent-light-900: #07304a36;
  --matisse-transparent-light-950: #03203036;

  --matisse-0: #f0f9ff;
  --matisse-10: #effaff;
  --matisse-50: #b7eaff;
  --matisse-100: #b9e7fe;
  --matisse-200: #7bd6fe;
  --matisse-300: #34c2fc;
  --matisse-400: #0aabed;
  --matisse-500: #0089cb;
  --matisse-600: #006da4;
  --matisse-700: #055c87;
  --matisse-800: #0a4c70;
  --matisse-900: #07304a;
  --matisse-950: #032030;
  /* --matisse-50: #f0f9ff; */
  /* --matisse-100: #dff3ff; */
  /* --matisse-200: #b9e7fe; */
  /* --matisse-300: #7bd6fe; */
  /* --matisse-400: #34c2fc; */
  /* --matisse-500: #0aabed; */
  /* --matisse-600: #0089cb; */
  /* --matisse-700: #006da4; */
  /* --matisse-800: #055c87; */
  /* --matisse-900: #0a4c70; */
  /* --matisse-950: #07304a; */

  /*  */
}

html {
  font-size: 62.5%;

  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;

  &::-webkit-scrollbar {
    width: 0.7rem;
    transition: all 0.3s ease;
  }

  &::-webkit-scrollbar-thumb {
    /* background: #007db9; */
    border-radius: 40px 40px 40px 40px;
    background: var(--matisse-transparent-dark-600);

    transition: all 0.3s ease;
  }

  &::-webkit-scrollbar-thumb:hover {
    transition: all 0.3s ease;
    /* background: var(--matisse-transparent-dark-900); */
  }

  &::-webkit-scrollbar-track {
    background-color: rgba(97, 97, 97, 0.4);
    transition: all 0.3s ease;
  }
}

body {
  background-image: linear-gradient(
      179deg,
      var(--matisse-950) 3%,
      var(--matisse-900) 27%,
      var(--matisse-800) 46%,
      var(--matisse-700) 72%,
      var(--matisse-transparent-dark-700) 97%
    ),
    radial-gradient(
      circle at 100%, 
      var(--matisse-950) 46%, 
      #333 90% 
    );
  background-repeat: no-repeat;
  font-family: "Outfit", sans-serif;
  color: var(--matisse-0);
  /* color: #ebebeb; */
  height: 100%;
  /* !!! */
  /* line-height: 1.5; */
  letter-spacing: 0.02em;
  overflow: auto;
}

body.no-scroll {
  overflow: hidden;
}

section {
  margin-bottom: 30px;
}

a {
  text-decoration: none;
  color: var(--matisse-10);
  /* color: #f0f8ff; */
  font-weight: 600;
  transition: color 0.2s ease-out;
  &:hover {
    color: var(--matisse-400);
  }

  &:active {
    color: var(--matisse-600);
    /* color: var(--matisse-500); */
  }

  &:focus {
    color: var(--matisse-300);
  }
}

p {
  /* text-align: justify; */
  text-align: start;
  font-size: 18px;
  /* line-height: 1.2; */
  line-height: 120%;
  /* text-wrap: pretty; */
  color: var(--matisse-10);
}

li {
  list-style: none;
  width: auto;

  /* &::before {
    content: "\f3d3";
  } */
  &::before {
    font-family: "Font Awesome 5 Brands";
    color: #f1f1f1;
    margin-right: 0.5em;
  }

  & img {
    width: 23px;
    height: auto;
    margin-right: 1px;
  }
}

i {
  /* color: #007bff; */
  margin: 0;
  padding: 0;
  color: var(--matisse-10);
  font-size: 32px;
  /* color: #fff; */
}

/* section {
  height: 90vh;
} */

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;

  margin: 0;
  margin-bottom: 40px;

  /* font-size: 18px; */
  /* font-size: 1.8rem; */

  & h1 {
    font-weight: 500;
    font-size: 32px;
    /* text-wrap: pretty; */
  }

  /* & i {
    font-size: 36px;
  } */
}

.hidden {
  display: none;
  margin-left: 0;
}

.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 27;
  height: 65px;
  width: 100%;
  padding-inline: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #0f172abf; */
  /* background-image: linear-gradient(180deg, #031b28fe 21%, #032030fe 79%); */
  background-image: linear-gradient(180deg, #031b28cf 21%, #032030cf 79%);
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-color: #f9f9ff27;
  transition: border 0.3s ease-in-out;

  & #title-name {
    & a {
      flex-wrap: wrap;
      word-spacing: 2px;
      font-size: 23px;

      &:hover {
        color: var(--matisse-100);
      }
    }
  }

  & div#icon-menu {
    display: none;
  }

  & nav#navbar-desktop {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    height: 100%;
    gap: 27px;
    margin: 0;

    & .menu {
      list-style: none;

      & li.item-nav {
        display: inline-block;
        padding: 0 16px;
        font-size: 19px;

        & a.link {
          position: relative;
          line-height: 1.5;

          &::before {
            content: "";
            width: 0;
            height: 2px;
            border-radius: 2px;
            position: absolute;
            bottom: -0.36rem;
            left: 50%;
            transition: width 0.4s, left 0.4s;

            /*! forma 2 */
            /* content: "";
            width: 100%;
            height: 2px;
            border-radius: 2px;
            position: absolute;
            bottom: -0.5rem;
            left: 0;
            transition: transform 0.4s, opacity 0.4s;
            opacity: 0; */
          }

          &:hover {
            &::before {
              background-color: var(--matisse-400);
              width: 100%;
              left: 0;

              /*! forma 2 */
              /* transform: translateY(-0.2rem);
              opacity: 1; */
            }
          }

          &:active {
            &::before {
              background-color: var(--matisse-600);

              width: 100%;
              left: 0;

              /*! forma 2 */
              /* opacity: 1; */
            }
          }

          &:focus {
            &::before {
              background-color: var(--matisse-300);

              width: 100%;
              left: 0;

              /*! forma 2 */
              /* opacity: 1; */
            }
          }
        }
      }
    }
  }

  & i {
    font-size: 27px;
  }
}

span.skewed-word {
  display: inline-block;
  background: var(--matisse-transparent-dark-400);
  padding: 5px 7px;
  transform: skewY(5deg);
  position: relative;
  bottom: 2px;

  & span {
    display: inline-block;
    transform: skewY(-5deg);
  }
}

#home {
  width: 100%;
  /* margin-top: 120px; */
  padding: 190px 40px 50px;

  & .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & .container-child {
      height: 100%;
      padding-left: 5%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      & .context {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 30px;
        row-gap: 9px;

        & h1.into-name {
          text-align: left;
          font-size: 36px;
          margin-bottom: 7px;
        }

        & p {
          width: 70%;
          font-size: 20px;
        }

        & .buttons {
          width: 70%;
          padding: 40px 0 27px 0;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 16px;

          button.btn-dark {
            appearance: none;
            position: relative;
            display: inline-flex;
            align-items: center; /* items-center */
            justify-content: center; /* justify-center */
            padding: 12px 20px; /* px-7 py-2 */
            border-radius: 12px; /* rounded-md */
            border: 2px solid rgba(156, 163, 175, 0.4); /* ring-gray-400/40 */
            font-weight: 600; /* font-semibold */
            font-size: 16px;

            background-color: rgba(17, 24, 39, 0.95); /* bg-gray-900/95 */
            color: rgba(240, 249, 255, 0.9); /* text-sky-50/90 */

            cursor: pointer;
            transition: all 0.2s ease-in-out; /* transition-all duration-200 */

            &:hover {
              background-color: #1f2937; /* hover:bg-gray-800 */

              color: rgba(255, 255, 255, 0.85); /* hover:text-white/85 */

              border-width: 2px; /* hover:ring-2 */
              border-color: rgba(255, 255, 255, 0.6); /* hover:ring-white/60 */
            }
          }
        }
      }
    }
  }
}

#sobremi {
  margin-inline: auto;
  padding: 30px 40px 20px;

  & .title {
    margin-bottom: 20px;
  }

  & .container {
    display: grid;
    align-items: center;
    grid-template-columns: 2fr 1fr;

    & .container-child {
      height: 100%;
      padding-left: 5%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      & .context {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 30px;

        & p {
          width: 92%;
          font-size: 18px;
        }
      }

      & div.download-cv {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 18px;
        margin-bottom: 27px;
        margin-top: 18px;
        margin-right: calc(100vw * 0.05);

        & .download-button {
          position: relative;
          border-width: 0;
          color: var(--matisse-10);
          font-size: 15px;
          font-weight: 600;
          border-radius: 1.2rem;
          cursor: pointer;
          z-index: 1;
          transition: all 297ms ease-in-out 27ms;
        }

        & .download-button .docs {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          min-height: 40px;
          padding: 0 10px;
          background-color: var(--matisse-transparent-dark-900);
          /* background-color: #242a35; */
          border: 2px solid var(--matisse-transparent-light-100);
          /* border: solid 1px #e8e8e82d; */
          border-radius: 1.2rem;
          /* border-radius: 4px; */
          z-index: 1;
          transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .download-button:hover {
          box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
            rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
            rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
          color: var(--matisse-0);
          background-color: var(--matisse-transparent-dark-900);
          border-color: var(--matisse-transparent-dark-200);
        }

        .download {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          max-width: calc(79% - 1px);
          margin: 0 auto;
          z-index: -1;
          border-bottom-left-radius: 12px;
          border-bottom-right-radius: 12px;
          transform: translateY(0%);
          cursor: pointer;
          transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .download-button:hover .download {
          transform: translateY(100%);
          background-color: var(--matisse-400);
          border: solid 1px var(--matisse-transparent-dark-900);
        }

        .download svg polyline,
        .download svg line {
          animation: docs 1s infinite;
        }
      }
    }

    & .img-container-photo {
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease-in-out;
      z-index: 0;

      & .img-photo {
        display: flex;
        align-self: center;
        justify-content: center;
        transition: transform 0.3s ease-in-out, width 0.3s ease-in-out,
          height 0.3s ease-in-out, border 0.3s ease-in-out,
          filter 0.3s ease-in-out;

        & img {
          width: 400px;
          height: 400px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          border-radius: 50%;
          outline: 2px solid transparent;
          transition: transform 0.3s ease-in-out, width 0.3s ease-in-out,
            height 0.3s ease-in-out, outline 0.3s ease-in-out,
            filter 0.3s ease-in-out, margin 0.3s ease-in-out;
          /* transition: transform 0.3s ease; */

          &:hover {
            outline: 2px solid var(--matisse-transparent-dark-10);
            transform: scale(1.1) translateX(-7px);
            cursor: default;
          }
        }
      }
    }
  }
}

#proyectos .container {
  width: 100%;

  & .title {
    margin-bottom: 21px;
  }

  & .all-projects {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    align-content: start;
    flex-wrap: wrap;

    width: 90%;
    margin: 50px auto 0;

    column-gap: 18px;

    /* max-width: 160rem; */

    & div.project {
      /* padding: 0 10px 0.5rem; */
      padding: 0 10px 4rem;
      margin-bottom: 2rem;
      /* min-width: 30vw; */
      flex-basis: 44%;
      flex-grow: 5;
      flex-shrink: 2;

      &:last-child {
        /* flex-basis: 70%; */
        /* margin: 0 100px; */
        max-width: 800px;
        /* padding-bottom: 1.5rem; */

        & .context {
          & .info {
            background-image: linear-gradient(
              180deg,
              var(--matisse-transparent-light-400) 4%,
              var(--matisse-transparent-dark-950) 23%
            );
          }
        }
      }

      & .context-project {
        /* background-image: linear-gradient(
          180deg,
          var(--matisse-transparent-dark-700) 51%,
          var(--matisse-transparent-dark-950) 92%
        ); */

        /* padding: 0 4px 5px; */
        height: 100%;
        overflow: hidden;
        position: relative;
        bottom: 0;
        /* min-height: 545px; */

        /* border: 2px solid #ffffff26; */
        /* border: 2px solid white; */
        /* background-color: var(--matisse-transparent-dark-950); */
        border: 2px solid var(--matisse-transparent-light-200);
        border-radius: 1.6rem;

        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
          0 1px 2px -1px rgb(0 0 0 / 0.1);

        /* transition: background-color 0.25s ease-in-out; */
        transition: all 0.3s ease-in-out;
        /* transition: box-shadow 0.5s ease-in-out; */

        &:hover {
          bottom: 4px;

          border-color: var(--matisse-transparent-dark-200);
          /* border: 2px solid #ffffffd2; */
          /* box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
            0 8px 10px -6px rgb(0 0 0 / 0.1); */
          box-shadow: 0 20px 25px -5px var(--matisse-transparent-dark-800),
            0 8px 10px -6px var(--matisse-transparent-dark-800);

          & .info {
            & .content-title-p {
              & .project-title {
                color: var(--matisse-10);
              }

              & .detail-text {
                /* color: var(--matisse-transparent-dark-0); */
                color: var(--matisse-transparent-dark-10);
              }
            }
          }
        }

        &:active {
          border-color: var(--matisse-500);
        }

        & .img-container {
          & div {
            padding: 0;
            margin-bottom: -3px;
            cursor: pointer;

            & img {
              background-position: 50%;
              background-repeat: no-repeat;
              background-size: cover;
              min-height: 272px;
              width: 100%;
              -webkit-transition: transform 0.5s ease-in-out;
              transition: transform 0.5s ease-in-out;

              &:hover {
                transform: scale(1.02) translateY(-0.3rem);
              }
            }
          }
        }

        & .info {
          display: flex;
          flex-direction: row;
          /* justify-content: space-between; */
          justify-content: space-evenly;
          align-items: flex-start;
          /* align-items: center; */
          /* background-color: #022b4209; */
          background-image: linear-gradient(
            180deg,
            var(--matisse-transparent-dark-700) 2%,
            var(--matisse-transparent-dark-950) 37%
          );
          height: 100%;
          width: 100%;
          position: relative;
          z-index: 3;
          padding: 2rem;
          margin: 0;
          /* margin: 0 0.66px; */
          gap: 10px;
          cursor: pointer;
          transition: all 0.2s ease-in-out;

          & .content-title-p {
            display: flex;
            flex-direction: column;
            /* justify-content: center;
            align-items: center; */
            & div.container-title-code {
              display: flex;
              flex-wrap: wrap;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;

              cursor: default;

              &:hover {
                & .project-title {
                  color: var(--matisse-0);
                  text-shadow: 0 5px 5px #121212fc;
                }
              }

              & .project-title {
                justify-self: flex-start;
                font-size: 3.1rem;
                margin-bottom: 1rem;
                /* text-align: center; */
                /* cursor: pointer; */
                color: var(--matisse-50);
                transition: all 0.3s ease-in-out;
              }

              & a.ancla-code {
                justify-self: flex-end;
                /* display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: row; */
                position: relative;
                /* background-color: var(--matisse-transparent-light-200); */
                background-color: var(--matisse-transparent-dark-0);
                color: var(--matisse-900);
                border: 1.27px solid var(--matisse-900);
                border-radius: 7.9px;
                padding: 0.5rem 0.9rem 0.5rem;
                font-size: 14px;
                transition: all 0.32s ease-in-out;
                z-index: 23;

                & i {
                  font-size: 16px;
                  color: var(--matisse-900);
                  margin-left: 2px;
                  transition: all 0.32s ease-in-out;
                }

                &:hover {
                  background-color: var(--matisse-900);
                  color: var(--matisse-10);
                  border-color: var(--matisse-50);

                  & i {
                    color: var(--matisse-10);
                  }
                }

                &:active {
                  background-color: var(--matisse-800);
                }
              }
            }

            & .detail-text {
              font-size: 1.7rem;
              margin: 0.6rem 0;
              text-align: start;
              letter-spacing: 0.02em;
              color: var(--matisse-transparent-light-0);
              /* color: #ffffff99; */
              /* text-indent: 25px; */

              transition: color 0.3s ease-in-out;
            }
          }

          & .desarrollo-with {
            padding: 0 1.8rem;
            margin-top: 1rem;
            min-width: 172px;
            font-weight: 400;
            /* display: block; */
            cursor: auto;

            & a.link {
              display: flex;
              align-items: center;
              text-align: start;
              /* justify-content: flex-start; */
              /* height: 42px; */
              height: 3.9rem;
              min-width: 5rem;
              /* max-width: 135px; */
              font-size: 1.25rem;
              font-weight: 500;
              margin-bottom: 12px;
              padding: 1rem 8px 1rem 12px;
              /* background-color: #efefef27; */
              background-color: var(--matisse-transparent-light-200);
              color: var(--matisse-transparent-dark-0);
              border: 2px solid var(--matisse-transparent-dark-200);
              /* border: 2px solid #ffffff27; */
              border-radius: 3.6rem;
              vertical-align: middle;
              white-space: nowrap;
              letter-spacing: 0.1rem;
              text-align: right;
              text-transform: uppercase;
              box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
                0 1px 2px -1px rgb(0 0 0 / 0.1);
              position: relative;
              bottom: 0;
              /* transition: background-color 0.25s ease-in-out; */
              transition: all 0.3s ease-in-out;

              &:hover {
                bottom: 3px;
                /* border-color: #ffffffd2; */
                border-color: var(--matisse-50);
                color: var(--matisse-10);
                background-color: var(--matisse-transparent-light-800);
                box-shadow: 0 3px 6px 0 var(--matisse-transparent-light-200),
                  0 3px 5px -1px var(--matisse-transparent-light-200);
                cursor: pointer;
              }

              & .image-box {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 3.6rem;
                height: 3.6rem;
                padding: 0rem;
                /* background-color: red; */
                /* background-color: #08192b80; */
                border-color: #4c4360;
                border-radius: 50%;

                & img {
                  vertical-align: middle;
                  width: 2.4rem;
                  height: 2.4rem;
                  margin-right: 5px;
                  background-size: contain;
                  background-position: center center;
                  min-width: 3rem;
                }

                & img.img-html-css {
                  position: relative;
                  top: 1px;
                }
              }
            }
          }
        }
      }
    }
  }
}

#habilidades .container {
  font-size: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;

  & .title {
    font-size: 1.8rem;
    margin-top: 27px;
    margin-bottom: 21px;
    & i {
      /* font-size: 30px; */
      font-size: 40px;
    }
  }

  & .context {
    font-size: 2.4rem;
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: left;
    width: 100%;
    margin-top: 0px;
    color: var(--matisse-10);

    & div.skills {
      display: flex;
      justify-content: center;
      align-items: center;
      height: max-content;
      min-width: 79%;
      /* width: 79%; */
      max-width: 95%;
      /* width: calc((150px * 6) + (16px * 6)); */

      & ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: -3px;
        row-gap: 12px;
        height: max-content;
        width: 100%;
        padding: 27px 18px 35px;
        margin: auto;
        
        -webkit-user-select: none;
        user-select: none;
        & li {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          flex: 1 1 auto;
          flex-shrink: 0;
          max-width: 150px;
          min-width: 127px;
          min-height: 192px;
          scale: 0.92;
          /* max-height: 172px; */
          height: 100%;
          padding: 7px 12px 16px;
          margin: auto 9px;
          /* background-color: var(--matisse-950); */

          background-color: #0f172aef;

          outline: 2px solid;
          outline-color: var(--matisse-transparent-light-50);
          border-radius: 12px;
          box-shadow: 0 4px 6px 0px rgb(0 0 0 / 0.3),
            0 2px 4px -2px rgb(0 0 0 / 0.2);
          cursor: default;
          transition: all 0.3s ease-in-out;

          &:hover {
            outline-color: var(--matisse-50);
            transform: scale(1.07);
            margin: auto 12px;
          }

          & div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            min-height: 70%;
            flex-grow: 1;

            & img {
              width: 90%;
              height: auto;
              max-height: 120px;
              border-radius: 4px;

            }
          }

          & span {
            font-size: 21px;
          }
        }
      }
    }

    & h4.special {
      display: flex;
      justify-content: center;
      text-align: center;
      word-spacing: normal;
      letter-spacing: 0.4px;
      font-style: italic;
      font-size: 24px;
      /* color: #cbfefe; */
      color: var(--matisse-50);
      /* margin: 30px 0 50px; */
      margin: 54px 27px 36px;
      width: 70%;

      & span {
        display: contents;
        color: var(--matisse-300);
      }
    }
  }

  & div.skills-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    margin-top: 27px;
    margin-bottom: 60px;

    color: whitesmoke;

    & h3 {
      margin-bottom: 23px;
      font-size: 24px;
    }

    & p {
      width: 60%;

      text-align: justify;

      & span.skewed-word {
        font-style: italic;
      }
    }
  }
}

section#social {
  margin-bottom: 0;

  & .container {
    font-size: 1.4em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: calc(100vw * 0.05);

    & .context {
      flex: 1 1 72%;
      max-width: 372px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 65px;
      font-size: 2rem;

      & h3 {
        margin-top: 27px;
        margin-bottom: 12px;

        &:nth-child(1) {
          margin-top: 0;
        }
      }

      & div {
        /* width: 350px; */
        padding: 0 9px 0;
        text-align: center;

        & span {
          line-height: 1.7;
          cursor: default;
        }

        & span.copy-span {
          display: inline-block;
          position: absolute;
          transform: translate(6px, -6px);
          /* left: 50%;
         transform: translate(-50%, -40px); */
          /* transform: translateX(-50%); */
          padding: 1px 4px;
          border-radius: 0.6rem;
          background-color: var(--matisse-transparent-dark-900);
          color: var(--matisse-10);
          font-size: 15px;
          z-index: 99;
          visibility: hidden;

          &:hover {
            visibility: visible;
          }
        }

        &:hover {
          & span.copy-span {
            visibility: visible;
          }

          &::after {
            & span.copy-span {
              visibility: visible;
            }
          }
        }
      }

      & .container-button {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        /* height: 90px; */
        min-height: 70px;
        max-height: 210px;
        min-width: 320px;
        max-width: 700px;
        width: auto;
        gap: 21px;

        & a {
          cursor: pointer;
          .btn-social {
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background-color: transparent;
            position: relative;
            /* overflow: hidden; */
            border-radius: 7px;
            cursor: pointer;
            transition: all 0.3s;
          }

          .svgContainer {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
            -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
            letter-spacing: 0.8px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid rgba(156, 156, 156, 0.466);
          }

          .BG {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            z-index: -1;
            border-radius: 10px;
            pointer-events: none;
            transition: all 0.3s;
          }

          .BG.github {
            background: #181818;
          }

          .BG.linkedin {
            background: #0077b5;
          }

          .BG.wpp {
            background-color: #34bc38;
            /* background: #075e54; */
          }

          .btn-social:hover .BG {
            transform: rotate(27deg);
            transform-origin: bottom;
          }

          .btn-social:hover .svgContainer {
            background-color: rgba(156, 156, 156, 0.466);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
          }
        }

        & a.wpp-icon-social {
          display: none;
        }
      }
    }

    & div.form-container {
      width: 100%;
      margin: auto;
      padding: 12px 0 36px;
      flex: 2 1 auto;

      & div.form-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 72%;
        padding: 27px;
        margin: 0 auto;
        border-radius: 12px;
        background-color: #0f172aef;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        & .form-title {
          text-align: center;
          font-size: 36px;
          font-weight: 500;
          color: var(--blue-chill-100);
          margin-bottom: 7px;
        }

        & form.form-contact {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: 15px;
          width: 90%;

          & .name-email {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-end;
            gap: 18px;
          }

          & div.input-group {
            font-family: "Outfit", sans-serif;
            margin-bottom: 18px;
            flex: 1 1 50%;
            width: 100%;

            & label {
              display: block;
              margin-bottom: 4px;
              font-size: 21px;
              color: var(--blue-chill-100);
            }

            & textarea,
            input {
              /* display: block; */
              width: 100%;
              padding: 9px 12px;
              margin-top: 0.5rem;
              background-color: #0f172afe;
              color: var(--blue-chill-50);
              border: 1px solid var(--matisse-50);
              border-radius: 9px;

              &:focus {
                border-color: var(--matisse-transparent-dark-400);
                outline: none;
                box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
              }

              &::placeholder {
                color: #797979fe;
              }
            }

            & input {
              padding: 12px 16px;
              font-size: 16px;
            }

            & textarea {
              font-family: "Outfit", sans-serif;
              height: 8rem;
              /* width: calc(70% + 18px); */
              width: 100%;
              padding: 9px 12px;
              font-size: 16px;
            }
          }

          & button.form-button {
            width: auto;
            padding: 12px 16px;
            font-size: 18px;
            font-weight: 500;
            text-transform: capitalize;
            color: white;
            /* background-color: var(--matisse-transparent-light-50); */
            /* background-color: #f8fafc18; */
            background-color: #ecfeff18;
            /* border: 2px solid var(--matisse-transparent-light-0); */
            border: 2px solid var(--ghost-transparent-mid);
            border-radius: 12px;
            transition: all 0.3s ease-in-out;

            &:hover {
              background-color: var(--matisse-transparent-light-300);
              border-color: var(--matisse-transparent-dark-50);
              cursor: pointer;
            }

            &:focus {
              outline: none;
              box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
            }
          }
        }
      }
    }
  }
}

div.contact.open {
  width: 240px;
  height: 345px;

  /* h:455  w:331 */

  justify-content: center;
  & div#arrow {
    position: absolute;
    top: 32px;
    right: 21px;
    /* text-align: end;
    margin-right: 2.4rem; */

    & i.fa-arrow-left {
      font-size: 27px;
      display: none;
    }

    & i.fa-arrow-right {
      font-size: 27px;
      color: var(--matisse-200);
      display: block;
    }
  }

  & h3.title {
    display: block;
    align-self: center;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 24px;
    font-size: 21px;
    color: var(--matisse-200);
  }

  & div.container-app {
    /* margin-top: 1rem; */
    margin-bottom: 40px;

    row-gap: 24px;

    & div.icon {
      display: none;
    }

    & h3 {
      display: block;
      text-align: center;
      margin-bottom: 18px;
      font-size: 1.8rem;
      color: var(--matisse-transparent-dark-0);
    }

    & div.codigoQr {
      display: block;
      background-color: #121223;
      width: 120px;
      height: 120px;
      border-radius: 5px;
    }

    & a {
      display: block;
      margin-top: 18px;
      align-items: center;
      text-align: center;

      & button {
        position: relative;
        bottom: 0;
        padding: 1rem 2rem;

        /* border: 2px solid #ffffff27; */
        border: 2px solid var(--matisse-transparent-dark-200);

        border-radius: 3rem 3rem 3rem 3rem;

        /* color: #fffd; */
        /* color: var(--matisse-900); */
        color: var(--matisse-transparent-dark-0);
        /* background-color: #ffffff18; */
        background-color: var(--matisse-transparent-light-700);

        font-weight: 600;

        transition: all 0.3s ease-in-out;
        cursor: pointer;

        &:hover {
          /* background-color: #ffffff32; */
          background-color: var(--matisse-transparent-light-500);

          /* border-color: #ffffff97; */
          border-color: var(--matisse-400);

          color: var(--matisse-10);

          box-shadow: 0 15px 20px -5px var(--matisse-transparent-dark-900),
            0 6px 8px -4px var(--matisse-transparent-dark-900);
          /* box-shadow: 0 15px 20px -5px rgb(0 0 0 / 0.6),
            0 6px 8px -4px rgb(0 0 0 / 0.6); */

          bottom: 2px;
        }
      }
    }

    & div.codigoQr.wpp {
      background-image: url("./../src/assets/images/codigosQR/codigoQr-WPP-1.1.jpg");
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}

div.contact {
  /* h:255  w:110 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 50px;
  right: 10px;
  width: 72px;
  height: 120px;
  background-image: linear-gradient(180deg, #031b289e 18%, #0320309e 72%);
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.4),
    0 8px 10px -6px rgb(0 0 0 / 0.3);
  border-radius: 1rem;
  transition: height 0.2s ease-out, width 0.2s ease-out;
  /* transition: all 0.2s ease-in-out; */
  z-index: 27;
  & div#arrow {
    text-align: center;
    font-size: 24px;
    cursor: pointer;

    & i.fa-arrow-left {
      font-size: 27px;
      display: block;
      color: var(--matisse-200);
    }

    & i.fa-arrow-right {
      font-size: 27px;
      display: none;
    }
  }

  & h3.title {
    display: none;
  }

  & div.container-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    color: var(--matisse-10);
    height: 60%;

    & div {
      & h3 {
        display: none;
      }

      & .codigoQr {
        display: none;
        transition: all 0.5s ease-in-out;
      }

      & a {
        display: none;
      }
    }

    & div.wpp {
      & div.icon {
        /* background: #41b883; */
        height: 40px;
        width: 40px;
        background-image: url("./../src/assets/icons/icon-wpp.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 1rem;
        cursor: pointer;
      }

      .btn-social {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background-color: transparent;
        position: relative;
        border-radius: 7px;
        cursor: pointer;
        transition: all 0.3s;
      }

      .svgContainer {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        letter-spacing: 0.8px;
        border-radius: 10px;
        transition: all 0.3s;
        border: 1px solid rgba(156, 156, 156, 0.466);
      }

      .BG {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: #075e54;
        z-index: -1;
        border-radius: 10px;
        pointer-events: none;
        transition: all 0.3s;
      }

      .btn-social:hover .BG {
        transform: rotate(24deg);
        transform-origin: bottom;
      }

      .btn-social:hover .svgContainer {
        background-color: rgba(156, 156, 156, 0.466);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
      }
    }
  }
}

#check {
  display: none;
}

@media (max-width: 1151px) {
  #proyectos .container {
    & .all-projects {
      /* align-items: flex-start; */
      align-items: stretch;

      & div.project {
        &:last-child {
          & .context {
            & .info {
              background-image: linear-gradient(
                180deg,
                var(--matisse-transparent-dark-700) 9%,
                var(--matisse-transparent-dark-950) 34%
              );
            }
          }
        }
        & .context {
          & .info {
            background-image: linear-gradient(
              180deg,
              var(--matisse-transparent-dark-700) 9%,
              var(--matisse-transparent-dark-950) 56%
            );
          }
        }
      }
    }
  }
}

@media (max-width: 972px) {
  #proyectos .container {
    & .all-projects {
      align-items: flex-start;
      & div.project {
        flex-basis: 90%;
        &:last-child {
          & .context {
            & .info {
              background-image: linear-gradient(
                180deg,
                var(--matisse-transparent-dark-700) 9%,
                var(--matisse-transparent-dark-950) 72%
              );
            }
          }
        }
        & .context {
          & .info {
            background-image: linear-gradient(
              180deg,
              var(--matisse-transparent-dark-700) 12%,
              var(--matisse-transparent-dark-950) 72%
            );
            padding: 2rem 2rem 2.4rem;

            & .content-title-p {
              & div.container-title-code {
                & a.ancla-code {
                  margin-left: 18px;
                }
              }
              & .detail-text {
                width: 40ch;
              }
            }

            & .desarrollo-with {
              align-self: center;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 850px) {
  section#sobremi .container {
    grid-template-columns: minmax(270px, 1fr);

    & .container-child {
      & div.download-cv {
        display: flex;
        justify-content: center;
        /* margin-bottom: 50px; */
      }
    }
  }

  #proyectos .container {
    & .all-projects {
      align-items: flex-start;
      & div.project {
        &:last-child {
          & .context-project {
            & .info {
              background-image: linear-gradient(
                180deg,
                var(--matisse-transparent-dark-700) 9%,
                var(--matisse-transparent-dark-950) 69%
              );
            }
          }
        }
        & .context-project {
          & .info {
            background-image: linear-gradient(
              180deg,
              var(--matisse-transparent-dark-700) 7%,
              var(--matisse-transparent-dark-950) 72%
            );

            padding: 2rem 3rem 2.4rem;

            & .content-title-p {
              & div.container-title-code {
                & a.ancla-code {
                  margin-left: 18px;
                }
              }
              & .detail-text {
                width: 97%;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 545px) {
  #home {
    margin-top: 0px;
    padding: 0px 10px 10px;

    & .container {
      & .container-child {
        padding: 0 9px;
        & .context {
          margin-top: 20px;
          margin-bottom: 30px;

          & h1.into-name {
            font-size: 32px;
            margin-bottom: 5px;
          }

          & p {
            width: 100%;
            font-size: 18px;
          }

          & .buttons {
            width: 100%;
            padding-top: 24px;
            gap: 12px;

            button.btn-dark {
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  #sobremi {
    padding: 30px 24px 0;
    margin-bottom: 0;

    & .title {
      margin-bottom: 20px;

      & h1 {
        text-align: left;
      }
    }

    & .container {
      grid-template-columns: minmax(270px, 1fr);
      & .container-child {
        padding-left: 0;
        & div.download-cv {
          /* column-gap: 18px; */
          margin: 10px 0 50px;
        }
      }

      & .img-container-photo {
        & .img-photo img {
          width: 279px;
          height: 279px;
          &:hover {
            transform: scale(1.07);
          }
        }
      }
    }
  }

  #proyectos {
    padding-top: 40px;
    & .container {
      & .all-projects {
        align-items: flex-start;
        & div.project {
          &:last-child {
            & .context-project {
              & .info {
                background-image: linear-gradient(
                  180deg,
                  var(--matisse-transparent-light-400) 3%,
                  var(--matisse-transparent-dark-950) 79%
                );
              }
            }
          }

          & .context-project {
            & div.info {
              flex-direction: column;
              align-items: center;
              gap: 12px;

              padding: 2rem 1.79rem 1.79rem;

              background-image: linear-gradient(
                180deg,
                var(--matisse-transparent-light-400) 12%,
                var(--matisse-transparent-dark-950) 72%
              );

              & .content-title-p {
                & div.container-title-code {
                  justify-content: space-around;
                  & a.ancla-code {
                    margin-left: 0;
                    margin-bottom: 9px;
                  }
                }
                & .detail-text {
                  width: 100%;
                }
              }

              & .desarrollo-with {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                padding: 5px 0;

                gap: 3px;

                & a {
                  margin-right: 12px;
                }
              }
            }
          }
        }
      }
    }
  }

  #habilidades .container {
    font-size: 1.9rem;
    font-weight: 600;
  }

  #social div.container {
    & div.form-container {
      & div.form-wrapper {
        width: 92% !important;
        padding: 24px !important;

        & .form-title {
          margin-bottom: 6px;
        }

        & form.form-contact {
          width: 97% !important;

          & div.input-group {
            & label {
              text-align: center;
            }
          }

          & button.form-button {
            margin-bottom: 6px;
          }
        }
      }
    }
  }

  div.contact {
    display: none;
  }
}

@media (max-width: 768px) {
  p {
    font-size: 23px;
    font-weight: 400;
    /* text-indent: 15px; */
    /* text-indent: 35px; */
  }

  .header-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 7%;
    height: 60px;

    & nav#navbar-desktop {
      display: block;
      position: absolute;
      width: 100%;
      height: 100vh;
      background-color: var(--matisse-transparent-dark-950);
      /* background-color: #032030b2; */
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      top: 60px;
      right: -100%;
      text-align: center;
      transition: all 0.4s ease-in-out;
      z-index: 15;

      & ul.menu {
        width: 100%;
        & li.item-nav {
          display: block;
          margin: 40px 0;
        }
      }
    }

    & div#icon-menu {
      display: block;
      cursor: pointer;
      transition: all 0.3s ease;

      & label.checkbtn {
        transition: all 0.3s ease;

        & i#i-xmark {
          transition: all 0.3s ease;
          display: none;
        }

        & i {
          transition: all 0.3s ease;
          cursor: pointer;
          font-size: 27px;
        }
      }
    }
  }

  nav#navbar-desktop.active {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    right: 0;
  }

  .img-container-photo {
    align-items: flex-start;
    position: relative;
    margin-top: 0;

    .img-photo {
      margin-top: 0;
      margin-bottom: 40px;
      & img {
        margin-top: 0;
        /* margin-bottom: 40px; */
      }
    }
  }
  .img-container {
    align-items: flex-start;
    position: relative;
    /* height: 25vh; */
    /* margin-bottom: 10px; */
    margin-top: 0;

    .img-photo {
      margin-top: 0;
      margin-bottom: 0;
      & img {
        margin-top: 0;
        margin-bottom: 40px;
      }
    }
  }

  #home {
    padding-top: 90px;
  }

  section#sobremi .container {
    grid-template-columns: minmax(270px, 1fr);
    & .context {
      margin-bottom: 70px;
      margin-top: 18px;

      & p {
        width: 79%;
      }
    }
  }

  #proyectos > div.container & div.all-projects {
    & div.project {
      &:last-child {
        & .context-project {
          & .info {
            background-image: linear-gradient(
              180deg,
              var(--matisse-transparent-light-400) 9%,
              var(--matisse-transparent-dark-950) 36%
            );
          }
        }
      }

      & div.context-project {
        margin-bottom: 50px;

        & .img-container {
          /* position: absolute;
          z-index: -1; */
          align-items: center;
          /* margin: 0 18px 12px; */
          height: 100%;
          /* width: 100%; */
          /* margin-top: 0;
      margin-bottom: 10px; */

          & div {
            height: 70%;
            background-position: 10% 10%;
            background-size: cover;
            & img {
              height: 100%;
            }
          }
        }

        & .info {
          background-image: linear-gradient(
            180deg,
            var(--matisse-transparent-light-400) 9%,
            var(--matisse-transparent-dark-950) 42%
          );

          & h2.project-title {
            font-size: 2rem;
            margin-top: 24px;
          }

          & .desarrollo-with {
            margin-bottom: 36px;
            flex-wrap: wrap;
            height: auto;
          }

          & .container-button {
            height: 70px;
            margin-top: 27px;
          }

          & p.details {
            /* color: blue; */
            width: 79%;
          }
        }
      }
    }
  }

  #habilidades .container {
    & .title {
      margin-top: 27px;
      margin-bottom: 21px;
    }

    & .context {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      & div.skills {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 92%;

        & ul {
          display: flex;
          flex-wrap: nowrap;
          justify-content: flex-start;
          position: relative;
          flex-direction: row;
          /* scrollbar-width: none; */
          scroll-snap-type: x mandatory;
          scroll-padding: 27px 18px 9px;
          overflow-x: auto;
          /* overscroll-behavior-x: contain; */
          scroll-behavior: smooth;
          touch-action: pan-x;

          &::-webkit-scrollbar {
            display: none;
          }

          & li {
            scroll-snap-align: center;
            scroll-snap-stop: always;
            padding-top: 9px;
            padding-bottom: 12px;
            max-width: 127px;
            min-width: 92px;
            min-height: 158px;

            &:hover {
              outline-color: var(--matisse-transparent-light-50);
              transform: scale(1);
              margin: auto 9px;
            }

            & span {
              word-break: break-all;
              font-size: 18px;
              word-spacing: 1px;
              letter-spacing: 0.2px;
            }
          }
        }
      }

      & h4.special {
        margin: 27px 24px;
        text-align: center;
      }
    }

    & div.skills-container {
      color: whitesmoke;
      flex-wrap: wrap;

      & h3 {
        margin-bottom: 23px;
      }

      & p {
        text-align: center;
        width: 79%;
      }
    }
  }

  #social div.container {
    margin-bottom: 27px;
    flex-direction: column;

    & .title {
      margin-bottom: 24px;
    }

    & .context {
      margin-bottom: 0;

      & .container-button {
        & a.wpp-icon-social {
          display: contents;
        }
      }
    }

    & div.form-container {
      width: 100%;
      margin: auto;
      padding: 27px 0;

      & div.form-wrapper {
        & .form-title {
          margin-bottom: 6px;
        }

        & form.form-contact {
          width: 79%;

          & .name-email {
            flex-direction: column;
            align-items: center;
            gap: 0;
          }

          & div.input-group {
            margin-bottom: 24px;
          }

          & button.form-button {
            margin: 5px 0;
          }
        }
      }
    }
  }

  .title {
    font-size: 20px;
  }

  div.contact {
    display: none;
  }
}

@keyframes docs {
  0% {
    transform: translateY(0%);
    background-color: transparent;
  }

  50% {
    transform: translateY(-15%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes scrollItems {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}