/* ================================================================================================================== */
/* FONTS */ 
/* ================================================================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* ================================================================================================================== */
/* INLINE VARS */ 
/* ================================================================================================================== */

:root {
    --clr-primary:           #e86e34; /*/ DARING ORANGE */
    --clr-primary-darker:    #a82e00;
    
    --clr-background:        #253e4e; 
    --clr-background-alt:    #feefe8;
    --clr-text:              #253e4e;
    
    --font-primary:         'Work Sans', Arial, sans-serif; 
    --font-secondary:       'Bricolage Grotesque', 'Work Sans', Arial, sans-serif; 
}

/* ================================================================================================================== */
/* CHANGE STANDARD SPLASH */ 
/* ================================================================================================================== */

body {
    background-color: #253e4e;
    background-image: url('splashbg-alt.jpg');
    background-position: right center;
    position: relative;
}

h1 { color: #e86e34; }

.logo-crossmark { max-width: 50%; }

.wrapper-inner {
    margin: calc(var(--main-margin) * 1.8);
}

@media (min-width: 600px) 
{
    .content {
        max-width: 600px;
        min-height: 100%;
    }
}

@media (min-width: 992px) 
{
    body {
        background-image: url('splashbg.jpg');
        background-position: right center;
    }
    
    .wrapper {
        
        justify-content: flex-start;
        max-width: 50%;
        align-items: stretch;
        flex-wrap: nowrap;
    }
    
    .wrapper-inner {
        margin: var(--main-margin);
        background-color: var(--clr-background-alt);
        border-radius: var(--main-border-radius);
    }
    
    .content {
        max-width: inherit;
    }
    
    .content-inner {
        padding: calc(var(--main-margin) * 1.3);
    }
}

@media (min-width: 1200px) 
{
    .wrapper {
        max-width: 40%;
    }
}

@media (min-width: 1600px) 
{
    .wrapper {
        max-width: 30%;
    }
}