/* Google CDN Font Import for Safari */
@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&family=Mea+Culpa&display=swap');

/* Local Font Declarations */
/*@font-face {
    font-family: 'Fleur De Leah';
    src: url('./fonts/FleurDeLeah-Regular.woff2') format('woff2'),
         url('./fonts/FleurDeLeah-Regular.woff') format('woff'),
         url('./fonts/FleurDeLeah-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*@font-face {
    font-family: 'Mea Culpa';
    src: url('./fonts/MeaCulpa-Regular.woff2') format('woff2'),
         url('./fonts/MeaCulpa-Regular.woff') format('woff'),
         url('./fonts/MeaCulpa-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/

/* Color Scheme Variables */
:root {
    /* Base body and container colors */
    --body-bg: #BF9445;
    --container-bg: #fff7e9;
    --text-color: #402401;
    --title-color: #3D5E5E;
    --choice-bg: #fff;;
    --choice-border: #D9CAC1;
    --choice-hover-bg: #f5f5f5;

    /* Interface colors (constant across themes) */
    --interface-text-color: #402401;
    --interface-bg: #fff7e9;
    --interface-border: #D9CAC1;

    /* Primary elements of color scheme */
    --color-light: #fff7e9; /* White or white-adjacent color, used in many places (container backgrounds, button outlines, light-on-dark text, etc*/
    --color-navbar: #593202; /* Navbar background and navbar buttons */
    --color-primary-accent: #3D5E5E; /* Primary accent color for titles, achievements, and body buttons */
    --rgba-primary-accent: rgba(69, 94, 94, 0.5); /* Primary accent color focus shadow */
    --color-secondary-accent: #58878C; /* Secondary accent color for button focus shadows and audio slider control */
    --color-secondary-accent-hover: #58878C; /* Variation on secondary accent color for primary button hover states and audio slider control hover */
    --rgba-secondary-accent: rgba(88, 135, 140, 0.5); /* Bright accent color button focus shadow */
    
    /* Bootstrap overrides for color scheme*/
    --bs-dark: #3D5E5E; /* Primary accent color for Bootstrap overrides */
    --bs-dark-rgb: 69, 94, 94; /* Primary accent color for Bootstrap overrides */
    --bs-primary: #58878C; /* Secondary accent color for Bootstrap overrides */
    --bs-primary-rgb: 88, 135, 140; /* Secondary accent color for Bootstrap overrides */

    /* Font families */
    --font-body: 'Georgia', serif;
    --font-title: 'Mea Culpa', cursive;
}

/* Theme (Default) */
.theme-default {
}

.back-to-story {
    background-color: var(--color-primary-accent);  
    color: var(--color-light);
}
.back-to-story:hover {
    background-color: var(--color-secondary-accent); 
}
.back-to-story.interface-text {
    color: var(--color-light); 
}
/* Loading Button Gradient */
.home-content #startGameButton.loading {
    background: linear-gradient(90deg, #58878C 0%, #3D5E5E 50%, #233b3b 100%);
}

/* Oak Corner Decorations */
.corner-decoration.top-left {
    top: 55px; /* Account for navbar */
    left: 0px;
    background: url('./images/colonnade.png') no-repeat;
}

/*.corner-decoration.top-right {
    top: 55px;
    right: 0px;
    background: url('./images/colonnade_right.png') no-repeat;
}*/

.corner-decoration {
    position: fixed;
    width: 100vw !important;
    height: 100vw !important;
    pointer-events: none;
    z-index: 0;
    background-size: contain !important;
}

/* Oak Horizontal Divider */
.hr-decoration {
    opacity: 0.33;
    height: 3.5rem;
    margin-bottom: 2rem;
    margin-top: 0.5rem;
    max-width: 100%;
}