body {
    background-color: #ffffff;
    color: #006;
    
    font-family: "Comic Sans", Arial, sans-serif;
    margin-left: 10%;
    margin-right: 10%;
}
  
  main {
    clear: left;
}
  
  h1, h2, h3, h4, h5, h6 {
      font-family: Didot, "American Typewriter", serif;
  }
  
    /* 
    *This is a comment*
    
    Computer monitors use 3 primary colors: Red, Green and Blue. RGB 
    One way that computers count is by counting to 16
    The digits are 0,1,2...,9, a, b, c,
    In CSS, on emain way is to use Three Pairs of Hexadecimal numbers, one pair each for RGB
    Pure White is #ffffff; RG and B are all 100%
    Pure Black is #000000; RG and B are all 0
    Pure Red is #ff0000; R is 100%, G and B are at 0
    Pure Green is #00ff00; RB off and G 100%
    Pure Blue is #0000ff; RG is off and B is 100%
    */
  
  
  /*Instead of making a rule for all <tds>, or all of anythingm in CSS we can invent any number of 'classes' that we need.
  To do this, we out a dot . in front of our new class name.*/
  
.clientmainshade{ 
  background-color: #D1D6D8;}
.clientdarkshade{
  background-color:#84A0AA;}
.clientlightshade{
  background-color: #A5B9C0;}
.clientaccentone{
  background-color: #858E92;}
.clientaccenttwo{
  background-color: #65D3E3;}
  
.demo-font-serif{
  font-family: Garamond, Georgia, serif;}
.demo-font-sans-serif {
  font-family: Verdana, sans-serif;}
.demo-font-monospace {
  font-family: "Courier New", monospace;}
.demo-font-cursive {
  font-family: "Comic Sans", cursive;}
.demo-font-fantasy {
  font-family: "Papyrus", Impact, "Copperplate";}
  
 /* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
  
}
  
  /* Navigation Menu Styles */
  
  nav {
    padding-bottom:0.5em;
  }
  
  nav ul { 
    list-style-type: none;
  }
  
  /* This removes the bullet points from the <ul> that is part of the <nav>*/
  
  
  nav ul li {
    float: left; 
    margin-right: 0.5em;
  }
  /* "float: left;" made the vertical <ul> into a string of things horizontally arranged. "margin-right: 0.5em" pur space between the words. */
  
  body {
  background-image: url(https://carolinekerr.neocities.org/images/Unknown-1.jpeg);
  background-image: url(https://carolinekerr.neocities.org/images/1024px-Tennessee_Volunteers_logo.svg.png);
}
  
  nav ul li a {
  padding: 0.25em 1em;
  text-decoration: none; /* no underline */
  background-color: #EBF5FF; /* pale bluish white */
  color: #4312AE; /* dark blue */
  border: 2px solid black;
  border-top-left-radius: 1em 1em; /* rounded corner! */
  border-top-right-radius: 1em 1em; /* another rounded corner! */
}
  
  nav ul li a:hover, nav ul li a:focus {
    color: #23F45E; /* black (for now) */
    background-color: #121212; /*white (for now) */
    font-weight: bold;
  }