/* 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.6em;
    
}


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

header h1, h2,{
    position: absolute;
    width: 80%;
    left: 100px;
    top: 20px;
}

.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;
}

/*-------------------shadow---------------------------*/
hgroup h1
{text-shadow: 3px 2px 2px #5F9EA0, 1px 1px 3px #666;
}
/* -------------------------- links --------------------------------- */
a {
color: cadetblue;
text-decoration:none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

a:hover {
          color:blue;
          border-bottom: 1px dotted;
        }
.svglinks a {
  opacity: 0.3;
  transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.svglinks a:hover {
  opacity: 0.8;
}

.svglinks li {
  display: inline;
  margin: 5px;
  color: #444;
}

.svglinks li img {
  width: 50px;
    display: inline;
padding-left: 4em;
}

.svglinks a:hover {
        padding: 7px;
        /*background:;
        color: #fff;*/
        border-bottom: none;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out; 
		-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
        border-radius: 1em;}

/*--------------------- nav --------------------------------- */
nav
{position: fixed;
top: 0px;
    left: 0;
    margin: 0;
    width: 100%;
    background: #333;
        
}

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; */
}

.image1
{float: left;
    position:inherit;
    margin: 1em 1em 1em 0 ;
}
/*--------------------Positioning-----------------*/
/*.positioning
{position: relative;
    width: 80%;
    left: 100px;
}*/


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

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


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


/*------------------ 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>