*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
}

p {
  margin-block-start: 1lh;
}

a,
button,
img {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button {
  background-color: transparent;
  border: none;
  outline: none;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
}

.first-tab {
  --theme-color: lime;
  display: flex;
  justify-content: center;
  padding: 1vmax;
  --theme-color-custom: color-mix(
    in srgb,
    var(--theme-color) 70%,
    transparent 30%
  );

  button {
    position: relative;
    background: var(--theme-color-custom);
    padding: 0.9766vmax 2.9297vmax;
    font-size: 1.1068vmax;
    font-weight: 500;
    color: #181818;
    cursor: pointer;
    border: 0.0651vmax solid var(--theme-color-custom);
    border-radius: 0.5208vmax;
    filter: drop-shadow(0.1302vmax 0.1302vmax 0.1953vmax rgba(0, 0, 0, 0.2));
    animation: wind 2s ease-in-out infinite;
    zoom: 0.9;
  }

  .icon-1 {
    position: absolute;
    top: 0;
    right: 0;
    transform-origin: 0 0;
    transform: rotate(10deg);
    width: 1.6276vmax;
    filter: drop-shadow(0.1302vmax 0.1302vmax 0.1953vmax rgba(0, 0, 0, 0.3));
  }

  .icon-1 {
    animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite;
    transform: rotate(10deg);
  }

  .icon-2 {
    position: absolute;
    top: 0;
    left: 1.6276vmax;
    width: 0.7813vmax;
    filter: drop-shadow(0.1302vmax 0.1302vmax 0.1953vmax rgba(0, 0, 0, 0.5));
    transform-origin: 50% 0;
    transform: rotate(10deg);
  }

  .icon-2 {
    animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
    transform: rotate(0);
  }

  .icon-3 {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: rotate(-5deg);
    width: 1.1719vmax;
    filter: drop-shadow(0.1302vmax 0.1302vmax 0.1953vmax rgba(0, 0, 0, 0.5));
  }

  .icon-3 {
    animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
    transform: rotate(0);
  }
}

 @keyframes wind {
    0% {
      background-position: 0% 50%;
    }

    0% {
      background-position: 50% 100%;
    }

    0% {
      background-position: 0% 50%;
    }
  }

  @keyframes slay-1 {
    0% {
      transform: rotate(10deg);
    }

    50% {
      transform: rotate(-5deg);
    }

    100% {
      transform: rotate(10deg);
    }
  }

  @keyframes slay-2 {
    0% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(15deg);
    }

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

  @keyframes slay-3 {
    0% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(-5deg);
    }

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