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

@layer base {
    img, video {
        max-width: none;
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        display: unset;
        vertical-align: unset;
    }

    html.front {
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

    .front body {
        @apply relative text-white text-[16px] font-robotoflex font-normal leading-[1.3] bg-ebg-purple max-w-[1920px] my-0 mx-auto min-h-[100vh] scroll-smooth;
    }

    body {
        text-rendering: optimizeSpeed;
    }

    .front main {
        overflow-x: hidden;
    }

    .acf-page {
        @apply leading-[1.3];
    }

    .acf-page button {
        @apply leading-[1.3];
    }

    .alignfull {
        @apply max-w-none;
    }

    .container {
        @apply mx-auto px-4 xl:px-0;
    }

    .container-large {
        @apply xl:p-0 xl:m-0 extra-xl:mx-auto;
    }

    h1 {
        @apply text-[40px] xl:text-[80px] leading-[1.1] xl:leading-none;
    }

    h2 {
        @apply text-[32px] xl:text-[60px] leading-[1.2];
    }

    .entry-content {
        @apply text-[16px] xl:text-[22px] break-words;
    }

    .entry-content ol,
    .entry-content ul {
        @apply list-outside last:mb-0 ml-0 mt-6 only:mt-0;
    }

    .entry-content p+ol,
    .entry-content p+ul {
        @apply mt-0;
    }

    .entry-content ol li,
    .entry-content ul li {
        @apply mb-2.5 last:mb-0 ml-[25px];
    }

    .entry-content ol {
        @apply list-decimal;
    }

    .entry-content ul {
        @apply list-disc;
    }

    .entry-content p {
        @apply mb-4 last:mb-0 empty:mb-0;
    }

    .entry-content strong {
        @apply font-bold;
    }
}

.btn-primary {
    @apply flex w-fit shrink-0 text-white text-[16px] bg-flexplay-green rounded-[30px] overflow-hidden px-14 py-5;
    @apply hover:bg-flexplay-green-light;

    transition: all .25s ease;
}

.gradient {
    background: linear-gradient(0deg, rgba(84, 5, 130, 0) 0%, #540582 100%);
}

@keyframes marquee {
    from {
        translate: 0;
    }
    to {
        translate: -100%;
    }
}

.running-line-group {
    animation: marquee 10s infinite linear;
}