body{
	margin: 0;
	text-align: center;
  font-family: arial,sans-serif;

}

* {
  box-sizing: border-box;
}
  header{
	 background:#3155A0;
   margin: 0;
   color: white;

   }

   h1{
    margin: 0;
    font-size: 30px;
   }
   h2, h3{
    font-size:20px 
   }

  p{
    font-size: 17px;
    line-height: 1.6;
  }
  nav{
   	background:#353535;

   }

   nav a {
   	display: inline-block;
   	text-decoration: none;
    text-align: center;
   	color: white;
   	padding: 10px 15px;
   	font-size: 18px;
   }

   nav a:hover {
    background: #3862bb;
    } 

   main{
    width:75%;
    background: white;
   	text-align: left;
   
    float:left;
    padding: 15px;
    padding-left: 80px;
    
    

    
   }

   aside{
    text-align: left;
   	width: 25%;
    float:left;
    display: block;
    margin-top: 10px;
    padding: 15px;
    padding-right: 80px;
    }

   footer{
   
    bottom: 0;
    width: 100%;
   	background: #353535;
    text-align:center;
    margin-top:7px;
    display: block;
    float: left;
    padding: 10px 0 25px;
    }

   p.footlinks a {
    display: inline-block;
    text-decoration: none;
    padding: 15px;
    color: white;
    margin: 0 5px;
    font-size: 18px;
   }

  p.footlinks a:hover {
    background: #000000;
    
   }

  strong{
    text-align: center;

    }

   .lennyface{
    text-align: center;
    position: relative;
    display: inline-block;
    font-weight: bold;
    margin: 2px;
    margin-bottom: 6px;
    background: #bdbab921;
    cursor: pointer;
    justify-content: center;
    font-size: 17px;
    padding:0px 15px;
    vertical-align: top;
    white-space: nowrap;
    border: 1px solid #008CBA;
   }



   .facelink {
    text-align: center;
    margin-top: 10px;
    background: white;
   
   }


   .facelink a {
    background: #fff;
    display: inline-block;
    margin: 4px;
    text-transform: uppercase;
    border-radius: 5px;
    font-size: 15px;
    color: #074ba0;
    cursor: pointer;
    justify-content: center;
    padding: 8px 10px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #074ba0;
    
   }




 .lennyface:hover {
    background: #deded7;
  }

.facelink a:hover {
    background: #deded7;
  }

   

 .copied {
    color: #fff;
    font-size: 10px;
    position: absolute;
    padding: 5px 10px;
    background: #00ab4c;
    border-radius: 3px;
    z-index: 9999;
}
  .photo{
    text-align: center;
  
    

    }

   img{
   width: 70%;
   height: auto;
   }
   ul.link{
    line-height: 1.6;
  }
    a{text-decoration: none;
      font-size: 17px;
      padding:5px;


      

    }
    .site-title a {
       padding-top: 10px;
       font-size: 32px;
       font-weight: 600;
       text-align: center;
       display: block;
       line-height: 1.5;
       color:white;
       margin: 0;
       }
  p.description {
  color: #FFFFFF;
  margin-top: 0;
  margin-bottom: 3px;
  font-size: 15px;
  padding: 10px;
   }
  p.site-title {
   margin: 0;
   }

 
   @media only screen and (max-width:620px) {
  /* For mobile phones: */
  main, img,aside,iframe{
    width:100%;
  }
}
  /* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  img,iframe{
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
@media screen and (max-width: 800px) {
  main,aside{
    padding: 15px;
  } 
  }