html, body {
 margin: 0;
 padding: 0;
 }

 body{ 
background-color: rgb(165, 162, 162);
margin:40px auto;
max-width:650px;
line-height:1.6;
font-size:14px;
padding:0 10px
}


h1 {
 font-size: 200%; 
 color: rgb(196, 97, 5); 
 text-align: center;
 }
h2 {
 font-size: 150%; 
 color: rgb(196, 97, 5); 
 text-align: center;
 }

  h3,h4 {
 font-size: 100%; 
 color: black; 
 text-align: center;
 }

 p{
color: black;
}

ul{
 list-style-type: square; 
 }


a:link {
 color: blue;
 text-decoration: underline;
 }
a:visited {
 color: rgb(70, 18, 129);
 }
a:hover {
 color: red;
 text-decoration: none;
}
a:active, a:focus {
 color: red;
}


.button {
         background-color:  rgb(68, 122, 202);
         border: none;
         color: white;
         padding: 10px 24px;
         text-align: center;
         text-decoration: none;
         float: right;
         display: inline-block;
         font-size: 12px;
         margin: 4px 2px;
         cursor: pointer;
         }
         
.hero-octicon {
    width: 100px;
    background-image: url('https://icon-library.net//images/validation-icon/validation-icon-10.jpg');
     background-size: cover;
    height: 100px;
    border-radius: 50px;
    text-align: center;
    border: solid 1px #e5e5e5;
    margin: 0 auto 15px;
    display: block;
    transition: all 0.2s ease-in-out 0s;
}