/* To set up a new section of CSS, you put whatever section of the HTML you want to edit the appearance of, and then { and }*/
/* For example, if I want to edit the appearance of the whole page (the background, the default text color, the width of the page), I would write body{} */
/* Inside the {}, you write down what you want changed (for example, font-family:) and how you want it changed (for example, font-family:Verdana;) */
/* After you say what you want changed, you always end it with a ; */

/*this loads the fonts we're gonna use, and gives them names we can reference later*/
@font-face {
  font-family: strippindirty;
  src: url(fonts/strippin_dirty.ttf);
}

@font-face {
  font-family: altehaas;
  src: url(fonts/AlteHaasGroteskBold.ttf);
}

@font-face {
  font-family: dotimpact;
  src: url(fonts/dotimpact.ttf);
}

@font-face {
  font-family: frizzledham;
  src: url(fonts/frizzed.ttf);
}

/* Edit the width of the page, the basic font, the basic font color, and the background here */
body {
  background: /*this is the color the page will be if the background image doesn't load*/lightblue /*this is the background image you want*/url("images/clover.jpg") /*this is how and if the image repeats*/repeat center fixed; 
  color: black;
  font-family: altehaas;
  width:100%;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

/*this edits the appearance of all headers*/
h1{
 margin:0px;
}

/*this edits the appearance of the specific header that we named sitetitle in the html.*/
/*this is useful in case you add other headers later and you want different headers to look different!*/
#sitetitle{
  /*editing the text appearance*/
 font-family:strippindirty; 
 font-size:80px;
 color:white;
 text-align:center;
 /*editing the "box" that the text is in*/
 width:100%;
 max-width:1000px;
 margin-left:auto; /*this centers the box on the page*/
 margin-right:auto; /*this centers the box on the page*/
 margin-bottom:0px;
 margin-top:30px;
 padding-bottom:0px; /* note from Shadow: 1````````````````````````````````````````````````````````````````````` */
}

/*this edits the box the links are in!*/
#nav{
  width:800px;
  margin-right:auto;
  margin-left:auto;
  text-align:center;
  padding:0px;
}

/*this edits the list of links as a whole*/
#nav ul{
  list-style-type:none;
  width:700px;
  margin-top:0px;
  margin-right:auto;
  margin-left:auto;
  padding:0px;
}

/*this edits the individual links*/
#nav li{
  width:500px;
  text-align:center;
  margin-right:auto;
  margin-left:auto;
  margin-bottom:10px;
}

/*this edits the individual links even more specifically*/
#nav a{
  font-family:frizzledham;
  color:white;
  font-size:40px;
  text-decoration:none;
}

#nav a:hover{
  font-family:frizzledham;
  color:white;
  font-size:40px;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

footer{
 width:100%;
 max-width:1000px;
 text-align:center;
 color:white;
 font-family:altehaas;
 font-size:12px;
 margin-left:auto;
 margin-right:auto;
 position:absolute;
 bottom:0;
}

footer a{
 width:100%;
 max-width:200px;
 margin-left:auto;
 margin-right:auto;
 text-align:center;
}

footer a{
 color:white; 
 width:100%;
 max-width:150px;
 margin-left:auto;
 margin-right:auto;
 text-align:center;
}