/*
 CSS for Great Stewards of Hope
 Mark Rogers 2025

 Colours 
 Bluegreen: #39bbb4
 Blue: #319ad9
 Brick: #eb7260
 Green: #20661e was #368032
 Mushroom: #ede7e0
 Background: #fffaee

 Image standards
 Images can be 1x, 2x or 4x
 We will use 4x webp compressed at 80% which should look OK on desktop & mobile and be reasonably fast

 Banners: 1200 x 450 (2400 x 1000)
 Top of screen: 450 x 500 (about)
 Article headers: 360 x 240 (720 x 480) now 360 x 270 (720 x 540)


*/

/* Fonts */


/* Overall styles */
html 				{ overflow-y: scroll;  background-color: #f0fdfd;}
body 				{ background-color: white; border: solid 1px #f0f0f0; max-width: 1200px; margin: 0 auto; clear: both; padding: 0; font: 400 16px 'Raleway', sans-serif;
					  letter-spacing: 0.018em; line-height: 23px;}

/* Banner */

#banner 			{ position: relative; height: 0; overflow: hidden; padding-bottom: 40%}
#banner img			{ width: 100%; height: auto; }
p.overlay 			{ font: italic 400 16px serif; color: white; position: absolute; bottom: 0; right: 0; padding: 2px 13px;
					 background-color: rgba(100, 0, 0, .5); box-shadow: 0px 0px 7px #000000; border-radius: 4px; z-index:11; }

/* Header & Navigation */

header, nav 		{ margin: 0; padding: 0; border: none; overflow: hidden; }
article 			{ padding: 0 10px; }
.center 			{ display: block; margin-left: auto !important; margin-right: auto !important; }
.textcenter 		{ text-align: center; }
.left 				{ text-align: left; }
.right 				{ text-align: right; }
.border 			{ border: 1px solid gainsboro; box-shadow: 3px 3px 4px 0 rgba(50, 50, 50, 0.26); border-radius: 5px; }
.width250 			{ width: 250px; padding: 5px; }
.flex 				{ display: flex; flex-flow: row wrap;}
.spaceAround		{ justify-content: space-around; }

/* Standard stuff */

h1 					{ font: 400 40px serif;  color: #20661e;  margin: 40px 0 0 0; }
h2 					{  font: 400 34px serif; color: #20661e; margin: 40px 0 15px 0;}
h3 					{ font: 400 30px serif; color: #3a8038; margin: 20px 0 20px 0;}
a, a:visited 		{ color: #20661e;}
em 					{ font-weight: 600; font-style: normal; color: #eb7260;}
img 				{ display: block; margin: 0; padding: 0; border: none; box-sizing: border-box; }
.buttongap 			{ height: 48px;}