/* CSS */

* {
    padding: 0;
    margin: 0;
    font-size: 100%;
    line-height: 1em;
  }

body
          {
          width: 75%;
          max-width: 650px;
          margin: 20px auto;
          font-size: 100%;
          font-family: 'Libre Baskerville', Georgia, Times, 'Times New Roman' serif;
          background-color:gainsboro;      
          line-height: 1.8em;}
section {padding: .2em 0}
              
    
/*------------------------- TYPOGRAPHY----------------- */
       
       h1, h2, h3
          {
          font-weight: normal;
          color: #000000;
          text-align: center;
          }

        p, li 
           { 
           line-height: 1.8em;
           margin-bottom: 2em;}
       
           h1 {font-size: 3.375em;
           line-height: 1.3em;
            padding: 0.8em;
           }
           h2 {font-size: 2.29em;
           font-style: italic;
           padding: 0.4em;
           margin: 0.2em;
           color:cadetblue;}
           h3 {font-size: 1.5em;}
p
{ line-height: 1.5em;
  padding: 0.6em;
  font-family: 'Libre Baskerville', Georgia, Times, 'Times New Roman' serif;
}

.intro
{font-family:'Libre Baskerville', Georgia, Times, 'Times New Roman' serif;
 font-size: 1.3em;
}


header h2 {
font-style: italic;
font-size: 1.5em;
margin: -0.5em 0 1.4em 0;
color:cadetblue;   
}

.quote
{border-left: 2px solid #333;
    padding-left: 2em}


.cite {
font-size: 0.8em;
margin-bottom: 1em;
padding-bottom: 3em;
}

blockquote {
padding-bottom: 1.6em}
 

.anchor
{text-transform: uppercase;
font-size: .65em;
padding-top: 2em;
margin-top: 1em;
}
/* -------------------------- links --------------------------------- */
a {
color: cadetblue;
text-decoration:none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

a:hover {
          color:blue;
          border-bottom: 1px dotted;
        }

/*--------------------- nav --------------------------------- */

nav 
{border-top: 1px solid #333;
border-bottom:1px solid #333;
padding: 0.8em 0;
margin-bottom: 0.8em;
}

nav ul 
{text-align: center;
}

nav ul li 
{display: inline;
margin: 20px;}

/*--------------------TABLE-------------------*/
table {
    margin:1.7em;
    width: 100%;
    display: table;
    border-collapse: collapse;
    border-spacing: 2px;
    border-color: gray;
    padding: 2em;
}

caption {
    color: cadetblue;
    margin-bottom: .75em;
    text-transform: uppercase;
    font-size: .9em;}

table.head, th {
    color: #fff;
    text-transform: uppercase;
    font-weight: normal;
    text-align: left;
    background: #333;}

th, td {
    padding: .6em;}

table, td {
   border: 1px solid #fff;
background:#f0f0f0;}

/*---------------------IMAGES----------------*/
img {
    display: block;
    margin: 1em auto; /* This sets the margin top and bottom to 0px. The auto on the left and right will automatically calculate the space either side and split it evenly between the two margins. */
    padding: 0;
    max-width: 100%; /* This means that the images will resize to fit the parent container instead of just rendering at its native width and overflowing its containing box. */
   /* border: #c06 5px solid; */
}




/*----------------- footer --------------------------- */

.bottomfooter
{border-top: 1px solid #333;
border-bottom: 1px solid #333;
padding: 2em;   
line-height: 1.2em;
font-size:.6em;}


/*-------------------my links -------------------- */
.mylinks
{
    font-size: .8em;
color: blue;}


/*------------------ TABLET ----------------------*/
/* @media (max-width: 50em) {
    
   body {
    background: aqua;  
    }
    
article {
    width: 95%;
    padding: 0.5em;
    } 
    
    img {
    display: block;
    margin: 1em auto;
    padding: 0;
    max-width: 100%;
}
} */

/*----------- SMARTPHONE ----------- */
 /*@media (max-width: 31em) {
    
   body {
    margin: auto 0;
    background: #BEE9C7;
    width: 100%;
    font-size: 110%;
    }
    
article {
    width: 90%;
    } 
h1 {font-size: 2.9em;}   
    
hgroup h2 {font-size: 1.5em;
padding-top: 0.5em}      
}
nav ul li {font-size: .75em;
        margin: 10px} */
  </style>