/* The html tag defines things for the entire page,
 * so that's where you want things like the background 
 * color */
html {background-color: mistyrose;background-image: url(clouds.jpg);background-repeat: repeat;}



/* When you create a custom css selector, in this case "top"
 * you put a period before to denote it as a class
 * that the html can reference. In this, we set everything
 * to center align, define the text color and shadow 
 * as well the size of the font.
 * 
 * By default, setting something something to Margin:auto; will center it on the page! */

.top {margin:auto;
text-align: center;
color:midnightblue;
text-shadow: 2px 2px aqua;
font-size: 4em}

/* Below you will see a way of modifying a selector
 * so that when the mouse hovers over it the color of 
 * the text shadow changes from aqua to yellow */

.top:hover {text-shadow: 2px 2px yellow}

.subtop {margin:auto;
text-align: center;
color:deeppink}

/* When centering images, it's helpful to distinguish how it should be displayed,
 * and then denote both sides of the image margins.
 * 
 * Also, using width: and a % will help the content resize for different screens
 * or changing windows. It's important to think about how probably no one else
 * will be accessing your website in the exact same way you are !

*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.center2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

/*<p> and <a> tags are standard in html and have built in CSS, so when editing
 * them we don't need to add a . beforehand. 
 * */

p {margin:auto;
text-align: center;}

a {
  text-align: center;
  color:hotpink;
}

a:hover {color:red}

.text {
  text-align: center;
  margin: auto;
  width:70%;
  border: 2px dashed rebeccapurple;
  background-color: antiquewhite;
}