body {
  background-color:  #f8f8ff;
}

article {
  border-style:  solid;
  border-color:  #7f7f7f;
  border-width:  5px;
  box-shadow: 10px 10px 5px #888888;
  background-color:   #ffffff;
  font-variant:  small-caps;
  margin-left:  25%;
  margin-right:  25%;
  text-align:  center;
}

.circle {
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.circle img {
  border-radius: 50%;
  display: block;
  border:1px solid #fff;
}
.circle:after {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0) 40%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%);
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0; 
  width: 100%;
}

article h1 {
  background-color:  #f8f8ff;
  border-top-style:  solid;
  border-top-color:  #7f7f7f;
  border-top-width:  3px;
  border-bottom-style:  solid;
  border-bottom-color:  #7f7f7f;
  border-bottom-width:  3px;
  margin:  0px;
  padding:  0px;
}

article p {
  margin:  10px 0px;
  padding:  0px;
}

footer {
  background-color:   #DCDCDC;
  border-style:  solid;
  border-color:  #7f7f7f;
  border-width:  5px;
  box-shadow: 10px 10px 5px #888888;
  margin:  25px 25%;
  padding:  0px;
  text-align:  center;
}