/*
    Theme Name: KitzLights - Christmas v2
    Theme URI: 
    Author: James Kitzhaber
    Author URI: 
    Description: Theme built for the Kitzhaber Family Light Show Xmas Version
    Version: 1.1-Xmas
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: CSS Grid, Flexbox ready, moblie first
    Text Domain: jtkitz
*/
:root{
    /* Fonts */
    --global--mainFont: 'Roboto Slab', serif;

    --global--secondaryFont: 'Libre Franklin', sans-serif;

    --global--textFont: 'Open Sans', sans-serif;

    /* New Colors */
    --global--color-banner: #165b33;
    --global--color-banner-highlight: #146b3a;
    --global--color-background-main: #ea4630;
    --global--color-background-highlight: #bb2528;
    --global--color-splash: #f8b229;


	/* Colors */
	--global--color-black: #000;
	--global--color-dark-gray: #2a303a;
	--global--color-gray: #5c687a;
	--global--color-blue-gray: #7e7c91;
	--global--color-light-gray: #9c9c9e;
	--global--color-green: #00ff00;
	--global--color-blue: #0000ff;
	--global--color-purple: #ff00ff;
	--global--color-red: #ff0000;
	--global--color-orange: #ff7700;
    --global--color-tag-backdrop: #7bd6e2;
	--global--color-yellow: #ffc400;
	--global--color-white: #fff;
	--global--color-white-50: rgba(255, 255, 255, 0.5);
	--global--color-white-90: rgba(255, 255, 255, 0.9);
	
    --global--color-primary: rgb(0, 119, 20);
    --global--color-accent: rgb(5, 46, 0);
    --global--color-backdrop: rgb(146, 0, 0);
    --global--color-headers: rgb(255, 255, 255);
    --global--color-bodyText: rgb(255, 255, 255);

	/* Body text color, site title, footer text color. */
	--global--color-secondary: var(--global--color-banner);

	/* Headings */
	--global--color-primary-hover: var(--global--color-primary);
	--global--color-background: var(--global--color-background-main);

	/* Gray, default body background */
    --global--color-border: var(--global--color-primary);

    /* Sizes */
    --global--logo-height: 10rem;
    --global--logo-half-height: calc(var(--global--logo-height) / 2);
    --global--menu-horizontal-padding: 3rem;
    --global--menu-vertical-buffer: .5rem;
    --global--menu-full-menu-item-width: 15rem;
    --global--menu-font-size: 2.5rem;
    --global--footer-height: 6rem;

    --global--main-side-margin: 10%;
    
} /* End of :root */

html{
    font-size: 62.5%; /* sets 10px = 1rem */  
    position: relative;
    min-height: 100%;
}

body{
    font-family: var(--global--secondaryFont);
    font-size: 1.6rem;
    line-height: 2;
    background-color: var(--global--color-background);
    margin-bottom: calc(var(--global--footer-height) * 3);
    color: var(--global--color-bodyText);
}
@media screen and (max-width: 991.9px){
    body{
        font-family: var(--global--secondaryFont);
        font-size: 1.6rem;
        line-height: 2;
        background-color: var(--global--color-background);
        margin-bottom: calc(calc(var(--global--footer-height)/2) + 1.5rem);
    }
}

/* Headings */
h1, h2, h3{
    font-family: var(--global--mainFont);
    margin: .5rem;
    line-height: 1.2;
}
h1{
    font-size: 6rem;
}
h2{
    font-size: 4.5rem;
}
h3{
    font-size: 3rem;
}

p{
    font-family: var(--global--textFont);
}

main{
    padding-top: calc(var(--global--logo-height) + 2rem);
    margin-left: var(--global--main-side-margin);
    margin-right: var(--global--main-side-margin);
}
@media screen and (max-width: 991.9px){
    main{
        padding-top: calc(var(--global--logo-half-height) + 1rem);
    }
}

.title-text{
    margin-bottom: 3rem;
}

/* Navigation */
.navbar{
    background-color: var(--global--color-secondary);
    padding-top: 0rem;
    padding-bottom: 0rem;
    margin: 0rem;
    border-bottom: .5rem solid var(--global--color-background-highlight) ;
}
.navbar div.container-fluid{
    padding-right: 0rem;
}

.navbar-brand{
    padding-top: 0rem;
    padding-bottom: 0rem;
    margin: 0rem;
    align-content: center;
}
.navbar-brand h2{
    color: var(--global--color-headers);
}
@media screen and (max-width: 1199.9px){
    .navbar-brand h2{
        font-size: 2rem;
    }
}
.navbar-brand img{
    max-height: var(--global--logo-height);
    margin: var(--global--menu-vertical-buffer);
    filter: drop-shadow(0 0 .5rem var(--global--color-blue-gray));
}
@media screen and (max-width: 991.9px){
    .navbar-brand img{
        max-height: var(--global--logo-half-height);
    }
}

.vertical-spacer{
    margin-bottom: 3rem;
}

.menu-item{
    margin: 0rem;
    font-size: var(--global--menu-font-size);
    min-width: var(--global--menu-full-menu-item-width);
    height: calc(var(--global--logo-height) + (calc(var(--global--menu-vertical-buffer) * 2)));
    display: table;
    text-align: center;
    vertical-align: middle;
}
.menu-item a {
    font-family: var(--global--mainFont);
    color: var(--global--color-headers);
    text-decoration: none;
    vertical-align: middle;
    display: table-cell;
}
.menu-item a:visited{    
    color: var(--global--color-headers);
}
.menu-item a:hover{
    background-color: var(--global--color-headers);
    color: var(--global--color-accent);
}

.navbar-toggler{
    margin-right: 3rem;
}

@media screen and (max-width: 991.9px){
    .menu-item{
        margin: 0rem;
        padding: 0rem;
        font-size: var(--global--menu-font-size);
        min-width: var(--global--menu-full-menu-item-width);
        height: var(--global--logo-half-height);
        width: 100%;
        display: table;
        text-align: right;
        vertical-align: middle;
    }
    .menu-item a {
        font-family: var(--global--mainFont);
        color: var(--global--color-headers);
        text-decoration: none;
        vertical-align: middle;
        display: table-cell;
        padding-right: calc(var(--global--menu-vertical-buffer)*6);
    }
    .navbar div.container-fluid{
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: var(--global--footer-height);
    line-height: var(--global--footer-height); 
    background-color: var(--global--color-banner);
    color: var(--global--color-headers);
    font-family: var(--global--mainFont);
    font-size: 2rem;
    display: table

}
@media screen and (max-width: 991.9px){
    .footer {
        height: calc(var(--global--footer-height)/2);
        line-height:  calc(var(--global--footer-height)/2); 
        background-color: var(--global--color-banner);
        color: var(--global--color-headers);
        font-family: var(--global--mainFont);
        font-size: 1.2rem;
        display: table
    
    }
}


.footer .container{
    display: table-cell;
    text-align: right;
}
.footer div p{
    padding: 0rem;
    padding-right: 2.5rem;
    margin: 0rem;
}

/* Card */
.card{
    margin-bottom: 1.5rem;
    background-color: var(--global--color-accent);
    border: .8rem solid var(--global--color-black);
}
.card-img-top{
    width: 100%;
    height: 100%;
}
.card-margins{
    margin: auto;
}
.card-top{
    position: relative;
}
.card-tags{
    position: absolute;
    bottom: 0;
    right: .5rem;
    padding: 0 .8rem;
    border-radius: .5rem;
    background-color: var(--global--color-tag-backdrop);
    color: var(--global--color-accent);
}
.card-anchor{
    text-decoration: none;
    color: var(--global--color-blue-gray);
}
.card-anchor:visited{
    text-decoration: none;
    color: var(--global--color-blue-gray);
}
.card-anchor:hover {
    text-decoration: none;
    color: var(--global--color-accent);
}
.card-anchor:hover .card-body{
    background-color: var(--global--color-blue-gray);
}
.card-body{
    text-align: center;
    min-height: 13rem;
    position: relative;
}
.card-body h3{
    font-size: 1.8rem;
}
.card-mod{
    position: absolute;
    bottom: 0;
    right: 0;
    padding-right: .5rem;
}

.error-404-main{
    text-align: center;
    margin: auto;
}
.error-404-h1{
    font-size: 15rem;
}

/* Buttons */
.big-button{
    text-decoration: none;
    font-size: 2.5rem;
    font-family: var(--global--mainFont);
    color: var(--global--color-headers);
    border: solid .5rem var(--global--color-banner-highlight);
    padding: 2rem;
    border-radius: 1rem;
    background-color: var(--global--color-secondary);
    box-shadow: 0rem .3rem 0rem 0rem var(--global--color-secondary);
    max-width: 90%;
}
.big-button:hover{
    text-decoration: none;
    color: var(--global--color-secondary);
    border: solid .5rem var(--global--color-border);
    padding: 2rem;
    border-radius: 1rem;
    background-color: var(--global--color-headers);
    box-shadow: 0rem .3rem 0rem 0rem var(--global--color-secondary);
}
.big-button:active{
    text-decoration: none;
    font-family: var(--global--mainFont);
    color: var(--global--color-secondary);
    border: solid .5rem var(--global--color-border);
    padding: 2rem;
    border-radius: 1rem;
    background-color: var(--global--color-headers);
    box-shadow: none;
}
.big-button-holder{
    margin-top: 4rem;
    margin-bottom: 6rem;
}

.small-button{
    text-decoration: none;
    font-family: var(--global--textFont);
    color: var(--global--color-headers);
    padding: .3rem;
    border-radius: .5rem;
    background-color: var(--global--color-secondary);
}
.small-button:hover{
    text-decoration: none;
    color: var(--global--color-secondary);
    background-color: var(--global--color-headers);
}
.small-button:active{
    text-decoration: none;
    color: var(--global--color-secondary);
    background-color: var(--global--color-headers);
}

.announce{
    color: var(--global--color-bodyText);
    background-color: var(--global--color-banner);
    border-radius: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.ImageScaling{
    width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
}
@media screen and (max-width: 991.9px){
    .ImageScaling {
        width: 90%;
        height: auto;
        margin-left: 5%;
        margin-right: 5%;
    }
}