index.css

abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav
ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0
0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px
dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px
solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

.cf:after,.cf:before{content:" ";display:table}.cf:after{clear:both}.cf{*zoom:1}

/**
 * General
 */
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #fff;
  line-height: 1.5em;
  font-family: 'Fantasque Sans Mono', 'Ubuntu Mono', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #4A4F5E;
}

strong {
  color: #4A4F5E;
}

p + p, h2 + p {
  margin-top: 1.5em;
}

section ul {
  margin: 1.5em;
}

a {
  text-decoration: none;
  border-bottom: 1px solid #66C4FF;
  color: #66C4FF;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 100;
  line-height: 1em;
  color: #34363B;
}

h1 { font-size: 2.5em; }
h1 .lighter { color: #A9B0C2; }
h2 {
  font-size: 2.2em;
  margin-top: 3em;
  border-bottom: 1px dotted #DEE7FF;
  padding-bottom: 0.8rem;
}

/**
 * Intro
 */
#grid {
  z-index: 1;
}

/**
 * Main Layout
 */
#main {
  position: relative;
  z-index: 2;
  padding: 2rem;
  max-width: 400px;
}

#main section {
  color: #4A4F5E;
  font-size: 0.8em;
}

#main {
  background: rgba(255,255,255,0.8);
}

section.intro {
  min-height: 400px;
  min-height: 50vh;
}

.title {
  margin-bottom: 0.3em;
}

.topnav ul {
  color: #DEE7FF;
  list-style-type: none;
  white-space: pre;
  margin-bottom: 2em;
}

.topnav ul > li {
  display: inline-block;
}

/**
 * Thumbnails
 */
.thumbs {
  list-style-type: none;
  margin-right: 0;
  margin-left: -1em;
  margin-bottom: 2em;
  margin-top: -1em;
}

.thumbs:before,
.thumbs:after {
  content: ' ';
  display: table;
}

.thumbs:after {
  clear: both;
}

.thumbs li {
  position: relative;
  box-sizing: border-box;
  padding-top: 2em;
  padding-left: 1em;
  width: 33.3%;
  float: left;
}

.thumbs.thumbs-pair li {
  width: 50%;
}

.thumbs.thumbs-trio li {
  font-size: 0.95em;
}

.thumbs li .image {
  background-image: url(default.jpg);
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  height: 140px;
  box-sizing: border-box;
  border: 1px solid #DEE7FF;
  border-radius: 4px;
}

.thumbs li h3 {
  font-family: 'Fantasque Sans Mono', 'Ubuntu Mono', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  white-space: nowrap;
  margin-top: 0.5rem;
  color: #4A4F5E;
  opacity: 0.8;
}

/**
 * Intro
 */
#intro {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(255,255,255,0.75);
  padding: 2em;
}

#intro aside,
#community-content aside {
  max-width: 400px;
  color: #4A4F5E;
  font-size: 0.9em;
}

#community {
  position: relative;
}

#community-content {
  position: relative;
  z-index: 2;
}

.no-webgl #grid {
  background-image: url(bg.jpg);
  background-size: cover;
}

/**
 * Section Layout
 */
.section {
  padding: 2em;
  color: #A9B0C2;
}

.section h2 {
  color: #4A4F5E;
  border-bottom: 1px dotted #DEE7FF;
  margin-bottom: 16px;
  line-height: 2em;
}

.thumb-list {
  list-style-type: none;
  margin-left: -1em;
}

.thumb h1 {
  font-size: 1em;
  font-weight: 300;
  padding-top: 1em;
  padding-bottom: 0.5em;
  color: #4A4F5E;
}

.thumb-image {
  width: 100%;
  height: 175px;
  border-radius: 3px;
  background-size: cover;
  background-color: #DEE7FF;
  border: 1px solid #DEE7FF;
  background-position: 50% 50%;
}

.featured .thumb-image {
  height: 385px;
  height: 424px;
}

.thumb {
  width: 175px;
  margin: 1em;
  float: left;
}

.thumb.featured {
  width: 383px;
}

.thumb.featured .desc {
  font-size: 0.8em;
  line-height: 1.5em;
}

.thumb-filter {
  list-style-type: none;
  margin-bottom: 1em;
}

.thumb-filter > li {
  display: inline-block;
  text-transform: lowercase;
}

.thumb-filter > li:after {
  content: ' / ';
  color: #DEE7FF;
}

.thumb-filter > li.selected a {
  color: #FF6F5C;
  border-bottom-color: #FF6F5C;
}

.thumb-filter > li:last-child:after {
  content: '';
}

#community-content ul {
  margin-left: 1em;
}

#community-content ul,
#community-content p {
  margin-bottom: 1em;
}

[data-fill] {
  height: 100vh;
}