*, *:before, *:after {
  vertical-align: top;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Times New Roman', Times, serif;
  -webkit-font-smoothing: antialiased;
  font-weight: normal;
  color: #000;
  font-size: 30px;
  line-height: 1.6em;
}

.wrapper { 
  margin: 0 auto; 
  max-width: 900px;
  padding: 50px 50px 0 50px;
  animation: fadein 1000ms;
  position: relative;
  top: 0;
  transition: top 500ms ease;
  cursor: default;
}

.wrapper.init { top: 10px; }

.projects a { 
  color: #fff; 
  margin: 0 0px 0 0; 
  text-decoration: none;
  transition: color 200ms ease; 
  border-bottom: 1px dotted #666;
}
.projects a:hover { color: #666; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.section {
  margin: 0 0 80px 0;
}

p { margin: 0 0 20px 0; }

img.avatar { 
  width: 100%; 
  margin: 30px 0 50px 0;
}

a { 
  color: #000; 
  margin: 0 10px 0 0; 
  text-decoration: none;
  transition: color 200ms ease; 
  border-bottom: 1px solid #9E9E9E;
}
a:hover { color: #9E9E9E; }

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Roboto, Arial, sans-serif;
  font-size: 28px;
  margin: 0 0 20px 0;
  padding: 0;
  font-weight: 600;
}

.contact {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 28px;
}

::selection { background: #eee; }
::-moz-selection { background: #eee; }

.projects-wrapper {
  background: #000;
  font-size: 0; 
  color: #fff;
}

.projects { 
  max-width: 1500px; 
  margin: 0 auto;
  padding: 100px 50px;
}

.item {
  width: 50%;
  display: inline-block;
  padding: 0 0 100px 0;
}

.item.wide { width: 100%; }

.video-player { padding: 0 0 100px 0; }

img { width: 100%; }

video { width: 100%; }


@media only screen and (max-width: 660px) {
  body { font-size: 20px; }
  h1, h2, h3, h4, h5, h6, .contact { font-size: 20px; }
  .wrapper { padding: 20px; }
  .section { margin: 0 0 50px 0; }
  img.avatar { margin: 10px 0 30px 0; }
  .projects { padding: 80px 20px; }
  .item { padding: 0 0 40px 0; }
  .video-player { padding: 0 0 40px 0; }
}