@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
@import "header";
@import "anchoring";
@import "carousel";
@import "image";
@import "main-title";
@import "footer";

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

html {
    --body-BackgroundColor: #f5f5f5;
    --primaryColor: #124498;
    --header-BackgroundColor: var(--primaryColor);
    --header-textColor: #ffd39c;
    --header-Height: 5.375rem;

    scroll-padding-top: var(--header-Height);
}

// TODO: Try to do this in a better way if possible
.prose :where(p:first-of-type):not(:where([class~="not-prose"] *)) {
    font-size: initial;
}

.container-large {
    max-width: 75rem;
}

.default-text-color {
    color: var(--primaryColor);
    --tw-prose-bold: #124498;
}

.default-paragraph-style {
    color: var(--primaryColor);
    --tw-prose-bold: #124498;
    --tw-prose-bullets: #124498;
    li > div {
        margin: 0;
    }
    h1 {
        color: var(--primaryColor);
        font-size: 2.5rem;
    }
    h2 {
        color: var(--primaryColor);
        font-size: 1.75rem;
    }
}

.font {
    font-family: 'Questrial', sans-serif;
}

body {
    font-family: 'Questrial', sans-serif;
    background-color: var(--body-BackgroundColor);
}