/* ------- Var ------- */
:root {
    --maxWidth: 1600px;
    --mainMargin: 2%;
    
    --section-img-max: 30rem;
    --section-colour: #f0f0f0;
    
    --heading-colour: /* Autumn */ #2f6628;
    --heading-colour: /* Spring */ #327829;
    --heading-colour: /*dodgerblue Winter*/ #0099ff; /* old dodger blue #469ddb */
    --heading-colour: /* Summer */ #5660bc;
    
    --heading-font: 'Montserrat', 'Segoe UI', sans-serif;
    --body-font: 'Roboto', 'Arial', sans-serif;
    --pFontSize: 0.9rem;
    scrollbar-width: none !important /* Hide scrollbar Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE and Edge */
.hide-scrollbar {
    overflow-y: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
/* WebKit */
.hide-scrollbar-webkit::-webkit-scrollbar { 
    width: 0;
    height: 0;
}

/* ------- Inital ------- */
html { 
    font-size: 100%; 
}

body {
    max-width: var(--maxWidth);
    background-color: white;
    /*background-image: url(https://static.vecteezy.com/system/resources/previews/000/115/493/large_2x/free-vector-colored-degraded-background.jpg);*/
    background-image: url(images/placeholderTall.jpg);
    /*background-image: url(https://i.imgur.com/lFWpjSX.png); /* Spring */
    /*background-image: url(https://i.imgur.com/G5DtlOX.png); /* Summer */
    /*background-image: url(https://i.imgur.com/09tRuIC.png); /* Late Summer */
    /*background-image: url(https://i.imgur.com/yfXrKDo.png); /* Autumn */
    /*background-image: url(https://i.imgur.com/7eh0OTB.jpg);  /* Winter */
    background-size: cover;

    margin: auto;
}

img { 
	width: 100%; 
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--heading-colour);
    
    font-family: var(--heading-font);
    font-weight: normal;
}

h1 {
    font-size: 2rem;
}

p {
    padding: 0 2% 0 0.5%;
    
    color: black;
    font-family: var(--body-font);
    font-size: var(--pFontSize);
}

.spacer {
    height: 1.5rem;
}

/* ------- Header ------- */
header {
	display: inline-block;
	width: 100%;
	min-height: 3rem;
	max-height: 10rem;
	
	margin: 0 0 -5px 0;
	
	background-image: url("images/placeholderWide.jpg");
	/*background-image: url("https://d33wubrfki0l68.cloudfront.net/de6a6bfcb79c8a65c4ec8556d930ca65050b6792/f046e/images/blog/templarbit-security-headers-de6a6bfc.jpg");*/
	/*background-image: url(https://i.imgur.com/WwNdwS6.png);  /* Spring */
	/*background-image: url(https://i.imgur.com/GsZppvi.png);    /* Summer*/
	/*background-image: url("https://i.imgur.com/MTXDvYz.png");/* Late Summer & Winter*/
	/*background-image: url(https://i.imgur.com/7WfbOxt.png);  /* Autumn */
	background-size: cover;
	
	text-align: center;
}

header h1 {
	/* top right bottom left*/
	margin: 1.25% 0 1.5% 1.25%;
	float: left;
	
	color: #0044ff;
	color: black;
	text-shadow: 0 0 10px white, 0 0 15px white, 0 0 20px white, 0 0 25px white;
	/*background-color: white;*/
	font-family: 'Montserrat', sans-serif;
	font-size: 3rem;
}

#topImgDiv {
    float: left; 
    width: 100%;
    text-align: center;
}

#btmImgDiv {
    float: left; 
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
}

@media only screen and (max-width: 600px) {
    header {
        background-size: auto;
    }
}

/* ------- Main ------- */
main {
	display: inline-block;
	width: auto;
	margin: var(--mainMargin);
}

@media only screen and (min-width: 1600px) {
    main {
    	margin: 1.5% 0 1.5% 0;
    }
}

.sectionHead {
    margin: 0; /*remove?*/
}

/* ------- Footer ------- */
footer {
	/*display: inline-block;*/
	width: auto;
	margin: 2rem 0 0 0;
	padding: 3% 1.7% 1% 1.7%;
	height: auto;
	
	background-color: grey; /* Fallback */
	background-color: rgba(150, 150, 150, 0.75);
	
	font-size: 1rem;
	text-decoration: none;
}

#footerLeft {
    float: left;
    width: 40%;
}

#footerRight {
    float: right;
    width: 40%;
    
    text-align: right;
}

#copyright {
    float: none;
    width: 100%;
    
    margin: 400px 0 0 0;
    
    text-align: center;
    font-style: italic;
}

footer h3 {
	margin: 0 0 5% 0;
	/*padding: 0% 0% 0% 1.5%;*/
	
	color: black;
	font-size: 1.5rem;
}

footer p {
	margin: 0.3% 0 0.3% 0;
	
	font-size: 1rem;
}

@media only screen and (max-width: 960px) {
    #copyright {
        margin: 20rem 0 0 0;
        
        float: none;
        text-align: center;
    }
    
    footer h3 {
    	margin: 0 0 12.5% 0;
    }
}

@media only screen and (max-width: 600px) {
    #copyright {
        margin: 15rem 0 0 0;
        
        float: none;
        text-align: center;
    }
    
    footer h3 {
    	margin: 0 0 10% 0;
    }
}