index.css

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

@font-face {
  font-family: 'SG1212';
  src: url("fonts/sg12-webfont.eot");
  src: url("fonts/sg12-webfont.eot?#iefix") format('embedded-opentype'), url("fonts/sg12-webfont.woff") format('woff'), url("fonts/sg12-webfont.ttf") format('truetype'), url("fonts/sg12-webfont.svg#SG1212") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'Fantasque Sans Mono';
    src: url('fonts/fantasquesansmono-regular-webfont.eot');
    src: url('fonts/fantasquesansmono-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fantasquesansmono-regular-webfont.woff2') format('woff2'),
         url('fonts/fantasquesansmono-regular-webfont.woff') format('woff'),
         url('fonts/fantasquesansmono-regular-webfont.ttf') format('truetype'),
         url('fonts/fantasquesansmono-regular-webfont.svg#fantasque_sans_monoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

#preloader {
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  background: #E0ECEF;
  background-image: url('data:image/gif;base64,R0lGODlhMgAyAJECAODs74ODg////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgACACwAAAAAMgAyAAACfISPqcvtD6OctNqLs968+w+G4ggGpklG55k+K9o2bxAzb23feDLTO9L7AWfCQ7AIOBaVQubPuYPipDVqzNrq+ZpYkhap3UZhSfLUXBZf0ayz2tBev+HzUFxxF+Xx9c6e36fxt4DmVygDE0hx6KDDwYgIeTGYg2R5iZl5WQAAIfkEBQoAAgAsDAAKABoAIwAAAk+Ujwa76Q8BnLTaG1EIuPsPhuJIluaJpuoKSqZbwhj3yBYtbLT9bQqJYwlbE1wwweHljhBf46D7UXRPg1OJTD4Bm+p0x+AKvEVww1zRaQ0FACH5BAUKAAIALAwACQAVACQAAAJFhI8Xu+nJ2JuxTVfDhXHz7hmZFgJjaWboWbKh68GbfNFUhaZgi689vwNacj8hySchapI8nTIYYwpzuqPxmcIOr1Qo91AAACH5BAUKAAIALBEACAAOACUAAAJEhG+hir3bzmMRzFBntTpe7F2ZGHYOeZrIN6oSurrvs8Ex3UI5leK9P0vohLwhBxQkpl5LZex5SzqnRymTeuVtqltsowAAOw==');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: 99;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.bg {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
  padding: 3em 0;
}
body {
  font-family: 'Fantasque Sans Mono', 'Fira Sans OT', Helvetica, sans-serif;
  font-size: 1.2em;
}

#viewbox {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #000 url('background.jpg');
  background-size: cover;
  z-index: 1;
}

#main {
  position: relative;
  z-index: 2;
  padding-bottom: 8em;
}

.header {
  color: #eee;
  text-shadow: 0 0 20px rgba(65, 64, 73, 0.45);
  text-align: center;
  text-transform: uppercase;
  font-family: 'SG1212', 'SHAKAGRAPHICS', sans-serif;
  line-height: 1em;
}

.title {
  position: relative;
  min-height: 3em;
}

.title header {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 45%; left: 50%;
  transform: translate(-51%, -50%);
  width: 100%;
}

.title h1 {
  font-size: 7em;
  margin-bottom: 0;
}

.tickets {
  position: absolute;
  top: 50%;
  left: 50%;
  text-decoration: none;
  display: block;
  margin-top: 5em;
  color: #e5e4f5;
  font-weight: 800;
  text-transform: uppercase;
  background: #e7c23e;
  border: 1px solid #aa8632;
  border-radius: 3px;
  padding: 0.5em 1.5em;
  font-size: 2.15em;
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 20px rgba(65, 64, 73, 0.1);
  text-shadow: 0 +1px #aa8632
             , 0 -1px #aa8632
             , -1px 0 #aa8632
             , +1px 0 #aa8632;
}

.tickets:hover {
  transform: translate(-50%, -50%) scale(1);
  text-decoration: none;
  color: #e5e4f5;
}

@media screen and (max-width: 850px) {
  #main > h1 {
    font-size: 6em;
  }
}

@media screen and (max-width: 660px) {
  #main > h1 {
    top: 100px;
    font-size: 4em;
    transform: translate(-50%, 0);
  }

  .tickets {
    top: 200px;
    transform: translate(-50%, 0);
    font-size: 1.2em;
  }
}

.content {
  max-width: 600px;
  margin: 0 auto;
}

.content-item, .mentor-list > li {
  background-color: white;
  margin-bottom: 1.5em;
  border-radius: 4px;
  color: #2E2B25;
  padding: 1.5em;
}

.mentor-list {
  list-style-type: none;
  padding: 0;
}

.mentor-list figure {
  margin: 0;
  padding: 0;
}

.mentor-list > li, .content-item p {
  font-size: 0.9rem;
}

.content-item h1 {
  margin: 0
}

.mentor-list figcaption {
  margin-left: 120px;
  padding-left: 1.5em;
  line-height: 1.45em;
  color: #45413b;
}

figure .mentor-thumb {
  margin-top: 0.3em;
}

.mentor-thumb {
  float: left;
  clear: left;
  width: 120px;
  height: 120px;
  margin-right: 1.5em;
  margin-bottom: 1rem;
}

.mentor-list h1, .content-item h1 {
  margin: 0;
  padding-top: 0;
  margin-bottom: 1rem;
  font-size: 1.9em;
  line-height: 1.5em;
  font-family: 'SG1212', 'SHAKAGRAPHICS', sans-serif;
  text-transform: uppercase;
  color: #2E2B25;
}

div.dg.ac {
  z-index: 3;
}

#stats {
  display: none;
  z-index: 5;
  position: fixed;
  top: 4px; left: 4px;
}

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

#code-of-conduct .content {
  padding: 0.2em 2em;
}

footer.content {
  text-align: center;
  margin: 1em auto;
  padding: 1em 0;
}

a, a:hover {
  color: rgb(46,43,37);
  text-decoration: underline;
}

h1 a, h2 a, h3 a, h4 a {
  text-decoration: none;
}

h2, h3, h4, h5, h6 {
  font-family: Helvetica, Arial, sans-serif;
}

.content > h1 {
  text-align: center;
  padding: 1em 0;
}

#videos iframe {
  margin-bottom: 1em;
}