body, header, section, main, aside, footer, p{
    display: block;
}

body{
    width: 75%;
    margin: auto;  
}

/*Typography*/
body {
    font-family: 'Karla', sans-serif;
    font-size: 100%;
    color: rgb(40, 91, 212);
}

/*Navigation*/
nav {
    overflow: hidden;
    margin: 5% 0%;
}

#name {
    margin: 2.5% 36.75%;
    display: inline-block;
}

#right {
    display: inline-block;
    position: fixed;
    padding-left: 5%;
    width: 50px;
}

#name a, #right a {
    text-align: center;
    color: rgb(40, 91, 212);
    text-decoration: none;
}

#name a:hover, #right a:hover{
    color: #85EDEE;
    text-decoration: underline;
}

#right a{
    float: left;
    padding-right: 0.5%;
}

/*Image Grid*/
.row{
    display: flex;
    flex-wrap: wrap;
    display: -ms-flexbox; /* IE10 */
    -ms-flex-wrap: wrap; /* IE10 */
    padding: .8%;
}

.column{
    -ms-flex: 31%; /* IE10 */
    flex: 31%;
    max-width: 31%;
    padding: .8%;;     
}

.column img{
    width: 100%;
    height: auto;
    display: block;
}

/*Responsive Layout*/
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 66%;
    flex: 66%;
    max-width: 100%;
  }
  #right {
    position: relative;
  }
}

@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }  
#right {
    position: relative;
  }
 #name {
    margin: 0 10%;
  }
}