<div class="ternary-system">
  <div class="sun primary"></div>
  <div class="sun secondary"></div>
  <div class="sun ternary"></div>
</div>
<div class="sand">
<div class="pendulums">
  <div class="pendulum">
    <div class="bar"></div>
    <div class="motion">
      <div class="string"></div>
      <div class="weight"></div>
    </div>
  </div>
  <div class="pendulum shadow">
    <div class="bar"></div>
    <div class="motion">
      <div class="string"></div>
      <div class="weight"></div>
    </div>
  </div>
</div></div>
<div class="pyramid"></div>
<div class="text">
  <h1 class="title">The <strong>Three-Body</strong><em>Problem</em></h1>
  <p>By Liu Cixin</p>
</div>

body{
  overflow:hidden;
}
.pyramid{
  $size: 100vw;
  position:absolute;
  right: 50vw;
  bottom: 0;
  width: 0;
  height: 0;
  transform: translateX(0);
border-style: solid;
border-width: 0 $size $size*1.2 $size;
border-color: transparent transparent #E8A653 transparent;
}

.sand{
  position:absolute;
  bottom:0;
  width:100%;
  height: 9vw;
  min-height: 8rem;
  background:#FFBD4D;
}

.ternary-system{
  position:absolute;
  bottom:0;
  // right:17vw;
  left: 82vw;
  transform: translateX(-100%);
}

.sun{
  position:relative;
  border-radius:50%;
  background:#FFDE72;
}

.sun.primary{
  position: absolute;
  top:15vw;
  left:5vw;
  width: 1rem;
  height: 1rem;
}

.sun.secondary{
  position: absolute;
  top:5vw;
  left: 11vw;
  width: 16vw;
  max-width:6rem;
  height: 16vw;
  max-height:6rem;
}

.sun.ternary{
  right:0;
  transform: translateX(10.8rem);
  width:80vw;
  max-width: 800px;
  height:80vw;
  max-height: 800px;
}

.pendulums{
  position:absolute;
  width:50px;
  height:200px;
  right:35vw;
  top:-120px;
  perspective:400px;
}

.pendulum{
  position:absolute;
  width:50px;
  height:200px;
  right:44%;
  top:0;
  left:50%;
  transform: translateZ(-300px) translateX(-50%);
}

.pendulum.shadow{
  top:263%;
  left:-65%;
  bottom:0;
  transform-origin: 50% 0;
transform:translateX(-50%) scaleY(-1) scaleZ(2) rotateY(-30deg) rotateX(-75deg) translateZ(300px);
}

.pendulum .bar{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  display:block;
  width: 20px;
  height:200px;
  background:#333;
}

.pendulum .string{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height:150px;
  background:#333;
}

.pendulum .weight{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:10px;
  width:50px;
  height:50px;
  border-radius:50%;
  background:#333;
}

.pendulum .motion{
  position:absolute;
  height:200px;
  width:50px;
  transform-origin:50% 10px;
  animation: swing 1600ms infinite ease-in-out;
}

.pendulum.shadow .bar, .pendulum.shadow .string, .pendulum.shadow .weight{
  background:#3d3a34;
}

@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);

.text{
  position:absolute;
  width: auto;
  right: 18vw;
  bottom: calc(63vh);
  transform: translateY(50%);
  font-size:2.6rem;
}

.title{
  text-align:center;
  font-size: 1em;
  font-family:'Oswald';
  font-weight:300;
  text-transform:uppercase;
  line-height:1.3em;
  margin:0;
  color:#222;
}

.title strong{
  display:block;
  font-weight:700;
  font-size:2em;
  line-height:1em;
}

.title em{
  font-style:normal;
  font-weight:400;
  font-size:1.899em;
  line-height:1em;
  letter-spacing:.29em;
  margin-left:0.25em;
}

p{
  position: absolute;
  left: 50%;
  transform: translateX(3.2em);
  font-family:'Oswald';
  font-size: 0.6em;
  color:#222;
  margin:0 17px;
  padding:0;
  text-align:right;
}

@keyframes swing{
  0%{    
  transform:rotate(-45deg);
  }
  50%{
    
  transform:rotate(45deg);
  }
  100%{
    
  transform:rotate(-45deg);
  }
}

@media only screen and (orientation: portrait) {
  .text{
    right: 50%;
    top: 10%;
    transform: translateX(50%);
    font-size: 7vw;
  }
  .title{ 
    font-size: 1em;
  }
}