:root {
    /* Font family */
    --ff-heading-primary: "Oranienbaum", serif;
    --ff-heading-primary-2: "AddingtonCF-Regular", serif;
    --ff-heading-primary-2-italic: "AddingtonCF-Regularitalic", serif;
    --ff-heading-primary-2-bold: "AddingtonCF-Bold", serif;
    --ff-heading-primary-2-extrabold: "AddingtonCF-Extrabold", serif;
    --ff-heading-primary-2-light: "AddingtonCF-Light", serif;
    --ff-heading-primary-2-light-italic: "AddingtonCF-Lightitalic", serif;

    --ff-heading-secondary: "AddingtonCF-Regularitalic", Georgia, serif;
    --ff-body-bold: "Poppins-Bold", sans-serif;
    --ff-body-regular: "Poppins-Regular", sans-serif;
    --ff-body-light: "Poppins-Light", sans-serif;

    /* Colors */
    --clr-primary-dark: #08090d;
    --clr-primary-glass: rgba(244, 239, 227, 0.88);
    --clr-secondary-000: #ffffff;
    --clr-secondary-100: #f4efe3;
    --clr-secondary-200: #dfe6ee;
    --clr-secondary-300: #ffffff;
    --clr-secondary-400: #7f8792;
    --clr-secondary-500: #46515e;
    --clr-secondary-700: #303030;
    --clr-accent-lights: #061a40;
    --clr-accent-lights-100: #bda15d;
    --clr-accent-water: #0a2a63;
    --clr-accent-water-100: #66d9f2;
    --clr-accent-summit: #4f5d3d;
    --clr-accent-summit-100: #d8c37a;
    --clr-accent-history: #5d4730;
    --clr-accent-history-100: #bda15d;
    --clr-accent-culture: #36583a;
    --clr-accent-culture-100: #9eb68c;

    /* Font Size */
    --fz--header-title: clamp(0.5rem, 0.9vw, 0.7rem);
    --fz--header-sub: clamp(2rem, 10vw, 3rem);  
    --fz--header-menu: clamp(0.8rem, 6vw, 2.5rem);
    --fz--header-cat-title: 20vw;
    --fz--header-cat-list: clamp(1rem, 1.5vw, 2rem);

    --fz-main-h1: clamp(2rem, 7vw, 6rem);
    --fz-main-h2: clamp(1rem, 3vw, 3rem);
    --fz-main-h3: clamp(0.8rem, 2vw, 2.5rem);
    --fz-main-secondary: clamp(2.5rem, 7vw, 7rem);
    --fz-main-p: clamp(0.8rem, 1.3vw, 1.5rem);
    --fz-main-text: clamp(0.7rem, 1vw, 1rem);
    --fz-main-large: clamp(1rem, 5vw, 5rem);
    --fz-main-small: clamp(0.6rem, 0.9vw, 1.3rem);
}

/* Utilities */
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}
  /* Hide scrollbar for IE, Edge and Firefox */
body {
    -ms-overflow-style: none; 
    scrollbar-width: none;  
    background-color: var(--clr-secondary-100);
}

.body-wrapper {
    overflow: hidden;
    z-index: 1;
}

.m-heading-2-dark {
    font-family: var(--ff-heading-primary-2-light);
    color: var(--clr-primary-dark);
    font-size: var(--fz-main-h2);
    letter-spacing: 0.8px;
}

.m-heading-3-dark {
    font-family: var(--ff-heading-primary-2);
    color: var(--clr-primary-dark);
    font-size: var(--fz-main-h3);
}

.m-heading-3-dark-2 {
    font-family: var(--ff-heading-primary-2-bold);
    color: var(--clr-primary-dark);
    font-size: var(--fz-main-h3);
}

.m-paragraph-text-dark {
    font-family: var(--ff-body-light);
    color: var(--clr-secondary-700);
    font-size: var(--fz-main-p);
}

.m-primary-btn-dark {
    transition: background-color 400ms ease-in-out, box-shadow 400ms ease-in-out;
    font-family: var(--ff-body-light);
    color: var(--clr-secondary-100);
    font-size: var(--fz-main-text);
    background-color: var(--clr-primary-dark);
    letter-spacing: 1px;
    padding: 0.8rem 1.5rem;
}

.m-primary-btn-dark:hover, .m-primary-btn-dark:active {
    border: none;
    outline: none;
    color: var(--clr-secondary-100);
    background-color: var(--clr-secondary-500);
}

.m-primary-link-dark {
    transition: background-color 400ms ease-in-out;
    font-family: var(--ff-body-regular);
    color: var(--clr-secondary-700);
    font-size: var(--fz-main-p);
    border: none;
    outline: none;
    text-decoration: none;
}

.m-primary-link-dark:hover, .m-primary-link-dark:active {
    color: var(--clr-secondary-500);
}

/* Animations */
@keyframes fade-in {
    100% {
        opacity: 1;
    }
}

@keyframes zoom-in {
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fade-up {
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes expand {
    100% {
        letter-spacing: 0.3vw;
    }
}