@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');

* {
  padding: 0;margin: 0;
}

body {
  font-size: 26px;
}

.body-container {
  font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #333;
  line-height: 1.5em;
}

h1, h2, h3 {
  color: #000;
}

a {
  text-decoration: none;
  color: #09f;
}

a:hover {
  text-decoration: underline;
}

#boxes {
  position: fixed;
  top:  0px;
  left: 0px;
  width:100%;
  list-style: none;
  z-index: -1;
}

.box {
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  height: 50px;
  display: inline-block;
  text-align:center;
}


#ring1 {
  /* box-shadow: inset 0 30px 0 rgba(100, 250, 50, 0.5), */
  /*             inset 30px 0 0 rgba(50, 200, 150, 0.5), */
  /*             inset 0 -30px 0 rgba(150, 150, 0, 0.5), */
  /*             inset -30px 0 0 rgba(250, 50, 0, 0.5); */
  animation:  rot1 4s linear infinite;

  border-radius:100000px;
  position:absolute;
  top: calc(50vh - 250px);
  left: calc(50vw - 250px);
  width:500px;
  height:500px;
  transform-origin:center center;
  z-index:-1;
}

#ring2 {

  /* box-shadow: inset 0 30px 0 rgba(0, 250, 250, 0.5), */
  /* inset 30px 0 0 rgba(0, 200, 200, 0.5), */
  /* inset 0 -30px 0 rgba(50, 150, 200, 0.5), */
  /* inset -30px 0 0 rgba(50, 200, 250, 0.5); */
  animation:rot2 4s linear infinite;

  border-radius:100000px;
  position:absolute;
  top: calc(50vh - 250px);
  left: calc(50vw - 250px);
  width:500px;
  height:500px;
  transform-origin:center center;
  z-index:-1;

}

#sliders {
  position: fixed;
  bottom: 13px;
  left: 20px;
}


#sliders span {

  padding-left: 30px;
}

#title {
  color : #ccc;
  font-size:100px;
  font-family: "Open sans", sans-serif;
  position: absolute;
  width: 100%;
  height: 100vh;
  text-align: center;
  line-height: 100vh;
  z-index:-1;
}

h3 {
  display: inline-block;
  min-width: 200px;
  font-weight:normal;
}


@keyframes rot1{
  0%{
    transform:rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50%{
    transform:rotateZ(180deg) scaleX(0.82) scaleY(0.95);
  }
  100%{
    transform:rotateZ(360deg) scaleX(1) scaleY(1);
  }
}

@keyframes rot2{
  0%{
    transform:rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50%{
    transform:rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
  }
  100%{
    transform:rotateZ(-360deg) scaleX(1) scaleY(1);
  }
}