html,
body {
  height: 100%;
}
body {
  background-color: #eee;
  color: #444;
  /*
    font-family: "myriad pro", myriad, helvetica, arial, sans-serif;
    font-weight: 100;
    */
  font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11pt;
  padding: 0;
  margin: 0;
  overflow: hidden;
  text-align: center;
}
* {
  box-sizing: border-box;
}
a {
  color: #0099dd;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
#title {
  font-size: 16pt;
  top: 100px;
  left: 0;
  right: 0;
  position: absolute;
  transform: translateZ(-800px);
  text-align: center;
}
#title h1 {
  font-size: 54pt;
  font-weight: 200;
  letter-spacing: -0.5px;
  margin: 0 0 20px 0;
}
#title p {
  width: 600px;
}
h2 {
  font-size: 24pt;
  font-weight: 200;
  margin-bottom: 24pt;
}
p {
  width: 480px;
  max-width: 100%;
  line-height: 160%;
  margin: 0 auto;
  opacity: 0.6;
}
#scene {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  perspective-origin: 50% 50%;
  perspective: 2000px;
  transform-style: preserve-3d;
}
#container {
  padding: 50px 0 250px 0;
  text-align: center;
  transform-style: preserve-3d;
}
.info {
  padding: 0 35px;
}
.display {
  margin: 0 -100%;
  display: inline-block;
  position: relative;
  background-color: #111;
  z-index: 100;
  border-radius: 20px;
  border-top: 10px solid #ccc;
  border-bottom: 120px solid #ccc;
  transform: rotateX(-69deg);
  /*Interestingly, using exactly 90 degrees seems to make the gifs not animate - perhaps this is some kind of performance thing...?
    (...based on an incorrect assumption that if an object is turned at exactly 90 degrees - completely edge-on - it's invisible, but that's not always true - it depends on where it's being viewed from!) */
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}
/* Add branding - optional */
.display:before {
  /*
    content: '';
    font-size: 65px;
    color: #111;
    */
  content: '';
  background: url("data:image/svg+xml,%3Csvg width='46' height='55' viewBox='0 0 46 55' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.2 12.96c4.59.37 8.04 2.19 10.33 5.45-4.1 2.49-6.14 5.98-6.1 10.45.04 3.48 1.3 6.38 3.79 8.69A12.44 12.44 0 0046 40.03a29.7 29.7 0 01-3.9 7.81 28.53 28.53 0 01-3.62 4.42l-.16.15a7.34 7.34 0 01-4.86 2.14c-1.16 0-2.53-.3-4.12-.92l-.37-.15a12.88 12.88 0 00-4.84-1.07 13 13 0 00-4.56.9l-.4.17c-1.78.72-3.21 1.09-4.3 1.13-1.58.06-3.15-.59-4.71-1.97l-.26-.23a28.16 28.16 0 01-3.96-4.73 32.73 32.73 0 01-4.18-8.31A30.43 30.43 0 010 29.47C0 25.8.8 22.64 2.37 20c1.25-2.12 2.9-3.8 4.98-5.03a13.38 13.38 0 016.72-1.9c1.24 0 2.84.36 4.8 1.07l1.28.46c1.65.6 2.73.9 3.25.9.45 0 1.98-.48 4.57-1.43 2.46-.88 4.53-1.25 6.22-1.1zM34.43 0a11.65 11.65 0 01-2.93 8.73c-2.4 2.81-5.3 4.43-8.45 4.18a8.5 8.5 0 01-.06-1.04c0-2.62 1.14-5.43 3.17-7.72a12.2 12.2 0 013.86-2.9A11.5 11.5 0 0134.44 0z' fill='%23111' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  height: 58px;
  position: absolute;
  bottom: -85px;
  left: 0;
  right: 0;
  text-align: center;
}
/* Add shine - optional */
.display:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(70deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 59.9%, rgba(255, 255, 255, 0.075) 60%, rgba(255, 255, 255, 0.35) 100%);
}
.screen {
  background-color: #fff;
  text-align: center;
  border-radius: 2px;
  width: 960px;
  max-width: 100%;
  height: 540px;
  margin: 40px;
}
.screen img {
  width: 960px;
  max-width: 100%;
  height: 540px;
}
.stand {
  background-color: #999;
  background: linear-gradient(#999 0, #ddd 100%);
  border-bottom: 1px solid #fff;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  position: relative;
  z-index: -1;
  border-radius: 20%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), 0 0 100px rgba(0, 0, 0, 0.2);
  transform: translateY(-150px) rotateX(20deg);
  transform-origin: 50% 100%;
}
#endprompt {
  background-color: #fff;
  padding: 80px 0 120px 0;
}
footer {
  background-color: #222;
  color: #ccc;
  padding: 50px;
  text-align: center;
}