*    {
padding:0;
margin:0;
}


@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body   {
background:#ddd;
font-size:100%;
font-family: 'MyWebFont', Fallback, sans-serif;
background-image:url(../images/moss.jpg);
}



div#wrapper   {
width:940px;
margin:20px auto;
background-color:rgba(255, 255, 255, .9);
padding:20px;
}

header   {
height:200px;
padding:15px 0 0 15px;
margin-bottom:80px;
}

nav    {
height:50px;
line-height:50px;
background:#008000;
}

nav li  {
float:left;
list-style-type:none;
width:20%;
text-align:center;
}

nav a  {
text-decoration:none;
color:black;
display:block;
}

nav a:hover   {
background:#000;
color:#fff;
}

.circular--square {
  border-radius: 50%;
}



.img-with-text img {
    display: block;
    margin: 0 auto;
}

img.center   {
margin:0 auto;
}

.img-circle {
    border-radius: 50%;
}

img.right    {
float:right;
margin:30px;
padding-left:3px;
}

img.left    {
float:left;
margin-right:30px;
padding-right:3px;
}

footer  {
height:50px;
line-height:50px;
background:#ccc;
}

footer li   {
float:left;
list-style-type:none;
margin:0 30px 0 10px;
color:red;
}

footer a  {
color:red;
}


h1  {
font-family:Vivaldi, cursive; 
font-size:3.2em;
margin-bottom:10px;
}


h2    {
font-size:1.5em;
margin-bottom:6px;
}


h3   {
font-size:2em;
margin-bottom:6px;
}

p  {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
margin-bottom:1.5em;
line-height:1.4;
}

p.one   {
overflow: hidden;}

p.two   {
overflow: scroll;}

p.three  {
text-align:center;
}