/*==================================================
MASTER STYLESHEET
Awaken Your Inner Compass
==================================================*/


/* =================================================
   BASE
================================================= */

@import url("base/reset.css");
@import url("base/variables.css");
@import url("base/typography.css");
@import url("base/utilities.css");


/* =================================================
   LAYOUT
================================================= */

@import url("layout/header.css");
@import url("layout/footer.css");


/* =================================================
   GLOBAL COMPONENTS
================================================= */

@import url("components/buttons.css");
@import url("components/explore.css");
@import url("components/gallery.css");
@import url("components/library.css");
@import url("components/newsletter.css");
@import url("components/quote.css");
@import url("components/course.css");
@import url("components/mobile-menu.css");
@import url("components/search.css");


/* =================================================
   GLOBAL
================================================= */

@import url("animations.css");
@import url("responsive.css");


/*==================================================
    FALLBACK TEMPLATE
==================================================*/

.fallback-page {
    padding:
        9rem 0
        6rem;

    background:
        #faf8f4;
}


.fallback-content,
.fallback-empty {
    max-width: 820px;

    margin:
        0 auto;
}


.fallback-header {
    margin-bottom:
        2.5rem;
}


.fallback-header h1,
.fallback-empty h1 {
    margin:
        0.5rem 0
        1.5rem;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(2.7rem, 6vw, 4.8rem);

    line-height: 1.05;

    color:
        var(--green);
}


.fallback-entry {
    font-size:
        1.05rem;

    line-height:
        1.85;

    color:
        rgba(47, 79, 70, 0.82);
}


.fallback-entry p {
    margin-bottom:
        1.4rem;
}


.fallback-image {
    margin-bottom:
        2.5rem;
}


.fallback-image img {
    display: block;

    width: 100%;
    height: auto;

    border-radius:
        18px;
}


.fallback-empty {
    text-align:
        center;

    padding:
        5rem 0;
}


.fallback-empty p {
    margin-bottom:
        2rem;

    color:
        rgba(47, 79, 70, 0.72);
}