*{
font-family: "Helvetica";
box-sizing: border-box;
}
body{
  margin: 0;
  padding:0;
}
h1, h2{
  font-size: 32px;
  font-weight: normal;
}

a{color:black;}
p{
font-family: "Helvetica";

}
#all_container{
  padding: 10px;
  width: 100%;

}
#me, #me *{
  margin: 0;
  padding: 0;
  color: black;
}
#me{
    font-size: 32px;
  margin-bottom: 20px;
}
#more_me{
  width: 100%;
  box-sizing: border-box;
  border: none;
  margin: 0;
  padding: 0;
}
#more_me p{
  padding: 0;
  margin: 0;
}
#more_me .col{
    width: 25%;
    display: inline-block;
    box-sizing: border-box;
    padding: 0px;
    padding-right: 10px;
    margin: 0px;
    border: none;
    vertical-align:top;
    margin-bottom: 20px;
}
#more_me .col *{
  font-size: 15px;
  box-sizing: border-box;
}
.grid-item{
  width: 100%;
  margin-bottom: 100px;
}
.landscape{
width: 100%;
}
.portrait{
max-height: 100vh;
max-width: 100%;
}

.grid-item p{
font-size: 15px!important;
}
.image_annot{
  font-size: 15px;
}
.image_links{
  margin-top: 20px;
  margin-right: 5px;
}
.image{
display: block;

}
.image_single{
display: inline-block;
padding-right: 10px;
}
@media only screen and (max-width: 1100px) {
  #more_me .col{
      width: 50%;
    }

}

@media only screen and (max-width: 900px) {
  *{
  font-family: "Helvetica";
  box-sizing: border-box;
  }
  h1,h2{
      font-size: 20px;
  }
  .grid-item p{
  font-size: 12px!important;
  }
  #more_me .col{
      width: 100%;
    }
  #more_me .col *{
    font-size: 12px;
  }
  #me{
      font-size: 20px;
    }
}