@import "tailwindcss";
@plugin "@tailwindcss/forms";

@layer base {
    * {
        font-family: Poppins;
    }

    a {
        @apply no-underline text-cyan-700;
    }
}

@layer utilities {
    .bg-spider-cover {
        @apply bg-cyan-700 bg-center bg-no-repeat;
        background-image: url("../public/api-platform/web.svg");
        background-size: 110%;
    }
    .ribbon {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(13.397459%, -100%) rotate(30deg); /* translateX: 100%*(1-cos(angleRotation) */
        transform-origin: bottom left;
  }
}

@theme {
  --font-display: "Poppins", "system-ui";
  --shadow-card: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
  --transition-duration: 300ms;
  --min-height-24: 96px;
  --color-cyan-500: #46b6bf;
  --color-cyan-700: #0f929a;
  --color-cyan-200: #bceff3;
  --color-red-500: #ee4322;
  --color-black: #1d1e1c;
  --color-white: #ffffff;
  --color-transparent: transparent;
  --container-padding: 2rem;
  --container-center: center;
}
