/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Base Font Styles */
body {
    font-family: 'Inter', sans-serif;
}

/* Font Weights */
:root {
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
}

/* Font Sizes and Line Heights for Headline and Body */
:root {
    /* Headline Sizes and Line Heights */
    --headline-large-font-size: 96px;
    --headline-medium-font-size: 64px;
    --headline-small-font-size: 36px;
    --headline-extrasmall-font-size: 20px;

    --headline-large-line-height: 104px;
    --headline-medium-line-height: 72px;
    --headline-small-line-height: 44px;
    --headline-extrasmall-line-height: 20px;

    /* Body Sizes and Line Heights */
    --body-extra-large-font-size: 24px;
    --body-large-font-size: 20px;
    --body-medium-font-size: 16px;
    --body-small-font-size: 14px;
    --body-extra-small-font-size: 12px;
    --body-iper-small-font-size:10px;

    --body-extra-large-line-height: 36px;
    --body-large-line-height: 28px;
    --body-medium-line-height: 24px;
    --body-small-line-height: 20px;
    --body-extra-small-line-height: 16px;
    --body-iper-small-line-height: 14px;
}

/* Headline Styles */
.ot-headline-large {
    font-size: 36px;
    line-height: 40px;
}

@media (min-width: 768px) {
    .ot-headline-large {
        font-size: var(--headline-large-font-size); /* You can adjust this value */
        line-height: var(--headline-large-line-height); /* You can adjust this value */
    }
}

.ot-headline-medium {
    font-size: var(--headline-medium-font-size);
    line-height: var(--headline-medium-line-height);
}

.ot-headline-small {
    font-size: var(--headline-small-font-size);
    line-height: var(--headline-small-line-height);
}

.ot-headline-extrasmall {
    font-size: var(--headline-extrasmall-line-height);
    line-height: var(--headline-extrasmall-line-height);
}

/* Font Weight Variants for Headlines */
.ot-headline-thin {
    font-weight: var(--font-weight-thin);
}

.ot-headline-light {
    font-weight: var(--font-weight-light);
}

.ot-headline-regular {
    font-weight: var(--font-weight-regular);
}

.ot-headline-medium-weight {
    font-weight: var(--font-weight-medium);
}

.ot-headline-semibold {
    font-weight: var(--font-weight-semibold);
}

.ot-headline-bold {
    font-weight: var(--font-weight-bold);
}

.ot-headline-black {
    font-weight: var(--font-weight-black);
}

/* Body Styles */
.ot-body-extra-large {
    font-size: 16px;
    line-height: 24px;
}

@media (min-width: 768px) {
    .ot-body-extra-large {
        font-size: var(--body-extra-large-font-size); /* You can adjust this value */
        line-height: var(--body-extra-large-line-height); /* You can adjust this value */
    }
}

.ot-body-large {
    font-size: 16px;
    line-height: 24px;
}

@media (min-width: 768px) {
    .ot-body-large {
        font-size: var(--headline-large-font-size-lg); /* You can adjust this value */
        line-height: var(--headline-large-line-height-lg); /* You can adjust this value */
    }
}

.ot-body-medium {
    font-size: var(--body-medium-font-size);
    line-height: var(--body-medium-line-height);
}

.ot-body-small {
    font-size: var(--body-small-font-size);
    line-height: var(--body-small-line-height);
}

.ot-body-extra-small {
    font-size: var(--body-extra-small-font-size);
    line-height: var(--body-extra-small-line-height);
}

.ot-body-iper-small {
    font-size: var(--body-iper-small-font-size);
    line-height: var(--body-iper-small-line-height);
}

/* Font Weight Variants for Body Text */
.ot-body-thin {
    font-weight: var(--font-weight-thin);
}

.ot-body-light {
    font-weight: var(--font-weight-light);
}

.ot-body-regular {
    font-weight: var(--font-weight-regular);
}

.ot-body-medium-weight {
    font-weight: var(--font-weight-medium);
}

.ot-body-semibold {
    font-weight: var(--font-weight-semibold);
}

.ot-body-bold {
    font-weight: var(--font-weight-bold);
}

.ot-body-black {
    font-weight: var(--font-weight-black);
}

.text-shadow {
    text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.5), -1px -1px 9px rgba(255, 255, 255, 0.5);
}