/*source for this shhet https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content */


html {
  /* px means "pixels". The base font size is now 18 pixels high */
  font-size: 18px;
  /* Replace PLACEHOLDER with the font-family property value you got from Google Fonts */
  font-family: "M PLUS 2", sans-serif;
  background-color: silver;
  color: green;
}

h1 {
  font-size: 70px;
  text-align: center;
}
 
  }
h2 {
  font-size: 40px;  
}

h3 {
  font-size: 25px;  
}

p {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
li {
  font-size: 20px;
  line-height: 2;
  letter-spacing: 1px;
  color: darkgreen;
}

/* https://blog.hubspot.com/website/css-sidebar */

body {
  max-width: 1000px;
  /*sets the bodies width*/
  margin: 0 auto;
  /*not sure abut this, 1st # is top & bottom, #2 auto splits the left/rigth space evenily
  see more:https://developer.mozilla.org/en-US/docs/Web/CSS/margin */
  background-color: white;
  padding: 0 20px 20px 20px;
  /*The values set top, right, bottom, and left padding, in that order, around the content- */
  border: 5px solid black;
}

header {
	background-color: black;
	}
nav {
	font-size: 16px;
 	text-align: left;
 	background-color: orange;
	}	
 	/*this is styling the section menus that the zim template creates*/
	
nav.mmenu {
 	text-align: center;
	}
/* I am styling the nav_dwd.js w/ this, as it is easier*/

	
	
  /*this rule sets the porition and styleof the mainpage title*/
h1 {
  margin: 0;
  /*the margin element stops browser putting a gap above teh h1*/
  padding: 20px 0;
 /* color: #00539f;*/
  text-shadow: 3px 3px 1px silver;  
  /*guide: 
    The first pixel value sets the horizontal offset of the shadow from the text: how far it moves across.
    The second pixel value sets the vertical offset of the shadow from the text: how far it moves down.
    The third pixel value sets the blur radius of the shadow. A larger value produces a more fuzzy-looking shadow.
    The fourth value sets the base color of the shadow.*/
}


/*this centres the image - an inline element - this is the base for all images*/
img {
  display: block;
  /*the above allows the imng element to act as a block element and thus accept margin values*/
  margin: 0 auto;
  	/*this centres the image, other wise it would go to left*/
  max-width: 100%;
  /*image does not go over widht value of body*/
  height: auto;
/*  height:300px*/
  padding: 20px 20px 20px 0;
  /*the above (padding) keeps the text away from the image*/
  /*   float: left; overrules the margin*/
  /*  the above (float) lets the writng to wrap around it - I can apply it direct in the html too*/
  /* read this https://www.freecodecamp.org/news/html-center-image-css-align-img-center-example/ */
  /*https://www.browserstack.com/guide/align-image-in-centre-in-html-css */
}

img.banner {
/* THIS IS FOR THE BANNER MANET_EDITDWD.html - w/out it keeps 2nd photo in same size, w/ it switchs to max of both images*/
        /*max-width: 100%;*/
        /*image does not go over widht value of body*/  
         height: auto; 
          width:auto;
        }

/*the below corresponds class="centre"*/
h2.centre {
	  text-align: center;
	  margin: 1px 0 1px 0;
	}

/* this corresponds to the image w/ class="eagle" in it. */
img.eagle {
	/* margin sets image to teh left - as I cant get inline to work*/
	margin: 0;
	/*I have commented the width & height out and used them in the HTML instead. 
	It keeps page layout constatn while allowing images to load see https://www.smashingmagazine.com/
	2020/03/setting-height-width-images-important-again/*/
	/*width: 200px;*/
	/*height: 200px;*/
	/* if i want a text wrap:*/
	float: left;
	padding: 20px 30px 20px 0;
       }
       
       
 /* The sidebar menu  https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp*/
   
  
  
footer {
	text-align: center;
	}