/* Remember that the height and width properties 
do not include padding, borders, or margins! 
They set the height/width of the area inside the 
padding, border, and margin of the element! */
body {
	background-color: lightblue;
	font-family: Arial, Helvetica, sans-serif;
	/* here there are two font names added, plus a 
	font family just to be sure that at least one 
	of them will render on the website - I'm also 
	gonna add another font combo for paragraph 4 
	just as an example */
}

header {
  font-size: 35px;
  color: SlateBlue;
  margin: 50px;
}

h1 {
  margin: 50px;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

p {
  margin: 0 0 20px 50px; /* top right bottom left */
  color: white;
  width: 45%; /* width can also be in pixels */
  padding: 5px;
  box-sizing: border-box;
  outline-style: solid;
  outline-color: red; /* outlines don't add to the
  width and height of an element, they're just there
  to make the element stand out - though I feel you
  can just use a border?? */
  outline-width: 8px; /* also, outlines have the
  ability to overlap other elements and each other */
}

p.ex1 { /* says to just use ".ex1" because "p.ex1"
is overqualified */
  border: 40px solid DodgerBlue;
  outline-color: blue;
  outline-width: 8px;
  text-align: justify; /* it's hard to tell on the 
  first paragraph, but the text is justified */
  text-indent: 50px;
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; 
  /* Text-shadow with red and blue neon glow - The 
  text-shadow property also accepts multiple shadows 
  for an element. Define each shadow in a 
  comma-separated list. */
}

p.ex2 {
  border: 20px solid yellow;
  outline-color: green;
  outline-width: 4px;
  letter-spacing: 4px;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
  /* Text-shadow with black, blue and red neon glow: */
  font-family: Garamond, Georgia, serif;
}

p.ex3 {
  line-height: 70%;
}

p.ex3 {
  border-radius: 10px; /* border-radius makes the
  border or outline rounded*/
  text-align: left;
}

p.ex4 {outline: 5px ridge pink;}

p.ex4 {
  line-height: 1.8;
  font-family: "Lucida Console", "Courier New", monospace; 
  /* you put font names in quotes when they're more than 1 word */
}

p.ex5 {
  margin: 30px;
  padding: 5px;
  border: 1px solid black;
  outline: 3px solid red;
  outline-offset: 15px; /* This paragraph has a 
  black border and a red outline 15px outside the 
  border edge (the offset). the space in between 
  the black border and the red outline is 
  transparent */
  background: yellow;
  color: black;
  word-spacing: 15px; /* this is word spacing, 
  different from character spacing */
  line-height: 0.7;
  text-shadow: 0 0 3px #FF0000;
}

p.ex6 {
  margin: 30px;
  padding: 5px;
  border: 1px solid black;
  outline: 3px solid red;
  outline-offset: 15px; /* This paragraph has a 
  black border and a red outline 15px outside the 
  border edge (the offset). the space in between 
  the black border and the red outline is 
  transparent */
  background: yellow;
  color: black;
  word-spacing: -30px; /* this is word spacing, 
  different from character spacing */
}


div { /* div showing the CSS Box Model - content, 
padding, borders, and margins (content at the 
innermost, margins the outer-most) */
  background-color: lightgray;
  width: 300px; /* content */
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

footer {
  background-color: #62a5fc; /* blue */
  text-align: right;
  color: white;
}