/* html/body
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

html > body
{
    color: var(--black-norm);
    background: var(--icsf-blue-norm);
}










/* backgrounds
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body .background-wrapper
{
    position: fixed; top: 0; left: 0; height: 100vh;
    background: linear-gradient(to top right, var(--icsf-gold-norm), var(--icsf-gold-lite));
}





/* individual backgrounds
======================================================================================================================================================================================================== */

/* main container */
html > body .background-wrapper .background {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* bg 01 */
html > body .background-wrapper .background.bg-01
{
    background-image: url("../img/textures/repeating-dots-spaced-dark.svg"); background-repeat: repeat; background-position: center center; background-size: auto;
    opacity: 0.025;
}

/* bg 02 */
html > body .background-wrapper .background.bg-02
{
    background: radial-gradient(50vw 50vw at 50% 35%, var(--white-lite), rgba(255,255,255,0));
    opacity: 0.15;
}

/* bg 03 */
html > body .background-wrapper .background.bg-03
{
    background: linear-gradient(to bottom left, var(--icsf-gold-lite) 0%, var(--icsf-gold-norm) 45%, rgba(0,0,0,0) 65%, rgba(0,0,0,0) 100%);
    opacity: 0.75;
}










/* content wrapper
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body .content-wrapper {height: 100vh;}
html > body .content-wrapper .content
{
    transform: translate3d(0,-50%,0);
    position: absolute; top: 50%; left: 0;
}





/* title
======================================================================================================================================================================================================== */

/* main container */
html > body .content .title-wrapper
{
    text-align: center;
    color: rgba(255,255,255,0.75);
}

/* heading tags */
html > body .content .title-wrapper :is(h1)
{
    margin: 0 0 1em 0; padding: 0;
    text-transform: uppercase;
    font-weight: 600; font-size: 3em; line-height: 1em;
}

/* mobile settings */
@media only screen and (max-width: 480px)
{
    html > body .content .title-wrapper :is(h1) {font-size: 10vw;}
}





/* logo wrapper
======================================================================================================================================================================================================== */

/* main container */
html > body .content .logo-wrapper {text-align: center;}

/* svg */
html > body .content .logo-wrapper svg
{
    width: 30em;
    overflow: visible;
}

/* mobile settings */
@media only screen and (max-width: 768px)
{
    html > body .content .logo-wrapper svg {width: 80vw;}
}

/* all paths */
html > body .content .logo-wrapper svg path {stroke: none; stroke-width: 0; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 7.3;}

/* banner backgrounds */
html > body .content .logo-wrapper svg .banners .banner-backgrounds path {fill: var(--transparent);}

/* banner borders */
html > body .content .logo-wrapper svg .banners .banner-borders path {fill: var(--icsf-blue-norm);}

/* banner text */
html > body .content .logo-wrapper svg .banners .banner-text path {fill: var(--icsf-blue-lite);}

/* ic text */
html > body .content .logo-wrapper svg .text :is(.indy,.christian) path {fill: var(--icsf-blue-norm);}

/* sf text */
html > body .content .logo-wrapper svg .text :is(.sports,.fellowship) path {fill: var(--icsf-blue-lite);}

/* add drop shadow to banners */
html > body .content .logo-wrapper svg .banners :is(.banner-borders, .banner-text) path
{
    transform: translateZ(0);
    filter: drop-shadow(0 0.07em 0.04em rgba(0,0,0,0.25));
}