* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
  font-family: Palatino, "Palatino Linotype", "Book Antiqua", serif;
  font-size: 16px;
  line-height: 28px;
  background: #000;
  overflow: hidden;
}

#front {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #444;
}
em {
  color: #666;
}
.box {
  background: rgba(0, 0, 0, .5);
  color: #eee;
  padding: 0 28px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, .3);
  -moz-box-shadow: 0 5px 30px rgba(0, 0, 0, .3);
  box-shadow: 0 5px 30px rgba(0, 0, 0, .3);
}
canvas:focus {
  outline: none;
}
.box a {
  color: #ccc;
}
.box p {
  margin: 28px 0;
  color: #999;
}
.box form {
  margin: 0 0 28px 0;
}
.box h1 {
  border-bottom: 1px solid #333;
  margin: 28px 56px;
  font-size: 32px;
  line-height: 56px;
  font-weight: normal;
  color: #ccc;
}
#front .box {
  min-height: 255px;
  width: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -300px;
  margin-top: -130px;
  text-align: center;
}
.again {
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .5);
}
.again:hover {
  color: #fff;
  background: rgba(255, 255, 255, .7);  
}

#back {
  background: rgba(0, 0, 0, .75);
  width: 600px;
  position: absolute;
  left: 50%;
  padding: 10px;
  bottom: 10px;
  margin-left: -300px;
  text-align: center;
  z-index: 101;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}

#back.active {
  display: block;
}
#back.visible {
  opacity: 1;
}
#back p {
  margin: 0;
}

.box .spin, .box .wait {
  color: #999;
  font-size: 32px;
  position: relative;
  top: 0px;
}

#loading p, #crunch p {
  margin-top: 0;
  padding: 14px 0;
}

#maximize p, #macchrome p {
  color: #444;
  font-weight: bold;
}

#ready p {
  margin-top: -14px;
  margin-bottom: 14px;
}

#browser, #maximize, #macchrome, #crunch, #ready, #back, #firefox {
  display: none;
}

#holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#holder canvas {
  position: absolute;
}

label {
  color: #999;
}
select {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  background: black;
  color: white;
  border: 0;
  color: #999;
}

button {
  border-radius: 100px;
  background: #777;
  color: #fff;
  border: 0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3),
              inset 0 2px 2px rgba(255, 255, 255, .3);
  cursor: pointer;
  font-size: 24px;
  padding: 12px 16px 12px 17px;
}
button:hover {
  background: #999;
}
button:active {
  color: #bbb;
  background: #888;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3),
              inset 0 2px 2px rgba(0, 0, 0, .3);
}

#beat {
  position: absolute;
  z-index: 100;
  bottom: 5px;
  right: 5px;
  color: #fff;
}