body{
    background-color: rgba(255, 253, 248, 0.938);
    color:blue;
    text-align: center;
}

.links{
  position: relative;
  top: 100px;
}

.position{
  float:left;
  position:relative;
}

.square {

    border-radius: 25px;
    background: #ffffff;
    padding: 20px;
    

    border: 1px solid black;
    
    padding: 10px;
    
    display: inline-block;
    
}

/* Style the header with a grey background and some padding */
.header {
    overflow: hidden;
    background-color: #000000;
    padding: 20px 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
  }
  
  /* Style the header links */
  .header a {
    color: rgb(250, 250, 250);
    text-align: center;
    padding: 8px;
    text-decoration: none;
    font-size: 18px;
    line-height: 10px;
    border-radius: 4px;
    
  }
  
  /* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
  
  
  /* Change the background color on mouse-over */
  .header a:hover{
    background-color: #ddd;
    color: black;
  }
  
  /* Style the active/current link*/
  .header a.active {
    background-color: rgb(255, 0, 0);
    color: white;
  }
  
  /* Float the link section to the right */
  .header-left {
    float: left;
  }

  #content {
    background: #fff;
    margin-bottom: 2em;
    overflow: hidden;
    padding: 20px 20px;
    width: 760px;
    
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
  }

  #body {clear: both; margin: 0 auto; width: 800px;}
img.right, figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: left; margin: 0 2em 2em 0;}



h1{
  text-align: center;
  font-size: 35px;
  color: #000000;
  font-family:Georgia, 'Times New Roman', Times, serif
}

h2{
  text-align: center;
  font-size: 25px;
  font-family:Georgia, 'Times New Roman', Times, serif;
  color: #000000;
  text-decoration:underline;

}

p{
  text-align: left;
  color:#000000;
  font-size: 16px;
}

.links{
  float: right;
  margin-top: 50px;

  justify-content: space-between;
}

.image-row {
  display: flex;
  justify-content: space-between; /* this will add equal space between each image */
}

iframe{
  width:750px;
  height:750px;
}

#Project a{
  text-decoration: underline;
  font-size: 25px;
  color: #df1616;
}

#name a:hover{
  text-decoration: none;
  color:#df1616
}

.name a{
  color: #000000;
  text-decoration: none;
}