body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;


 background-color:#f7f6f2
     }
     #header{
       text-align:center;
         color:#8699b7;
  font-family: Times, Verdana, serif;
       
}

figure {
    max-width:100%;
    max-height:100%;
    align-items:center;
    justify-content:center;
}

img {
    max-width: 90%;
    max-height: 90%
}

a  {
    text-decoration:none;
    color:inherit;
}

.grid {
  /* Grid Fallback */
  display: flex;
  flex-wrap: wrap;
  
  /* Supports Grid */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  grid-auto-rows: minmax(350px, auto);
  grid-gap: 1em;
}

.module {
  /* Demo-Specific Styles */
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 450px;
  border-radius:20px;
  
  
  /* Flex Fallback */
  margin-left: 5px;
  margin-right: 5px;
  flex: 1 1 450px;
}

#email {
    float:left;
}
#instagram {
    float:right;
}

 .info {
  /* Demo-Specific Styles */
  background: #f7f6f2;
  display: flex;
  align-items:flex-start;
 /** justify-content: center;**/
  height: 450px;
  border-radius:20px;
 
  font-size:1.25em;
  
  
  /* Flex Fallback */
  margin-left: 5px;
  margin-right: 5px;
  flex: 1 1 450px;
}
.inner_info{
    self-align:center
}
#info_body {
    font-style: italic;
}


h3  {
    font-style:normal;
}


/* If Grid is supported, remove the margin we set for the fallback */
@supports (display: grid) {
  .module {
    margin: 0;
  }
}