* {
  padding: 0;
  margin: 0;
}

body, html {
  width: 100%;
  height: 100%;
  font-family: 'Asap', sans-serif;
  letter-spacing: 0.1em;
  color: #222;
  background-color:#d2dcdb;
}

a {
  text-decoration: none;
  color: inherit;
  padding-bottom: 1px;
  margin: auto;
  outline: 0;
}

a:hover {
  border-bottom: 1px solid #222;
  padding-bottom: 0;
}

.block {
  width:100%;
  height:90%;
}

.shapes {
  background-color:#d2dcdb;
  background-image:
    url("../img/shapes_triangles.svg"),
    url("../img/shapes_squares.svg"),
    url("../img/shapes_circles.svg"),
    url("../img/shapes_blocks.svg");
  background-size: 1260px auto;
  background-position: center;
}

.splash {
  width: 420px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  text-align:center;
}

.center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align:center;
}

.title {
  padding: 60px 0;
}

@keyframes bounce {
	0%, 8%, 16%, 100% {
    transform: translateY(0);
  }
	4%, 12% {
    transform: translateY(-15px);
  }
}

.arrow {
  padding-top: 80px;
  animation-name: bounce;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.footer {
  width: 100%;
  float: left;
  background-color:#fff;
  font-size: 9pt;
}

.contact {
  float: left;
  padding: 1.8em;
  font-weight: 700;
}

.social {
  float: right;
  padding: 1.8em;
}

.social ul {
  list-style-type: none;
}

.social li {
  width: 16px;
  height: 16px;
  float: left;
  margin-left: 2em;
  background-repeat: no-repeat;
}

.social li:hover {
  opacity: 0.6;
}

.fablabsio {
  background-image: url(../img/social/fablabs-icon.svg);
}

.facebook {
  background-image: url(../img/social/facebook-icon.svg);
}

.twitter {
  background-image: url(../img/social/twitter-icon.svg);
}

.instagram {
  background-image: url(../img/social/instagram-icon.svg);
}

.pinterest {
  background-image: url(../img/social/pinterest-icon.svg);
}

.github {
  background-image: url(../img/social/github-icon.svg);
}

.cindy {
  background-color: #feed95;
  color: #ecc01c;
  text-transform: uppercase;
}

.charlie {
  background-color: #ffbdd8;
  color: #e75196;
  text-transform: uppercase;
}

.machine {
  background-color: #ffbdd8;
  background-image: url(../img/machine/harmonograph.gif);
  background-size: cover;
  color: #eee;
  text-transform: uppercase;
}

.student-number {
  position: relative;
  top:4em;
  text-align: center;
  width: 100%;
  font-weight: 700;
  font-size: 14pt;
}

.name img {
  height: 32pt;
  margin: auto;
}

.project-title {
  font-size: 14pt;
  font-weight: 700;
  letter-spacing: 0.5em;
  opacity: 0.5;
  padding-top: 1.6em;
}

.project-description {
  font-size: 14pt;
  width:50%;
  margin-left: 25%;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0.05em;
  padding-top: 1.6em;
}

.project-link {
  width: 200px;
  font-size: 10pt;
  font-weight: 700;
  border: 3px solid #fff;
  letter-spacing: 0.4em;
  padding: 1em 0.5em;
  margin: 10em auto 0 auto;
}

.project-link:hover {
  opacity: 0.6;
}

.cindy-border {
  border-color: #ecc01c !important;
}

.charlie-border {
  border-color: #e75196 !important;
}

.machine-border {
  border-color: #eee !important;
}