nav {
  margin-top: 0;
}

main {
  background-color: white;
}

.image {
  height: 300px;
  background: url("../img/facade.jpg") no-repeat center 20%;
  background-size: cover;
}

article {
  padding-top: 40px;
}

div.greet {
  line-height: 1.7em;
  max-width: 600px;
  text-align: left;
  margin: 0 auto;
  position: relative;
}

.license {
  color: #75a376;
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

.personal {
  width: 180px;
  height: 180px;
  border-radius: 450px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 5px solid white;
  -webkit-box-shadow: 0 0 1px black, 0 0 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 1px black, 0 0 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: absolute;
  top: -150px;
  left: calc( 50% - 95px);
}

.personal img {
  -o-object-fit: cover;
     object-fit: cover;
  margin-top: -24%;
  margin-left: -34%;
  height: 140%;
}

.message {
  padding-top: 60px;
  position: relative;
  line-height: 2em;
}

.message > div {
  padding: 0.5em 0;
}

@media screen and (min-width: 780px) {
  .image {
    height: 400px;
  }
  .personal {
    width: 220px;
    height: 220px;
    border-radius: 550px;
    left: 40px;
  }
  .message {
    padding-top: 90px;
  }
}
/*# sourceMappingURL=greet.css.map */