* {
  font-family: "Open Sans", sans-serif;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.navbar-nav > li {
  margin-left: 15px;
  margin-right: 30px;
  font-size: 18px;
}

.navbar > a {
  margin-left: 10px;
  font-size: 18px;
}

.headshot {
  width: 330px;
  height: 330px;
  background: url("images/max_picture.jpg");
  border-radius: 50%;
  background-size: 450px;
  background-position: center;
  display: inline-block;
}

.contact {
  position: absolute;
  right: 200px;
  width: 200px;
  top: 100px;
  height: 150px;
}

.icons {
  display: inline-block;
  margin-left: 130px;
}

.github {
  text-decoration: none;
}

.linkedin {
  text-decoration: none;
}

.main-text {
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
  margin-top: 30px;
  width: 25%;
}

.main-text > h1 {
  text-align: center;
  margin-bottom: 20px;
}

.buttons {
  margin-top: 50px;
  text-align: center;
}

.buttons > a {
  width: 210px;
}

.footer {
  text-align: center;
  position: absolute;   
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}
.contact-text{ display: none; }

@media handheld, only screen and (max-width: 1200px) {

.main-container{ display: flex; align-items: start; width: 90%; justify-content: space-between; margin-left: auto; margin-right: auto; position: relative; }
.contact{ position: relative; left:unset; top:unset; right:unset; width: 37%; height: auto;  }
.main-text{ position: relative; left:unset; top:unset; right:unset; width: 59%}
.headshot{ width: 100%; height: unset; background-size: cover; margin-top: 50px; }
.headshot:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.icons{ margin-left: auto; margin-right: auto;  display: block; text-align: center; }
}
@media handheld, only screen and (max-width: 570px) {
.contact-text{ display: block; }
.contact-right{ display:none; }
.contact{ width:100%; max-width: 300px; margin-left: auto; margin-right: auto; margin-top: 0px;margin-bottom: 40px;}
.headshot{ margin-top:0px; }
.main-text{width:100%; }
}