style.scss

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Nunito:wght@300;400;600;700;800;900&family=Russo+One&family=Spartan:wght@700;800;900&display=swap');

:root {
  --dark: #111111;
  --lightDark: #191919;
  --myDark: #27292d;
  --light: #ffffff;
  --lightGrey: #ddd;
}

html {
  scroll-behavior: smooth;
}

.lorem {
  color: #000000;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-family: 'Nunito', sans-serif;
}

* {
  box-sizing: border-box;
}

a {
  color: var(--light);
  text-decoration: none;
}

ul {
  padding: 0;
}

li {
  list-style: none;
}

canvas {
  touch-action: auto;
  margin-bottom: -1em;
}

.main-section {
  background: var(--dark);

  color: var(--light);
  height: 100vh;

  .hero-section {
    width: 80%;
    margin: 0 auto;
    max-width: 1600px;
    pointer-events: none;

    .navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1170px;
      transition: all 0.2s ease-in-out;
      z-index: 30;
      position: absolute;
      width: 90%;
      left: 50%;
      transform: translateX(-50%);
      top: 0;

      .logo {
        font-family: 'Dancing Script', cursive;
        font-size: 1.5em;
        font-weight: 700;
        pointer-events: all;
        margin-top: 0.5em;
        transition: all 0.1s ease-in-out;

        &:hover {
          opacity: 0.8;
        }

        a {
          display: block;
        }
      }

      h2 {
        margin-top: 0.5em;
      }

      &.hidden {
        opacity: 0;
        pointer-events: none;
      }

      .nav-links {
        display: flex;
        pointer-events: all;

        div {
          cursor: pointer;
        }

        .moon-icon {
          display: none;
        }

        .phone-icon:hover {
          animation: shake 4s ease-in-out infinite;
        }

        .whatsapp-icon-img {
          transition: transform 0.2s ease-in-out;
        }

        .whatsapp-icon-img:hover {
          animation: popShake 4s ease-in-out infinite;
        }

        .sun-icon-img {
          transition: transform 0.2s;
        }

        .sun-icon-img:hover {
          transform: rotate(90deg);
        }

        div + div {
          margin-left: 2.5em;
        }
      }
    }

    .hero-section-text {
      position: absolute;
      top: 50%;
      transform: translateY(-70%);
      width: 100%;
      left: 0;
      z-index: 20;

      .hero-content {
        width: 80%;
        max-width: 1170px;
        margin: 0 auto;
        padding: 0 2em;

        h1 {
          font-size: 4em;
          font-family: 'Spartan', sans-serif;
          margin: 0;
        }

        @media (max-width: 1000px) {
          h1 {
            font-size: 3em;
          }
        }

        @media (max-width: 650px) {
          h1 {
            font-size: 2em;
          }
        }

        p {
          font-family: 'Merriweather', serif;
          font-style: italic;
          margin: 1.25em 0 2.25em;
        }

        .about-me-btn {
          display: inline-block;
          // background-image: linear-gradient(#ef3837, #f06248);
          // background-image: linear-gradient(to right, #2694d4, #5a53e0);
          background: linear-gradient(to left, #1595b6, rgba(31, 38, 103, 0.9));
          background-color: #4595eb;
          border-radius: 5px;
          padding: 0.6em 1.25em;
          font-weight: 800;
          position: relative;
          cursor: pointer;
          pointer-events: all;
          transition: all 0.1s ease-in-out;

          &:hover {
            transform: scale(1.1);
            .right-arrow {
              right: -25%;
            }
          }
        }

        .right-arrow {
          position: absolute;
          top: 10%;
          right: -20%;
          transition: right 0.2s ease-in-out;
        }

        @media (max-width: 650px) {
          .right-arrow {
            display: none;
          }
        }
      }

      @media (max-width: 650px) {
        .hero-content {
          margin-top: 1.2em;
        }
      }

      .name-logo {
        position: absolute;
        top: 0;
        left: 50%;
        width: 650px;
        transform: translate(-50%, -28%);
        z-index: -2;

        img {
          width: 100%;
        }
      }

      @media (max-width: 1500px) {
        .name-logo {
          width: 500px;
        }
      }

      @media (max-width: 650px) {
        .name-logo {
          width: 350px;
          top: -6em;
        }
      }

      @media (max-width: 460px) {
        .name-logo {
          width: 300px;
          transform: translate(-50%, -10%);
        }
      }

      @media (max-width: 360px) {
        .name-logo {
          width: 200px;
        }
      }
    }

    @media (max-width: 650px) {
      .hero-section-text {
        transform: translateY(-60%);
      }
    }

    .about-section {
      width: 90%;
      max-width: 1200px;
      height: 700px;
      background: var(--lightDark);
      border-radius: 10px;
      position: fixed;
      top: 50%;
      left: 25%;
      pointer-events: none;
      transform: translate(-50%, -45%) scale(0);
      display: flex;
      overflow: hidden;
      z-index: 1000;
      transition: all 0.2s ease-in-out;

      .x-icon {
        background: #666af6;
        background: #27292d;
        border-radius: 50%;
        position: absolute;
        width: 30px;
        height: 30px;
        right: 15px;
        top: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.15s ease-in-out;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.75);

        img {
          vertical-align: middle;
          width: 50%;
        }
      }

      .x-icon:hover {
        transform: rotate(90deg) scale(1.05);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }

      .about-me {
        width: 100%;
        display: flex;
        align-items: center;

        .about-me-text {
          width: 65%;
          margin: 0 auto;

          .about-me-title {
            color: #2694d4;
            // color: #666AF6;
          }

          .mern {
            margin-bottom: 2.2em;
            margin-top: 2.5em;
            color: #2694d4;
            // color: #666AF6;
          }

          .top-skills-icons {
            display: flex;
            margin-top: 1.5em;
            position: relative;

            h2 {
              margin-top: 0.5em;
            }

            .mongodb-icon .tooltip {
              background-color: #47a248;
              color: var(--light);
            }

            .express-icon .tooltip {
              background-color: var(--light);
            }

            .react-icon .tooltip {
              background-color: #61dafb;
            }

            .node-icon .tooltip {
              background-color: #8cc84b;
              margin-left: -2px;
            }
          }

          @media (max-width: 1000px) {
            .top-skills-icons {
              justify-content: center;
            }

            .about-me-title,
            .mern {
              text-align: center;
            }

            .about-me-detail {
              width: 90%;
              margin: 0 auto;
              text-align: justify;
            }
          }

          @media (max-width: 400px) {
            .top-skills-icons {
              justify-content: center;
              font-size: 0.7em;

              svg {
                width: 35px;
                height: 35px;
              }
            }

            .about-me-title,
            .mern {
              text-align: center;
            }

            .mern {
              margin-top: 1em;
              margin-bottom: 1.5em;
            }

            .about-me-detail {
              width: 90%;
              margin: 0 auto;
              text-align: justify;
            }
          }

          .top-skills-icons div {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: context-menu;

            .tooltip {
              background-color: #8cc84b;
              color: var(--dark);
              padding: 0.5em 1.25em;
              font-weight: 600;
              border-radius: 50px;
              position: absolute;
              margin-bottom: 2em;
              top: -1.25em;
              box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
              opacity: 0;
              pointer-events: none;
              transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }

            .tooltip::after {
              content: '';
              width: 12px;
              height: 12px;
              background: inherit;
              transform: rotate(45deg);
              position: absolute;
              bottom: -6px;
            }
          }

          .top-skills-icons div:hover .tooltip {
            opacity: 1;
            top: -3.25em;
          }

          .top-skills-icons div + div {
            margin-left: 2em;
          }
        }
      }

      @media (max-width: 370px) {
        .about-me {
          zoom: 90%;
        }
      }

      @media (max-width: 330px) {
        .about-me {
          zoom: 85%;
        }
      }

      .illustration {
        width: 100%;
        display: flex;
        align-items: center;
        text-align: center;

        .coder-img {
          width: 100%;
        }

        @media (max-width: 1000px) {
          .coder-img {
            width: 60%;
            min-width: 270px;
          }
        }
      }

      @media (max-width: 760px) {
        .illustration {
          display: none;
        }
      }
    }

    @media (max-width: 1000px) {
      .about-section {
        flex-direction: column;
        justify-content: center;
        height: 80vh;
        height: max-content;
        padding: 2em 0;
      }

      .about-me-text {
        width: 90% !important;
      }
    }

    @media (max-width: 400px) {
      .about-section {
        padding: 1em 0;
      }
    }

    .about-section.active {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      pointer-events: all;
    }
  }

  .social-links {
    position: absolute;
    font-size: 2em;
    right: 1em;
    top: 44%;
    transform: translateY(-50%);
    pointer-events: all;
    z-index: 22;

    li + li {
      margin-top: 0.5em;
    }

    i {
      color: #b0b2c3;
      transition: all 0.1s ease-in-out;
    }

    li:hover i {
      color: var(--light);
      transform: scale(1.1);
    }

    .facebook-icon {
      margin-left: 4px;
    }

    &.hidden {
      opacity: 0;
      pointer-events: none;
    }
  }

  @media (max-width: 650px) {
    .social-links {
      font-size: 1.25em;

      i {
        color: #c3c5d4;
      }
    }
  }

  #wrapper-canvas {
    z-index: 10;
    pointer-events: scroll;
  }

  @media (max-width: 650px) {
    #wrapper-canvas {
      display: none;
    }
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark);
    opacity: 0;
    z-index: 99;
    pointer-events: none;

    &.active {
      opacity: 0.7;
      pointer-events: all;
    }
  }

  .overlay2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark);
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
  }

  @media (max-width: 650px) {
    .overlay2 {
      opacity: 0.4;
    }
  }

  .latest-works-link {
    position: absolute;
    background: linear-gradient(to left, #1595b6, rgba(31, 38, 103, 0.9));
    font-weight: 700;
    padding: 0.5em 1em;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    bottom: 4em;
    display: inline-block;
    cursor: pointer;
    pointer-events: all;
    left: 50%;
    transform: translate(-50%, 0);
    transition: all 0.1s ease-in-out;
    z-index: 10;

    &:hover {
      transform: translate(-50%, 0) scale(1.1);
    }

    &:hover + {
      .down-arrow {
        bottom: 1.75em;
      }
    }
  }

  .down-arrow {
    position: absolute;
    bottom: 2em;
    cursor: pointer;
    pointer-events: all;
    left: 50%;
    transform: translate(-60%, 0) rotate(90deg);
    transition: all 0.25s ease-in-out;

    &:hover {
      bottom: 1.75em;
    }
  }

  .latest-works-arrow {
    background: #444;
    width: 2px;
    height: 1.5em;
    position: absolute;
    bottom: 0;
    cursor: pointer;
    pointer-events: all;
    left: 50%;
    transform: translate(-50%, 0);

    &:hover ~ {
      .down-arrow {
        bottom: 1.75em;
      }
    }
  }
}

@media (max-width: 650px) {
  .main-section {
    font-size: 0.8em;
  }
}

.work-section {
  background: var(--light);
  color: var(--dark);
  position: relative;
  // width: 90%;
  margin: 0 auto;

  h2 {
    text-align: center;
    width: max-content;
    margin: 0 auto;
    padding: 0.2em 0.5em;
    border: 2px solid #1788ae;
    border: 2px solid #1788ae;
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-size: 2.5em;
    background: var(--light);
    position: relative;
    z-index: 5;
    color: #1788ae;
    color: #1788ae;

    @media (max-width: 650px) {
      font-size: 1.5em;
      border: none;
      padding: 0;
      margin-bottom: 0.8em;
      margin-top: 0.5em;
    }
  }

  .project {
    display: flex;
    gap: 5em;
    align-items: center;
    margin: 0 auto;
    position: relative;
    width: 90%;

    max-width: 1600px;
    margin-bottom: 3em;

    .ejs {
      display: flex;
      align-items: center;
      font-size: 1.2em;
      cursor: default;
      user-select: none;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      font-size: 0.85em;
      li {
        border: 1px solid #ddd;
        padding: 0.4em 0.8em;
        border-radius: 50px;
        margin-bottom: 0.5em;
        margin-right: 0.5em;
      }
    }

    .project-img {
      position: relative;
      cursor: pointer;
      display: flex;

      &:nth-child(2) {
        justify-content: flex-end;
      }

      @media (max-width: 650px) {
        &:nth-child(2) {
          justify-content: center;
        }

        &:nth-child(even) {
          order: -1;
        }
      }

      a {
        display: flex;
        justify-content: center;
      }

      .project-img-wrapper {
        max-width: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        img {
          width: 100%;
          max-width: 400px;
          transition: all 0.2s ease-in-out;
          z-index: 6;
        }

        @media (max-width: 650px) {
          .visit-site {
            top: initial;
            bottom: -2.5em;
            opacity: 1;
            z-index: 80;
            box-shadow: 0 0px 5px rgba(0, 0, 0, 0.25);

            &::after {
              top: -6px;
              opacity: 0;
            }
          }
        }

        @media (min-width: 650px) {
          &:hover {
            img {
              transform: scale(1.2);
            }

            .visit-site {
              top: -4em;
              opacity: 1;
            }
          }
        }
      }

      @media (max-width: 650px) {
        .project-img-wrapper {
          cursor: default;

          a:first-child {
            pointer-events: none;
          }
        }
      }
    }

    @media (max-width: 650px) {
      .project-img {
        justify-content: center;
        margin-bottom: 2em;
      }
    }

    .project-details {
      a {
        color: black;
      }

      span {
        font-size: 1.2em;
      }

      p {
        text-align: justify;
      }
    }

    .circle-dot {
      width: 15px;
      height: 15px;
      background-color: var(--dark);
      background-color: var(--light);
      border: 3px solid #2694d4;
      // box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
      position: absolute;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: all 0.05s ease-in-out;
      cursor: pointer;
      z-index: 2;

      &:hover {
        transform: translate(-50%, -50%) scale(1.2);
      }
    }

    @media (max-width: 650px) {
      .circle-dot,
      .circle-extension {
        display: none;
      }
    }

    .circle-extension {
      width: 35%;
      height: 1px;
      background-color: #ddd;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-100%, -50%);
      z-index: 1;
    }

    .visit-site {
      background: #2694d4;
      color: var(--light);
      padding: 0.5em 1em;
      border-radius: 5px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      position: absolute;
      opacity: 0.7;
      z-index: 5;
      top: 10%;
      left: 50%;
      transform: translate(-50%, 0);
      width: max-content;
      svg {
        margin-left: 0.25em;
      }

      &::after {
        content: '';
        width: 12px;
        height: 12px;
        background: inherit;
        transform: rotate(45deg) translate(-50%, 50%);
        position: absolute;
        left: 50%;
        bottom: -6px;
      }
    }

    h3 {
      font-size: 2em;
      margin-bottom: 0.2em;
    }

    div {
      width: 100%;
    }
  }

  @media (max-width: 650px) {
    .project {
      flex-direction: column;
      gap: 0;
    }
  }

  .project1 {
    border-radius: 10px;

    .circle-dot {
      border-color: #639;
    }

    h3 {
      color: #639;

      + span {
        color: #639;
      }
    }

    .visit-site {
      background-color: #639;
    }

    .circle-extension {
      transform: translate(0%, -50%);
      background-color: #639;
    }
  }
  .project2 {
    .circle-dot {
      border-color: #47afa1;
    }

    h3 {
      color: #47afa1;

      + span {
        color: #47afa1;
      }
    }

    .visit-site {
      background-color: #47afa1;
    }

    .circle-extension {
      background-color: #47afa1;
    }
  }
  .project3 {
    .circle-dot {
      border-color: #2694d4;
    }

    h3 {
      color: #2694d4;

      + span {
        color: #2694d4;
      }
    }

    .circle-extension {
      transform: translate(0%, -50%);
      background-color: #2694d4;
    }
  }
  .project4 {
    .circle-dot {
      border-color: #fc815c;
    }

    h3 {
      color: #fc815c;

      + span {
        color: #fc815c;
      }
    }

    .visit-site {
      background-color: #fc815c;
    }

    .circle-extension {
      background-color: #fc815c;
    }
  }
  .project5 {
    .circle-dot {
      border-color: #156cdd;
    }

    h3 {
      color: #156cdd;

      + span {
        color: #156cdd;
      }
    }

    .visit-site {
      background-color: #156cdd;
    }

    .circle-extension {
      transform: translate(0%, -50%);
      background-color: #156cdd;
    }

    @media (min-width: 650px) {
      .project-img-wrapper {
        &:hover {
          img {
            transform: scale(1.1) !important;
          }
        }
      }
    }
  }
  .project6 {
    .circle-dot {
      border-color: #ff5553;
    }

    h3 {
      color: #ff5553;

      + span {
        color: #ff5553;
      }
    }

    .visit-site {
      background-color: #ff5553;
    }

    .circle-extension {
      background-color: #ff5553;
    }

    @media (min-width: 650px) {
      .project-img-wrapper {
        &:hover {
          img {
            transform: scale(1.1) !important;
          }
        }
      }
    }
  }

  .vertical-line {
    width: 2px;
    position: absolute;
    top: 0;
    bottom: -5em;
    background: #1788ae;
    opacity: 0.5;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 0;
  }

  @media (max-width: 650px) {
    .vertical-line {
      // left: 4%;
      display: none;
    }
  }

  .vertical-line2 {
    width: 2px;
    position: absolute;
    top: -3em;
    bottom: 0;
    background: #eee;
    left: 100%;
    transform: translate(-50%, 0);
    z-index: 0;
  }
}

@media (max-width: 650px) {
  .work-section {
    font-size: 0.8em;

    h2 {
      font-size: 2em;
      margin-bottom: 1em;
    }
  }
}

.testimonial-section {
  .testimonial-title {
    width: max-content;
    position: relative;
    background-color: var(--light);
    border: 2px solid #1788ae;
    margin: 0 auto;
    font-size: 2em;
    margin-bottom: 1.5em;
    padding: 0.35em 0.65em;
    border-radius: 8px;
    color: #1788ae;
    z-index: 5;
  }

  @media (max-width: 650px) {
    .testimonial-title {
      font-size: 1.5em;
      border: none;
      padding: 0;
      margin-bottom: 0.8em;
    }
  }
  @media (max-width: 350px) {
    .testimonial-title {
      font-size: 1.25em;
      border: none;
      padding: 0;
      margin-bottom: 0.8em;
    }
  }

  .swiper-container {
    max-width: 1000px;
    margin: 0 auto;

    .swiper-wrapper {
      display: flex;
      align-items: center;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1em 0 2em;

      .swiper-card {
        display: flex;
        align-items: center;
        box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
        padding: 2em;
        border-radius: 10px;
        max-width: 800px;
        z-index: 6;
        width: 80%;
        position: relative;
        background-color: var(--light);

        .testimonial-image {
          flex: 1;

          img {
            display: block;
            width: 85%;
            object-fit: cover;
            border-radius: 50%;
          }
        }

        .testimonial-text {
          text-align: left;
          flex: 2;
          padding-top: 2.5em;

          h2,
          h5 {
            text-align: right;
            margin: 0;
          }

          h5 {
            margin-top: 0.2em;
          }
        }
      }

      @media (max-width: 750px) {
        .swiper-card {
          width: 90%;
          font-size: 0.8em;
        }
      }

      @media (max-width: 650px) {
        .swiper-card {
          flex-direction: column;
          padding: 1.5em;

          .testimonial-image {
            display: flex;
            justify-content: center;

            img {
              max-width: 200px;
            }
          }

          .testimonial-text {
            display: flex;
            flex-direction: column;
            padding-top: 1em;
            h2,
            h5 {
              text-align: center;
            }
            p {
              order: 3;
              text-align: justify;
            }
          }
        }
      }
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: #1788ae;
    }
    .swiper-pagination-bullet {
      background-color: #1788ae;
    }

    @media (max-width: 750px) {
      .swiper-button-next,
      .swiper-button-prev {
        display: none;
      }
    }
  }
}

.contact-section {
  padding-top: 2em;
  h2 {
    text-align: center;
    font-size: 2em;
    color: #1788ae;
    width: max-content;
    margin: 0 auto;
    position: relative;
    background-color: var(--light);
    border: 2px solid #1788ae;
    margin-bottom: 1.5em;
    padding: 0.35em 0.65em;
    border-radius: 8px;

    @media (max-width: 650px) {
      font-size: 1.5em;
      border: none;
      padding: 0;
      margin-bottom: 0.8em;
    }
  }
  .contact-form {
    display: flex;
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    color: #444;

    @media (max-width: 990px) {
      flex-direction: column;
    }

    svg {
      vertical-align: middle;
    }

    .contact-img {
      width: 100%;
      text-align: center;

      img {
        width: 100%;
        max-width: 500px;
      }
    }

    form {
      width: 100%;
      display: flex;
      flex-direction: column;
      max-width: 700px;

      input,
      textarea,
      button {
        border: none;
        background-color: #1788ae18;
        padding: 1em;
        border-radius: 5px;
        outline: none;
        resize: none;
        margin: 0.5em 0 1.2em;
        border: 1px solid #ced4da;
        transition: all 0.025s ease-in-out;
        &:focus {
          border-color: #1788ae;
          box-shadow: 0 0 0 0.2rem rgba(23, 136, 174, 0.25);
        }
      }

      button {
        background-color: #1788ae;
        font-family: inherit;
        margin-top: 1em;
        color: white;
        transition: all 0.1s ease-in-out;
        cursor: pointer;

        &:hover {
          transform: scale(1.025);
        }
      }
    }
  }
}

footer {
  margin: 3em 0 2em;
  p {
    text-align: center;
    color: #999;
    font-size: 0.75em;
  }

  .black-logo {
    display: flex;
    justify-content: center;
    cursor: pointer;
    width: max-content;
    margin: 0 auto;
    position: relative;
    z-index: 4;

    span {
      background: #1788ae;
      color: var(--light);
      padding: 0.5em 1em;
      border-radius: 5px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      position: absolute;
      opacity: 0;
      z-index: -5;
      left: 0%;
      transform: translate(0%, 15%);
      width: max-content;
      svg {
        margin-left: 0.25em;
      }

      &::after {
        content: '';
        width: 12px;
        height: 12px;
        background: inherit;
        transform: rotate(45deg) translate(-50%, 0%);
        position: absolute;
        left: 50%;
        top: 0px;
      }
    }

    &:hover {
      span {
        left: 110%;
        opacity: 1;
      }
    }
  }
}

@keyframes breathing {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-1em);
  }
  50% {
    transform: translateY(0em);
  }
  75% {
    transform: translateY(1em);
  }
  100% {
    transform: translateY(0em);
  }
}

@keyframes popShake {
  0% {
    transform: scale(1.1) rotate(0deg);
  }
  2% {
    transform: scale(1.1) rotate(10deg);
  }
  4% {
    transform: scale(1.1) rotate(-10deg);
  }
  6% {
    transform: scale(1.1) rotate(10deg);
  }
  8% {
    transform: scale(1.1) rotate(-10deg);
  }
  10% {
    transform: scale(1.1) rotate(10deg);
  }
  12% {
    transform: scale(1.1) rotate(-10deg);
  }
  14% {
    transform: scale(1.1) rotate(10deg);
  }
  16% {
    transform: scale(1.1) rotate(-10deg);
  }
  18% {
    transform: scale(1.1) rotate(10deg);
  }
  20% {
    transform: scale(1.1) rotate(-10deg);
  }
  22% {
    transform: scale(1.1) rotate(10deg);
  }
  24% {
    transform: scale(1.1) rotate(-10deg);
  }
  26% {
    transform: scale(1.1) rotate(10deg);
  }
  28% {
    transform: scale(1.1) rotate(-10deg);
  }
  30% {
    transform: scale(1.1) rotate(10deg);
  }
  32% {
    transform: scale(1.1) rotate(-10deg);
  }
  34% {
    transform: scale(1.1) rotate(-10deg);
  }
  36% {
    transform: scale(1.1) rotate(10deg);
  }
  38% {
    transform: scale(1.1) rotate(-10deg);
  }
  40% {
    transform: scale(1.1) rotate(10deg);
  }
  42% {
    transform: scale(1.1) rotate(-10deg);
  }
  44% {
    transform: scale(1.1) rotate(10deg);
  }
  46% {
    transform: scale(1.1) rotate(0deg);
  }
}

@keyframes shake {
  0% {
    transform: scale(1.1) translate3d(0em, 0, 0);
  }
  2% {
    transform: scale(1.1) translate3d(0.05em, 0, 0);
  }
  4% {
    transform: scale(1.1) translate3d(-0.05em, 0, 0);
  }
  6% {
    transform: scale(1.1) translate3d(0.05em, 0, 0);
  }
  8% {
    transform: scale(1.1) translate3d(-0.05em, 0, 0);
  }
  10% {
    transform: scale(1.1) translate3d(0.05em, 0, 0);
  }
  12% {
    transform: scale(1.1) translate3d(-0.05em, 0, 0);
  }
  14% {
    transform: scale(1.1) translate3d(0.05em, 0, 0);
  }
  16% {
    transform: scale(1.1) translate3d(-0.05em, 0, 0);
  }
  18% {
    transform: scale(1.1) translate3d(0.05em, 0, 0);
  }
  20% {
    transform: scale(1.1) translate3d(-0.05em, 0, 0);
  }
  22% {
    transform: scale(1.1) translate3d(0.05em, 0, 0);
  }
  24% {
    transform: scale(1.1) translate3d(-0.05em, 0, 0);
  }
  26% {
    transform: scale(1.1) translate3d(0.05em, 0, 0);
  }
  28% {
    transform: scale(1.1) translate3d(-0.05em, 0, 0);
  }
  30% {
    transform: scale(1.1) translate3d(0.05em, 0, 0);
  }
  32% {
    transform: scale(1.1) translate3d(-0.05em, 0, 0);
  }
  34% {
    transform: scale(1.1) translate3d(0.05em, 0, 0);
  }
  36% {
    transform: scale(1.1) translate3d(-0.05em, 0, 0);
  }
  38% {
    transform: scale(1.1) translate3d(0.05em, 0, 0);
  }
  40% {
    transform: scale(1.1) translate3d(-0.05em, 0, 0);
  }
  42% {
    transform: scale(1.1) translate3d(0.05em, 0, 0);
  }
  44% {
    transform: scale(1.1) translate3d(-0.05em, 0, 0);
  }
  46% {
    transform: scale(1.1) translate3d(0em, 0, 0);
  }
}