body
{
    background-color: rgb(200,100,100);
    background-position: center; 
    font-size: 125%;
    font: 1.2rem "Fira Sans", sans-serif;
    margin-left: 70px;  /* margin adds space outside the element */
    margin-right: 70px;
    margin-bottom: 35px;
    margin-top: 35px;
}

header  /* Content sectioning element, for introductory info, usually at top */
{
    background-image: url("../images/logopic.png");
    background-size: 100% auto;
    background-position: center; 
    text-align: center;
    border-radius: 12px;  /* adds rounded corners */
}

nav  /* Content sectioning element, for navigation */
{
    padding-top: 3px;
    padding-bottom: 6px;
    background-color: black;
}

main  /* Content sectioning element, for the main body of content */
{
    background-color: yellow;
    /*background-color: #F9E900;*/
    padding-top: 8px;
    padding-bottom: 24px;
    
    border-left: 40px solid pink ;
    border-right: 40px solid pink ;
    
    padding-left: 26px;
    padding-right: 26px;
}

footer  /* Content sectioning element, for the end of the page */
{
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 25px;
    background-color:  	rgb(229, 113, 235);
	
    text-align: right;
    border-radius: 0px 0px 12px 12px;
}

figure  /* Content sectioning element */
{
    margin-left: 0px;
    font-style: italic;
}

h1  /* Large text */
{
    font-family: inherit;
    font-size: 500%;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 20px;  /* padding adds space inside the element */
    padding-bottom: 20px;
    text-shadow: -1px 0px 0 #000, 10px 10px 0 #000,
                 -1px  0px 0 #000, 10px  10px 0 #000; 
    /* a way of outling text without using text-shadow
    -webkit-text-stroke: 2px green;
    */
}

a  /* hyperlink */
{
    text-decoration: none;  /* removes underline from hyperlinks */
}

h1 a
{
    color: rgb(100,150,50);
}

.flex-container  /* CSS .class Selector */
{
    padding: 0;
    margin: 0;
    display: flex;                  /* makes this container a flex box, to adjust layout of elements, default is by row */
    justify-content: space-around;  /* puts equals space between each element */
    flex-flow: row wrap;            /* on narrow screens elements will start a new row */
}

ul  /* unordered list */
{ 
  list-style-type: none;  /* this removes the bullet point from list items */            
}

li  /* list item */
{ 
    padding-left: 5px;
    padding-right: 5px;
}

li a
{
    color: white;
    font-size: 150%;
    padding-left: 5px;
    padding-right: 5px;
}

li a:hover
{
    color: yellow;
}

a:hover
{
    color: red;
}

#currentPage  /* id selector */
{
    color: red;
}

#firstLetter
{
    font-weight: bold;
    font-size: 300%;
    float: left;
    margin-top: -7px;
    margin-bottom: -28px;
    margin-left: -3px;
}

main a
{
    color:purple;
}

h2
{
    margin-top: 12px;
    margin-bottom: 3px;
}

table 
{
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th 
{
  border: 1px solid #08415C;
  padding: 8px;
}

tr
{
   background-color: #f2f2f2;
}

tr:hover 
{
   background-color: #ddd;
}

th 
{
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #08415C;
  color: white;
}