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

@font-face {
    font-family: "Kaftan Serif";
    src: url("../fonts/KaftanSerif-Regular.woff2");
}

@layer components {
    * {
        scrollbar-width: thin;
        scrollbar-color: #fde68a #000;
        /* scrollbar-color: #E9C279 #000000; */
    }

    /* html {
        scroll-behavior: smooth;
    } */

    ::selection {
        @apply bg-logo-200 text-black;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-luxury;
    }

    a,
    body {
        @apply font-title;
    }

    span,
    ul,
    li,
    p {
        @apply font-body;
    }

    section {
        /* @apply py-32 px-4 sm:py-40 md:px-12 md:pt-[12rem] md:pb-[7.5rem] lg:pt-[16rem] lg:pb-[10rem] relative z-10; */
        @apply py-20 px-4 sm:py-32 md:px-12 md:pt-[8.5rem] md:pb-[6.5rem] lg:pt-[10rem] lg:pb-[8rem] relative z-10;
    }

    #navbarComponent {
        @apply sticky top-0 z-50;
    }

    .navlink {
        @apply no-underline transition-all duration-500 underline-offset-2;
    }

    .navlink:hover,
    .navlink.active:hover {
        @apply underline underline-offset-8;
    }

    .navlink.active {
        @apply underline underline-offset-4;
    }

    #header.scrolled {
        @apply backdrop-blur-[2px] transition-all duration-300 ease-linear;
    }

    #header.scrolled .nav-overlay {
        @apply h-40 bg-gradient-to-b from-black/60 to-black/0;
    }

    #header.scrolled #logo {
        @apply h-20;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}