body {
  background-color: #fff;
  font-family: Arial;
  font-weight: 300;
  color: #222;
  margin: 0;
  padding: 0;
}

main {
  margin: 40px auto 100px auto;
  max-width: 540px;
  padding: 0;
  font-size: 18px;
}

.col-pic {
  background: url(ville.jpg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  border-radius: 50%;
  box-shadow: inset 0 -10px 30px #fff;
  padding: 0;
  margin: 75px auto 0 auto;
  max-width: 360px;
  height: 360px;
}

.col-title {
  text-align: center;
  margin: 40px auto 0px auto;
}

h1 {
  font-weight: 300;
  font-size: 34px;
  padding: 0;
  margin: 50px 0 0 0;
}

h2 {
  font-weight: 300;
  font-size: 20px;
  padding: 6px;
  margin: 0;
  color: #666;
}

.col-txt {
  margin: 50px auto 50px auto;
}

footer {
  text-align: center;
  color: #999;
  margin-bottom: 50px;
  font-size: 16px;
}

p {
  line-height: 150%;
}

.secondary {
  color: #4240B6;
}

a i {
  color: #4240B6;
}

a:hover i {
  color: #4240B6;
}

a {
  color: #4240B6;
  text-decoration: underline solid #4240B6;
}

a:hover {
  color: #4240B6;
  text-decoration: underline solid #4240B6;
}

span.linkish {
  color: #4240B6;
}

footer > a {
  color: #999;
  text-decoration: none;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 26px;
  }
  h2 {
    font-size: 18px;
  }
  main {
    margin: 0px 15px;
    max-width: 100%;
    padding: 0px 10px;
  }
  .col-pic {
    margin: 40px auto 0 auto;
    max-width: 220px;
    height: 220px;
  }
}