main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  ::selection {
    background: #00b61e;
  }
  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 1.25rem;
  }
  .square {
    aspect-ratio: 1/1;
    padding: 1rem;
  }
  .lab {
    background-image: url("./src/assets/images/matrix_bg.gif");
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: luminosity;
  }
  .weather-night {
    background: radial-gradient(
      114.84% 135.62% at 2.19% 5.35%,
      #2d2c5b 16.67%,
      #0a0a35 62.5%
    );
  }

  .weather-day {
    background: radial-gradient(
      114.84% 135.62% at 2.19% 5.35%,
      #cecece 16.67%,
      #0500f4 62.5%
    );
  }

  .white {
    fill: #ffffff;
  }
  .gray {
    fill: #e0e0e0;
  }
  .yellow {
    fill: #ffeb3b;
  }
  /* GRAPH */
  #waves {
    display: flex;
    align-items: center;
  }

  .stroke {
    display: block;
    position: relative;
    background: #50bf97;
    height: 10px;
    width: 8px;
    border-radius: 50px;
    margin: 0 5px;
    animation: animate 1.2s linear infinite;
    animation-play-state: paused;
  }

  @keyframes animate {
    50% {
      height: 30%;
    }
    100% {
      height: 100%;
    }
  }

  .stroke:nth-child(1) {
    animation-delay: 0s;
  }
  .stroke:nth-child(2) {
    animation-delay: 0.3s;
  }
  .stroke:nth-child(3) {
    animation-delay: 0.6s;
  }
  .stroke:nth-child(4) {
    animation-delay: 0.9s;
  }
  .stroke:nth-child(5) {
    animation-delay: 0.6s;
  }
  .stroke:nth-child(6) {
    animation-delay: 0.3s;
  }
  .stroke:nth-child(7) {
    animation-delay: 0s;
  }

  /* Play button */
  .button-wrapper {
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    cursor: pointer;
    display: inline-flex;
    background: none;
    margin-right: 1rem;
    transform: rotate(-180deg);
    transition: transform 0.3s ease;
  }
  .button-wrapper .left,
  .button-wrapper .right {
    width: 100%;
    height: 100%;
    background-color: white;
    border: none;
    transition: clip-path 0.3s ease;
  }
  .button-wrapper .left {
    clip-path: polygon(30% 0, 85% 0%, 85% 100%, 30% 100%);
  }
  .button-wrapper .right {
    clip-path: polygon(15% 0, 70% 0, 70% 100%, 15% 100%);
  }
  .button-wrapper.active {
    transform: rotate(0deg);
  }
  .button-wrapper.active .left {
    clip-path: polygon(30% 0, 102% 20%, 102% 80%, 30% 100%);
  }
  .button-wrapper.active .right {
    clip-path: polygon(-5% 18%, 100% 50%, 100% 50%, -5% 82%);
  }
}