*, *:after, *:before {
        box-sizing: border-box;
      }

      .bowl {
        background: silver;
        border-radius: 0 0 25rem 25rem;
        bottom: 0;
        box-shadow: inset -3.125rem -3.125rem 5rem rgba(0, 0, 0, 0.5);
        height: 12.5rem;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 420px;
        width: 25rem;
      }
      .bowl:before, .bowl:after {
        border-radius: 50%;
        content: '';
        position: absolute;
      }
      .bowl:before {
        /*background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM0OThkYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBhMjYzOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');*/
        background-size: 100%;
        /*background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3498db), color-stop(100%, #0a2639));*/
        /*background-image: -moz-linear-gradient(top, #3498db 0%, #0a2639 100%);*/
        /*background-image: -webkit-linear-gradient(top, #3498db 0%, #0a2639 100%);*/
        background-image: linear-gradient(to bottom, grey 0%, silver 100%);
        left: 2.5%;
        height: 7.14286rem;
        top: -3.84615rem;
        width: 95%;
        z-index: 5;
      }
      .bowl:after {
        background: grey;
        height: 8.33333rem;
        top: -4.16667rem;
        width: 100%;
        left: 0px;
      }

      html, body {
        padding: 0;
        margin: 0;
      }


      body {
        font-size: 12px;
        text-align: center;
        background: url('../images/stars.jpg');
        position: relative;
      }

      #stage {
        margin: 150px auto;
        width: 600px;
        height: 500px;
        -webkit-perspective: 800;
      }

      #rotate {
        margin: 0 auto;
        width: 600px;
        height: 400px;
        /* Ensure that we're in 3D space */
        -webkit-transform-style: preserve-3d;
        /*
        Make the whole set of rows use the x-axis spin animation
        for a duration of 7 seconds, running infinitely and linearly
        */
/*        -webkit-animation-name: x-spin;
        -webkit-animation-duration: 7s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;*/
      }

      #rotate:hover > .ring {
        -webkit-animation: 0;
      }

      .ring {
        margin: 0 auto;
        height: 100px;
        width: 600px;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
      }

      .ring > :nth-child(odd), .ring > :nth-child(even) {
        background-color: silver;
      }

      .poster {
        margin-left: 200px;
        /* bring your own prefixes */
        transform: translate(-50%, -50%);
        position: absolute;
        width: 108px;
        height: 100px;
        /*opacity: 0.7;*/
        color: rgba(0,0,0,1);
        /*-webkit-border-radius: 10px;*/
      }

      .poster > p {
        font-size: 12px;
        text-align: center;
        margin-top: 20px;
        border-bottom: 1px solid grey;
      }

      /*
      Set up each row to have a different animation duration
      and alternating y-axis rotation directions.
      */
      .ring {
        -webkit-animation-name: y-spin;
        -webkit-animation-duration: 30s;
      }

 /*     #ring-2 {
        -webkit-animation-name: back-y-spin;
        -webkit-animation-duration: 4s;
      }

      #ring-3 {
        -webkit-animation-name: y-spin;
        -webkit-animation-duration: 3s;
      }*/

      /*

      Here we define each of the three individual animations that
      we will be using to have our 3D rotation effect. The first
      animation will perform a full rotation on the x-axis, we'll
      use that on the whole set of objects. The second and third
      animations will perform a full rotation on the y-axis in
      opposite directions, alternating directions between rows.

      Note that you currently have to specify an intermediate step
      for rotations even when you are using individual transformation
      constructs.

      */
/*      @-webkit-keyframes x-spin {
        0%    { -webkit-transform: rotateX(0deg); }
        50%   { -webkit-transform: rotateX(180deg); }
        100%  { -webkit-transform: rotateX(360deg); }
      }*/

      @-webkit-keyframes y-spin {
        0%    { -webkit-transform: rotateY(0deg); }
        50%   { -webkit-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(360deg); }
      }

/*      @-webkit-keyframes back-y-spin {
        0%    { -webkit-transform: rotateY(360deg); }
        50%   { -webkit-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(0deg); }
      }*/
      .trophy-container {
        width: 66%;
        text-align: center;
        float: left;
        margin-top: 50px;
      }

.results {
  background-color: black;
  width: 33%;
  position: absolute;
  right: 0;
  top: 0;
  text-align: left;
  color: white;
}

ul {
  margin-left: -15px;
}

.heading {
  margin-bottom: 0px;
}

.description {
  border-left: 1px solid white;
  padding: 10px;
  margin: 0px 0px 0px -14px;
}