html {
  height: 100%;
  width: 100%;
  font-size: 16px;
  margin: 0; /* Default margin is 8px for html and body. :-( */
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  font-weight: 400;
  font-family: 'Verdana';
  color: #111;
  line-height: 1.6;
  text-rendering: optimizeLegibility !important;
  margin: 0; /* Default margin is 8px for html and body. :-( */
}

@media (min-width: 600px) {
  body {
    justify-content: center;
  }
}

section.app .container {
  align-items: center;
  justify-content: center;
}

section.app .content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.col {
    max-width: 50%;
}

.photo {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.about {
    animation: fadeIn linear .7s;
}

.name, .links, .photo  {
    animation: fadeIn linear 0.5s;
}

.links {
    display: flex;
    align-items: center;
    justify-content: center;
}


@keyframes fadeIn {
    0% {
         opacity: 0;
    }
    50% {
        opacity: .3;
    }
    80% {
        opacity: .6;
    }
    100% {
        opacity: 1;
    }   
}

p {
    margin-bottom: 1em;
}


.links a {
    margin-right: .8em;
}

.links a:last-child {
    margin-right: 0em;
}