@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

@layer utilities {
    .noto-serif-font {
        font-family: "Noto Serif", serif;
    }

    .inter-font {
        font-family: "Inter", sans-serif;
    }

    .button-styles {
        background-color: rgba(233, 90, 8, 1.00);
        color: #FFFF;
        padding: 0.75rem 0;
        font-weight: 600;
        text-transform: uppercase;
        cursor: pointer;
    }

    .btn {
        cursor: pointer;
    }

    .btn-sub {
        cursor: pointer;
    }

    .button-styles:hover {
        box-shadow: 0px 0px 10px rgba(0, 123, 255, 0.6);
        transform: translateY(-5px);
    }

    .card:hover {
        box-shadow: 0px 0px 10px rgba(0, 123, 255, 0.6);
        transform: translateY(-5px);
    }

    .last-child:hover {
        box-shadow: 0px 0px 10px rgba(0, 123, 255, 0.6);
        transform: translateY(-5px);
    }

    .footer-list-styles {
        padding: 8px 0;
    }

}

@layer components {
    :root {
        --color-primary: rgba(233, 90, 8, 1.00);
    }
}