/* Do a mass of imports to keep our pages CSS more organized, but this acts as the central landing page to tweak all CSS. */
/* TODO: In a later launch, we can redo the Header partial and ONLY import the needed files to keep our payload lighter & more efficient. */
@import url(footer.css);
@import url(404.css);
@import url(account.css);
@import url(quoteItems.css); /* keep rules for exclusively quotes in here */
@import url(tripPages.css); /* main trip pages, not any of their children */
@import url(allQuotes.css); /* all quotes child of trip page */
@import url(mainPage.css); /* central landing page */
@import url(navElements.css); /* all "login" style buttons & return links */
@import url(dice.css); /* dice of fate page */
/* ================={ UNIVERSAL RULES }================= */

/* Keep things easier when using colors & fonts */
:root {
    --background: #0D0E1C;
    --secondaryBackground: #1A1B27;
    --secondaryText: #86868D;
    --trinaryText: #C2C3C6;
    --testimony: #181A35;
    --inder: "Inder", sans-serif;
    --inria: "Inria Sans", sans-serif;
}

/* General Stylings for all pages */
body {
    background-color: var(--background);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 1;
    min-height: 100vh;
}

/* ================={ META LAYOUT }================= */

/* Simple toggle approach to the desktop layout */
#desktopLayout {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* TODO: all of this is for 2.0 launch */
#mobileLayout {
    display: none;
}

/* ================={ UNIVERSAL OBJECTS }================= */

/* Image carousels are used in the main page & trip highlight pages */
/* These carousel lines constrain the images so that they don't aggressively "jump" when transitioning */
#dynamicCarousel {
    max-width: 40vw;
    margin-top: 3vh;
}

.carousel-inner img {
    width: 40vw !important;
    height: auto !important;
}

/* Pointer items are used in the main page & trip highlight pages */
/* For those extra links or text items w/ the pointer arm */
.pointerItem {
    display: flex;
    gap: 0.5vw;
}

.pointerItem > a {
    color: var(--trinaryText);
}

.pointerItem > a:hover {
    transform: scale(1.02);
}

/* Honored Mate icons used in Account & Trip Page */
.hmIcon {
    margin-bottom: 2.5px;
}