Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
<div class="mixer">
  <div class="top">
    <div class="main">
      <div class="top_light"></div>
      <div class="top_right"></div>
    </div>
  </div>
  <div class="middle">
    <div class="middle_back">

    </div>
      <div class="middle_inner"></div>    <div class="middle_right"></div>
    <div class="bowl_holder">
      <div class="bowl_holder_top"></div>
    </div>
    <div class="bowl">
      <div class="bowl_shadows"></div>
      <div class="bowl_blockers">
        <div class="bowl_left"></div>
        <div class="bowl_right"></div>
      </div>
    </div>
  </div>
  <div class="btm">
    <div class="btm_corners">
      <div class="btm_left"></div>
    </div>
    <div class="btm_top"></div>
    <div class="btm_btm">
      <div class="btm_btm_left_shadows">
        
      </div>
      <div class="btm_btm_right_shadows">
        
      </div>      
    </div>
    
  </div>
</div>  
</div>

              
            
!

CSS

              
                $t: rgba(#9A9A9A,0);
$bk: #fff;
$p: #ff005a;

@mixin for-phone-only {
  @media (max-width: 599px) {
    @content;
  }
}

*{
  box-sizing: border-box;
}
body {
  
  font-size: 10px; 
   @include for-phone-only {
    font-size: 7px;
  }     
  background-repeat: no-repeat;
  background-size: 570px;
  background-position: 50% 62%;
  .container {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100vw;
    height: 100vh;
    .mixer {
      width: 36em;
      height: 14.8em;
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-repeat: no-repeat;
      .top {
        width: 40em;
        height:22em;
          position: absolute;
          top: -7%;
          left: 40%;
          transform: translate(-50%, 0%);                
        .main {
          position: absolute;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 10px;
          border-top-left-radius: 7.6em;         
          border-top-right-radius: 7.6em;           
          left: 2%;
          width: 36.5em;
          height: 14em;
          background: 
// bottom dark border   
    linear-gradient(
      to right,
      rgba(#000,.7),rgba(#000,.5), rgba(#000,.3),  rgba(#000,.5)
    ) 
    44% 100% / 100% .2em,             
// MIDDLE LIGHT PART  
    linear-gradient(
      to right,
      rgba(#000,.1),rgba(#000,.3), rgba(#000,.3),  rgba(#000,.1)
    ) 
    44% 79% / 100% .1em,              
    linear-gradient(
      to right,
      rgba(#000,.1),rgba(#000,.7), rgba(#000,.7),  rgba(#000,.1)
    ) 
    44% 62% / 100% .1em,              
    linear-gradient(
      to right,
      rgba(#b7b7b7,.1),rgba(#fff,.7), rgba(#fff,.7),  rgba(#b7b7b7,.1)
    ) 
    44% 74% / 100% 2.3em,             
    linear-gradient(
      to right,
      rgba(#b7b7b7,.2),rgba(#bcbcbc,1), rgba(#bcbcbc,1),  rgba(#b7b7b7,.2)
    ) 
    44% 74% / 100% 2.3em,  
// END MIDDLE LIGHT PART  
  
// WEIRD TOP MIDDLE PART
    linear-gradient(
      rgba(#5B5B5B,1) 4%, rgba(#929292,.7) 8%, rgba(#929292,.7) 8%,#A3A3A3 , rgba(#A1A1A1,.9)
    )  
    50% 0% / 56% 14em,   
// END WEIRD TOP MIDDLE PART            
// RIGHT TOP CIRCLE            
            radial-gradient(
              96% 100% at 0% 100%,
              $t 40%,
              rgba(#575757, 1) 47%,
              rgba($t, 0) 55% 
            ) 146% -8.2em / 17em 16em,            
// LEFT TOP CIRCLE            
            radial-gradient(
                100% 100% at 100% 100%,
            $t 30%,
             rgba(#7E7E7E,.7) 40%,
                rgba(#575757, 1) 47%,
                rgba($t, 0) 55% 
              ) -8.8em -8.2em / 17em 16em,
            linear-gradient(to left,
              rgba(#464646,.7) 2%,#9A9A9A 6%, $t, $t 10%, $t 14%),                         
            linear-gradient(to right,
              rgba(#464646,.7) 2%,#9A9A9A 6%, #C8C8C8, #C8C8C8 10%, #A1A1A1 14%,#A1A1A1 85%, #C8C8C8 89%, #C8C8C8, #A0A0A0),             
           linear-gradient(#575757 5%,#828282 10%, ),
            ; 
          background-repeat: no-repeat;
          .top_light{
            width: 30em;
            height: 13em;
            top: 7%;
            left: 7%; 
            // border: 1px solid yellow;
            background:              
            rgba(#fff,.08)            
            ;
            background-repeat: no-repeat;
            position: absolute;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 5em;         
            border-top-right-radius: 5em;             
            &:before{
              content: '';
              position: absolute;
              top: 20%;
              left: 10%;
              // border:2px solid orange;
            border-top-left-radius: 1em;         
            border-top-right-radius: 1em;                    
            width: 26em;
            height: 5em;  
              background:   
    linear-gradient(
to right,
      rgba(#979797,.2), rgba(#979797,.6), rgba(#979797,.7),   rgba(#929292,.2), rgba(#929292,.1)
    )  
    44% 100% / 100% 100%,            
;
              background-repeat: no-repeat;
            }
            &:after{
              content: '';
              position: absolute;
              left: 10%;              
            width: 26em;
            height: 3em;            
              top: 77%;
              background:
    radial-gradient(
       100% 100% at 0% 0%,
      
        rgba($t,.0) 43%,
        rgba(#fff,.17) 52% 
      )
      109%  1.3em / 4em 4em,                   
    radial-gradient(
       100% 100% at 100% 0%,
      
        rgba($t,.0) 42%,
        rgba(#fff,.17) 52% 
      )
      -2em  1.3em / 4em 4em,                  
                linear-gradient( to right,      rgba($t,.0),   rgba($t,.1),
                rgba($t,.07), rgba(#fff,.2), $t),                
                linear-gradient(      rgba(#696969,.4),   rgba(#777777,.3),
                rgba(#696969,.2))
                ;
              background-repeat: no-repeat;
              
            }
          }
          .top_right{
            width: 5em;
            height: 5em;            
            position: absolute;
            left: 95%;
            top: 26.5%;
            z-index: -1;
            background: 
// circle at the end
    radial-gradient(
       100% 100% at 0% 50%,
        rgba($bk,.0) 52%,
        rgba($bk,1) 55%,
      rgba($bk,1) 59%,
        rgba($bk,.5) 62% 
      )
      2em  50% / 5em 12em,               
    radial-gradient(
       100% 100% at 0% 50%,
        rgba($t,.0) 52%,
        rgba(#fff,.5) 55%,
      rgba(#555,.9) 59%,
        rgba($bk,.5) 62% 
      )
      1em  50% / 5em 12em,                          
              linear-gradient(
              #727272, #D3D3D3 25%,
                rgba(#D3D3D3,.8) 30%, #838383 35%, #5C5C5C, rgba(#6E6E6E,.2), rgba(#D3D3D3,.4), #6A6A6A, #535353, #535353
              )
              rgba(#5C5C5C,1)
              ;    
            background-repeat: no-repeat;
          } 
        }
      }
      .middle{
      .middle_back{
        width: 11.5em;
        height: 27.7em;
        top: 114%;
        left: 5%;
        transform: translate(-50%,-0%) ;
        z-index: 5;
        // border: 2px solid $t;
        
        position: absolute;
        transform-origin: top left;
        background: 
// LEFT BLOCKER            
      linear-gradient(
        to right,
        rgba($bk, 1), 
        rgba($bk,1)
      )   
        0em 0% / 3em 15em, 
          rgba(#939393,1)
          ;
        background-repeat: no-repeat;
        overflow: hidden; 
        &:after{
          content: '';
          width: 70%;
          height: 28em;
          top: -2%;
          left: 17%;
          // border: 1px solid orange;
          position: absolute;
        position: absolute;
          transform: rotate(4deg);
        transform-origin: top left;
        background:  
    radial-gradient( 
       100% 100% at 0% 50%,
        rgba($t,0) 50%,
      rgba(#fff,.5) 52%, 
        rgba(#797979,.1) 75%,
      $t
      )
      1.4em  50% / 5em 32em,            
    radial-gradient( 
       100% 100% at 0% 50%,
      $bk,
        rgba($bk,1) 50%,
      
      rgba(#3D3D3D,1) 52%,
      
        rgba(#ababab,.3) 85%,
      )
      0em  50% / 5em 30em,           
          rgba(red,0)
          ;
        background-repeat: no-repeat;
        }
        &:before{
          width: 100%;
          height: 100%;
          content: '';
          position: absolute;
          background: 
// LEFT BLOCKER            
      linear-gradient(
        to right,
        rgba($bk, 1), 
        rgba($bk,1)
      )  
        1em 0% / 1.2em 10em,              
      linear-gradient(
        to right,
        rgba($bk, 1), 
        rgba($bk,1)
      )  
        0em 100% / 1em 100%,                
            
            ;
          background-repeat: no-repeat;
        }

      } 
        .middle_inner{
          width: 22em;
          height: 27.7em;
          top: 114%;
          left: 47%;
          transform:  translate(-50%,-0%) ;
          z-index: 5; 
          position: absolute;  
          background:               
            linear-gradient(
              to right,
              #6A6A6A,
              #929292,
              #A2A2A2,
              #DCDCDC,
            )   
            8% 45% /3em 8em,
            linear-gradient(
              to right,
              #747474,#747474,#A6A6A6
            )  
            40% 40% / 13.3em .12em,            
            linear-gradient(
              to right,
              #DCDCDC,
              #898989,
              #898989,
              #cbcbcb,
              #898989,
              #929292, 
            )  
            46% 49% / 12.5em 5em,                
            radial-gradient( 
              100% 180% at 50% 100%,
              rgba(#fff,.7),
              rgba(#383838,.8) 50%,
              rgba($t,.0) 53%,
            )
            2%  19em / 1em 1em,             
            radial-gradient( 
              100% 180% at 50% 0%,
              rgba(#fff,.7),
              rgba(#747474,1) 50%,
              rgba($t,.0) 53%,
            )
            2%  8% / 1em 1em,               
            linear-gradient(
              to right,
              #929292,
              #A2A2A2,
              #DCDCDC,
              #898989,
              #898989,
              #cbcbcb,
              #898989,
              #929292,
            )  
            2% 26% / 1.3em 60%,              
            linear-gradient(
              rgba(#000,1) 7%,
              rgba(#000,.8) 1%
            )  
            5.2% 0% / .1em 99%,                        
            linear-gradient(
              -50deg,
              rgba($t,.0) 7%,
              rgba(#000,1) 5%,
              rgba(#8F8F8F,1) 1%
            )  
            2% 100% / 1.5em 100%,              
            linear-gradient(
              -50deg,
              rgba($t,.0) 7%,
              rgba(#000,1) 5%,
              rgba(#8F8F8F,1) 1%
            )  
            6.8% 100% / 1.5em 100%,  

            ;
          background-repeat: no-repeat;
          &:after{
            width: 22em;
            height: 27.7em;           
            position: absolute; 
            top:18%;
            left: -6.9em; 
            content: '';
            // transform: rotate(65deg);            
            background: 
              linear-gradient(
                rgba( #222,1) 50%,
                rgba( #222,1) 53% 
              )   
              52% 13% / 1.5em 2.7em, 
              linear-gradient(
                172deg,           
                rgba( $t,.0) 50%,
                rgba( $bk,1) 53%
              )  
              48% 36.8% / 1.4em 4em,                   
              linear-gradient(
                rgba( $bk,1) 50%,
                rgba( $bk,1) 53% 
              )   
              47.8% 42% / 1.5em 1em,              
              linear-gradient(
                to right,
                rgba( $bk,1),rgba( $bk,1)
              )  
              46% 50% / .8em 4em,                
              linear-gradient(
                to right,
                rgba( $bk,1),rgba( $bk,1),
              )  
              46% 3% / .8em 4.5em,              
              radial-gradient(  
                60% 100% at 100% 50%,

                rgba($bk,1) 45%,
                rgba($t,.0) 53%,
              )
              40%  3.5em / 3.2em 2.5em,                
              radial-gradient(  
                100% 100% at 95% -5%,
                rgba(#8f8f8f,1) 45%,
                #6A6A6A,
                rgba($t,0) 53%,
              )
              35%  3.8em / 6em 5em,                   
              $t
              ;
            background-repeat: no-repeat;
          }
          //           BOWL HOLDER
          &:before{
            width: 25em;
            height: 27.7em;           
            position: absolute; 
            top:18%;
            left: -2em;
            content: '';
            border: 2px solid $t;
            background:              
              radial-gradient(  
                100% 30% at 50% 10%,
                rgba($bk,.4) 53%,
                // #272727,
                rgba($t,.3) 57%,
              )
              89%  5.5em / 4.2em .3em,         
              radial-gradient(  
                100% 100% at 50% 0%,
                rgba(#8f8f8f,.3) 93%,
                #272727,
                rgba($t,0) 97%,
              )
              89%  6em / 4.2em 3em,              
              //               bowl holder circle
              linear-gradient(
                to right,     
                rgba(#585858,1),
                rgba( #c4c4c4,1),
                rgba( #c4c4c4,1),
                rgba(#585858,1),
                rgba(#585858,1),
                rgba( #c4c4c4,1),
                rgba( #c4c4c4,1),
                rgba(#585858,1),
              )  
              89% 23% / 4.14em 3em,                
              linear-gradient(
                172deg,           
                rgba( $p,.0) 50%,
                rgba( #8F8F8F,1) 53%
              )  
              13.6% 36.8% / 1.4em 4em,               
              // line under bowl holder               
              //               HHHHH


              linear-gradient(
                170deg,
                rgba( $t,.0) 50%,
                #333333,
                rgba( #555,1) 53%
              )   
              42% 31% / 15em 4.4em,                  

              ;
            background-repeat: no-repeat;
          }
        }         
        .bowl{
          width: 30.1em;
          height: 24em;
          position: absolute;
          top: 135%;
          left: 26.4%;
          background:              

            // MIDDLE BLACK SHADOW

            // BOTTOM BOWL   END            
            // MIDDLE TOP BOWL 
            linear-gradient(
              to right,
              rgba(#000,.8),
              rgba(#eee,.5)
            ) 
            20.5%  80.5% / 29.4em 18em,                  
            linear-gradient(
              to right,
              #8D8D8D,
              rgba(#c2c2c2,.7),
              #8D8D8D,
              #5d5d5d,
              #8D8D8D, 
              rgba(#c2c2c2,.7),
              #8D8D8D,
            ) 
            20.5%  80.5% / 29.4em 18em,         

            // END MIDDLE TOP BOWL  
            // TOP LINE SHADOW            
            linear-gradient(
              rgba(#3a3a3a, .8), 
              #5F5F5F,
              $t
            ) 
            -.5em 10% / 100% .3em,             
            // TOP LINE            
            linear-gradient(
              to right,
              rgba(#3a3a3a, .8), 
              #2E2E2E,
              #5F5F5F 9%,
              #5F5F5F 12%,
              #CECECE 13%,
              #fff,
              #B9B9B9 28%,
              #232323 44%,
              #232323,
              #676767 55%,
              #cecece 65%,
              #CECECE 68%,
              #fff,
              #fff 80%,
              #9E9E9E,
              #292929
            ) 
            -.5em 7.9% / 100% .5em, 

            // TOP LINE END    
            // 2ND TOP LINE    
            linear-gradient(
              to right,
              #222222,
              rgba(#232323, 1)6%,
              #8B8B8B ,
              #8B8B8B,
              #232323 11%,
              #000,
              #F3F3F3 13%,
              #F3F3F3,
              #787878 43%,
              #080808 43%,
              #080808 53.5%,
              #686868 53.5%,
              #afafaf,
              #D3D3D3,
              #D3D3D3 84%,
              #080808 84%,
              #CECECE 85.5%,
              #fff,
              #565656, 
              #313131
            ) 
            20%  10.8% / 29.4em 2.5em,     
            // 2ND TOP LINE END   

            ;
          background-repeat: no-repeat;
          &:after{
            left: -1.8em;
            content: '';
            width: 25em;
            height: 18em;
            position: absolute;  
            top: 5.5em;
            transform: rotate(-24deg);
            background:  
              radial-gradient(
                110% 100% at 100% 50%,
                rgba(orange, .0) 49%,
                rgba($bk, 1) 50%,
              )
              -5.3em 90% / 20em 26.5em,                
              //             LEFT BOWL CIRCLE BLOCKER
              radial-gradient(
                110% 100% at 100% 50%,
                rgba(orange, .0) 49%,
                // rgba(#646F7C, .6) 49%,
                rgba($bk, 1) 50%,
              )
              -5.3em 90% / 20em 26.5em,               
              ;
            background-repeat: no-repeat;
          }    
          .bowl_shadows{
            z-index: 4;
            border: 3px solid rgba(blue,.0);
            width: 100%;
            height: 20em;
            top: 3.5em;
            left: -4.5em;
            position: absolute;
            transform: rotate(-37deg);
            background: 
              //               LEFT BOWL DARK SHADOW
              radial-gradient(
                110% 130% at 100% 50%,
                rgba($t,0) 35%,
                rgba(#232323, .5) 49%,
                // rgba(#646F7C, .6) 49%,
                rgba(blue, .0) 50%,
              )
              -3.3em 60% / 20em 27em,  
              $t
              ;
            background-repeat: no-repeat;
            &:after{
              content: '';
              position: absolute;
              width: 14em;
              height: 25em;
              top: 6em;
              left: 20em;
              border: 2px solid $t;
              transform: rotate(37deg);  
               @include for-phone-only {
background:
                linear-gradient(
                  $bk,
                  $bk 50%,
                  rgba($bk, 1) 52%,

                ) 
                88%  13% / 2.2em 9em,                  
                linear-gradient(
                  to right,
                  $bk,
                  rgba($bk, 1),

                ) 
                20%  0% / 29.4em 1.2em,  
                linear-gradient(
                  to right,
                  $bk,
                  rgba($bk, 1),

                ) 
                91%  9% / 2.2em 4em,  
                linear-gradient(
                  $bk,
                  rgba($bk, 1),

                ) 
                91%  13% / 2.2em 9em,                 
                linear-gradient(
                  to right,
                  $bk,
                  rgba($bk, 1),

                ) 
                100%  0% / 2.2em 10em,                 
                $t
                ;  
                background-repeat: no-repeat;                     
                 
              }                   
              background:
                 
                linear-gradient(
                  to right,
                  $bk,
                  rgba($bk, 1),

                ) 
                20%  0% / 29.4em 1.2em,  
                linear-gradient(
                  to right,
                  $bk,
                  rgba($bk, 1),

                ) 
                91%  9% / 2.2em 4em,  
                linear-gradient(
                  $bk,
                  rgba($bk, 1),

                ) 
                91%  13% / 2.2em 9em,                 
                linear-gradient(
                  to right,
                  $bk,
                  rgba($bk, 1),

                ) 
                100%  0% / 2.2em 10em,                 
                $t
                ;
              background-repeat: no-repeat;              
            }
            &:before{
              content: '';
              position: absolute;
              width: 11.5em;
              height: 23em;
              top: 6em;
              left: 20em;
              border: 2px solid $t;
              transform: rotate(64deg);  
              background:
                
                radial-gradient(
                  110% 100% at 0% 50%,
                  $t 30%,
                  rgba(#000, .4) 45%,
                  rgba(#000, .4) 55%,
                  rgba(blue, .0) 63%,
                )
                2em 25% / 15em 30em,                 

                $t
                ;
              background-repeat: no-repeat;              
            }            
          }
        }
        .bowl_blockers{
          .bowl_left{
            z-index: 4;
            left: -1.8em;
            content: '';
            width: 25em;
            height: 18em;
            position: absolute; 
            top: 5.5em;
            transform: rotate(-24deg);
            background:  
              //             LEFT BOWL CIRCLE BLOCKER
              radial-gradient(
                110% 100% at 100% 50%,
                rgba(orange, .0) 49%,
                // rgba(#646F7C, .6) 49%,
                rgba($bk, 1) 50%,
                $t,$t,$t
              )
              -5.3em 90% / 20em 26.5em,               
              ;
            background-repeat: no-repeat;

          }
          .bowl_right{ 
            z-index: 4;
            border: 2px solid purple;
            left: 12em;
            content: '';
            width: 25em;
            height: 18em;
            border: 1px solid $t;
            position: absolute;  
            top: 9em;
            transform: rotate(25deg);
            background: 
              // BOTTOM RIGHT BLOCKER              
              linear-gradient(
                rgba($bk,1)49%,
                rgba($bk,1) 51%,
              )  
              75% 55% / 5em 7em,                
              //             LEFT BOWL CIRCLE BLOCKER
              radial-gradient(
                110% 100% at 0% 50%,
                rgba(greenyellow, .0) 49%,
                rgba($bk, 1) 50%, 
                rgba($bk, 1) 59%,
                $t 59%,$t,$t,
                rgba($t,.0),
              )
              0em 90% / 27em 28em,  
              $t
              ;

            background-repeat: no-repeat;

          }
        }
        .middle_right{
          width: 40em;
          height: 4.3em;
          position: absolute;
          left:-6.5em;
          top:85%;
          background:   
               linear-gradient(
              rgba($bk,1)49%,
              rgba($bk,1) 51%,
            )  
               96% 5% / 1em 80%,             
               linear-gradient(
              rgba($bk,1)49%,
              rgba($bk,1) 51%,
            )  
               59.4% 100% / 1em 80%,    
            linear-gradient(
              rgba(#000,.2),
              rgba($t,0), 
            )  
                50% 00% / 87% .5em,             
            linear-gradient(
              rgba(#000,.2),
              rgba($t,0), 
            )  
                50% 00% / 87% .5em,            
            linear-gradient(
              rgba(#000,.2),
              rgba($t,0), 
            )  
                50% 00% / 87% .5em,  
            linear-gradient(
              rgba($t,0),
              rgba(#000,.2),
            )  
                18% 100% / 20% .5em,              
            linear-gradient(
              to right,
              rgba(#000,.1), 
              rgba(#000,.1),
            )  
               90% 45% / 13em 1em,            
            linear-gradient(
              to right,
              rgba(#6d6d6d,1), 
              rgba(#8d8d8d,1),
              rgba(#8d8d8d,1),
              rgba(#fff,1) 12%,
              rgba(#666,1),
              rgba(#fff,1) 70%,
              rgba(#fff,1),
              rgba(#626262,1),                     rgba(#727272,1),
            )  
               90% 45% / 13em 1em,
            linear-gradient(
              to right,
              rgba(#6d6d6d,1), 
              rgba(#8d8d8d,1),
              rgba(#8d8d8d,1),
              rgba(#fff,1) 12%,
              rgba(#666,1),
              rgba(#fff,1) 70%,
              rgba(#fff,1),
              rgba(#626262,1),                     rgba(#727272,1),
            )  
               92% 0% / 14em 1.69em,
            linear-gradient(
              -20deg,
              rgba($t,0)49%,
              rgba($t,.2) 51%,
            )  
               69% 0% / 6em .8em,    
            linear-gradient(
              rgba($bk,1)49%,
              rgba($bk,1) 51%,
            )  
               100% 100% / 7.7em 1em,            
            linear-gradient(
              rgba($bk,1)49%,
              rgba($bk,1) 51%,
            )  
               100% 100% / 2.2em 100%,            
          radial-gradient(
              135% 115% at 110% 50%,
              rgba($t,.0) 47%,
            rgba(#000,.4) 49%,
              rgba($t, .0) 51%
            )
            32.2% .4em / 5.5em 9em,             
          radial-gradient(
              100% 100% at 50% 50%,
            rgba($bk,.3) 49%,
              rgba($t, .0) 51%
            )
            19% .4em / 1.5em 9em,    
            linear-gradient(
              rgba($bk,1)49%,
              rgba($bk,1) 51%,
            )  
               52% 100% / 5.3em 82%,              
            linear-gradient(
              rgba($bk,1)49%,
              rgba($bk,1) 51%,
            )  
                0% 0% / 1.8em 100%,            
          radial-gradient(
              135% 110% at 0% 50%,
              rgba($bk,1) 49%,
              rgba($t, .0) 51%
            )
            4% .4em / 5em 7em, 
          radial-gradient(
              135% 90% at 110% 50%,
              rgba($bk,1) 49%,
              rgba($t, .0) 51%
            )
            37.6% .4em / 5em 7em,    
          radial-gradient(
              135% 110% at 0% 50%,
              rgba($bk,1) 49%,
            rgba(#000,.4) 56%,
              rgba($t, .0) 52%,
            )
            5.8% .7em / 5em 7em, 
            linear-gradient(
              to right,
              rgba(#626262,1) 30%,
              rgba(#8d8d8d,1) 40%,
              $t
            )  
                0% 00% /59.7% 100%,   
            linear-gradient(
              rgba(#A9A9A9,1),
              rgba(#A9A9A9,1), 
            )  
               0% 00% / 59.7% 100%,              
            $t
            ;
          background-repeat: no-repeat;
          &:before{
            content: '';
          width: 13.8em;
          height: 8.8em;
          // border: 1px solid rgba(gold,1); 
          position: absolute;
          left:59.5%;
          top:0%; 
          background: 
            linear-gradient(
              to right,
              rgba(#242424,1)5%,
              #D4D4D4,
              #D4D4D4 15%,
              rgba(#696969,1) 51%,
              #D4D4D4,#D4D4D4,
              rgba(#242424,1),
            )  
               17.8% 88% / 1.5em 2em,              
          radial-gradient(
              250% 50% at 50% 100%,
            rgba($bk,0) 35%,
            #383838 50%,
              rgba($t, 0) 52%
            )
            15% 3.7em /2.5em 3em,             
          radial-gradient(
              250% 50% at 50% 100%,
            rgba($bk,1) 48%,
              rgba($t, .0) 52%
            )
            15% 3.5em /2.5em 3em,               
            linear-gradient(
              rgba($bk,1)49%,
              rgba($bk,1) 51%,
            )  
               100% 90% / .5em 100%,                                
          radial-gradient(
              100% 100% at 50% 50%,
            #383838,
            rgba(#585858,1) 48%,
              rgba($t, .0) 51%
            )
            50% 2em /13em 1em,             
          radial-gradient(
              210% 90% at 50% 100%,
            rgba($bk,.0) 48%,
            #585858,
              rgba($t, .0) 52%
            )
            95% -.6em /10em 5em,               
          radial-gradient(
              210% 90% at 50% 100%,
            rgba($bk,.0) 48%,
            #585858,
              rgba($t, .0) 52%
            )
            97% -1.6em /13em 5.5em, 
            linear-gradient(
              rgba($bk,1)49%,
              rgba($bk,1) 51%,
            )  
               61% 69.6% / .5em 50%,            
          radial-gradient(
              105% 100% at 00% 0%,
              rgba($t,.0) 49%,
              rgba($bk, 1) 51%
            )
            62% 3.2em / 2em 2.5em, 
            
            linear-gradient(
              to right, 
              rgba($bk,1) 5%,
              rgba($bk,1) 13%,
            )  
               46% 60% / 4.1em 1.5em,            
            linear-gradient(
              to right, 
              rgba(#383838,1) 5%,
              rgba(#383838,1) 13%,
            )  
               23% 34% / 50% .5em,             
            linear-gradient(
              to right, 
              rgba(#333333,1) 5%,
              rgba(#D3D3D3,1) 13%,
              rgba(#828282,1) 18%,
              rgba(#545454,1)24%, 
              rgba(#545454,1)75%, 
              rgba(#D3D3D3,1)81%,
              rgba(#D3D3D3,1) 84%,
              rgba(#333333,1)
            )  
               23% 48% / 50% 3em,             
            $t
            ;
          background-repeat: no-repeat;            
          }
        &:after{
            content: '';
          width: 13.8em;
          height: 9em;
          // border: 1px solid rgba(gold,1); 
          position: absolute;
          left:59.5%;
          top:6%; 
          background: 
            linear-gradient(
              to right,
              rgba(#242424,1)5%,
              #D4D4D4,
              #D4D4D4 15%,
              rgba(#696969,1) 51%,
              #D4D4D4,#D4D4D4,
              rgba(#242424,1),
            )  
               15% 120% / 2.5em 37%, 
          
            ;
          background-repeat: no-repeat;
        }  

        }    
      }
      .btm{
        z-index: 4;
        width: 46.5em;
        height: 13em;
        position: absolute;
        top: 42.5em;  
        left: -6em;         
        background:   
                 linear-gradient(
                  $bk,
                  rgba($bk, 1) 52%,

                ) 
                100%  0% /50% 1em,                   
 
            radial-gradient(
               90% 100% at 50% 50%,   
                rgba(#6e6e6e,.8),
                rgba(#808080,.8),
                rgba(#b1b1b1,.8) ,
              //   rgba(blue,.0),
              $t,$t,$t
              ) 
             25%  50% /6em 9em,           
// RIGHT BIG CIRCLE        
          radial-gradient(
              100% 100% at 50% 50%,
            rgba(#808080,.6),
              rgba(#5c5c5c,.7) 45%, 
              rgba($t, .0) 52% 
            )
            80% 4em / 15.5em 3.5em,
          radial-gradient(
              100% 100% at 50% 20%,
            rgba($p,0),
              rgba(#5c5c5c,.4) 45%, 
              rgba($t, .0) 52% 
            )
            88% 4.55em / 31em 5.5em,             
          radial-gradient(
              120% 100% at 50% 0%,
            rgba($p,.0) 44%,
              rgba(#8d8d8d,.7) 48%, 
              rgba($t, .0) 51% 
            )
            82% 5.5em / 18em 3.5em, 
          
          radial-gradient(
              100% 100% at 50% 90%,

            rgba(#808080,.1),
              rgba(#5c5c5c,.4) 45%, 
              rgba($t, .0) 52% 
            )
            80% 1.05em / 29em 3.5em,            
            linear-gradient(
              -52deg,
              rgba($t,.0) 49%,
              rgba(#000,.9) 50%,
              rgba($t,.0) 51%
            )  
                28% 00% / 4em 2.1em,
          radial-gradient(
              100% 100% at 0% 100%,
            $t 45%,
              rgba($t,.2) 49%,
              rgba($t, .0) 51%
            )
            30% .5em / 5em 3em,           
          radial-gradient(
              100% 100% at 0% 100%,
              rgba($t,0) 49%,
              rgba($bk, 1) 51%
            )
            32.7% -.45em / 1.5em 1em,           
            linear-gradient(
              45deg,
              rgba($bk,5) 49%,
              rgba($bk,1) 49%
            )  
                40% 00% / 4em 2em,           
            linear-gradient(
              45deg,
              rgba($t,0) 49%,
              rgba($bk,1) 49%
            )  
                34% 00% / 2em 2em,           
          radial-gradient(
              100% 100% at 50% 50%,
              rgba($bk,1) 49%,
              rgba(red, 0) 51%
            )
            39% 1% / 3em 2.6em,           
            linear-gradient(
              to right,
              rgba($bk,1),
              rgba($bk,1)
            )  
                100% 100% / 100% 1em,            
            linear-gradient(
              to right,
              rgba($t,.2),
              rgba($t,.2)
            )  
                61% 61% / 17em .7em,           
          radial-gradient(
              100% 100% at 0% 50%,
              rgba($t,.0) 49%,
              rgba($bk, 1) 51%
            )
            109% 54% / 10em 10em,
            radial-gradient(
               100% 95% at 0% 50%,
                rgba($bk,.4) 50%, 
                rgba($t,.0) 61% 
              )
             32em 99% / 22em 4.9em,   
          radial-gradient(
              122% 100% at 0% 10%,
            $t,$t, $t,
              rgba($t,.3) 49%,
              rgba($t, .0) 51%
            )
            35em 65% /20em 6em,          
            linear-gradient(
              to right,
              $bk,
              $bk
            )  
                63% 0% / 17em 2.6em,   
       
            linear-gradient(
              rgba(#525252,.1),
              rgba(#525252,.1) 7%,
            )  
                50% 0% / 100% 7.7em, 
            linear-gradient(
              to right,
              rgba(#525252,1),
              rgba(#b4b4b4,1) 7%,
              rgba(#C9C9C9, 1)9%,
              rgba(#fff, 1) 13%,
              rgba(#C9C9C9,1),
              rgba(#C9C9C9,1),
            )  
                50% 95% / 100% 100%,            
          ;

        background-repeat: no-repeat; 
        &:after{
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          top: -2em;
          border: 2px solid $t;
          transform: rotate(-10deg);
          background:
            radial-gradient(
               90% 126% at 100% 0%,   
                rgba($t,0),$t,$t 47%,
                rgba(#808080,.4) 50%,
              $t 55%
              ) 
             30%  0 /8em 6em,              
            
            ;
          background-repeat: no-repeat;
        }
        .btm_top{
          width: 46.5em;
          height: 8em;
          position: absolute;
          transform: rotate(3deg);
          top: -.5em;
          background: 
  
            linear-gradient(
              to right,
              $bk,
              $bk
            )   
                100% 0% / .8em 100%,             
          radial-gradient(
              100% 95% at 0% 100%,
              rgba($t,.0) 49%,
              rgba($bk, 1) 51%,
            )
            34.5em -.6em / 21em 6em,   
            $t
            ;
          background-repeat: no-repeat;
        }
        .btm_btm{
          width: 46.5em;
          height: 5em;
          position: absolute;    
          top: 55%;
          background:   
            linear-gradient(
              rgba($bk,1) 49%,
              rgba($bk,1) 50%,
            )  
                100% 0em / .7em 100%,            
            linear-gradient(
             182deg,
              rgba($t,.0) 49%,
              rgba($bk,1) 50%,
            )  
                50% 1.5em / 100% 100%,                            
            ;
          background-repeat: no-repeat;
          &:after{
            width: 6em;
            height: 5.5em;
            content: '';
            position: absolute;
            transform: rotate(10deg);
            border: 2px solid $t;
            left: 0em;
            background:   
            radial-gradient(
               145% 100% at 50% 0%,
                rgba($t,.0) 55%,
                rgba($bk,1) 50% 
              )
              -.5em  00% / 9em 5em,  
              $t
              ;
            background-repeat: no-repeat;
            
          }
          &:before{
            width: 10em;
            height: 116%;
            content: '';
            position: absolute;
            transform: rotate(-8deg);
            // border: 2px solid yellow;
            left: 80%; 
            top: 1em;
            background: 
             
              
            radial-gradient(
               90% 100% at 50% 0%,
                rgba($t,.04) 49%,
                rgba($bk,1) 50% 
              )
             100%  5% /15em 100%,                 
              
              ;
          }
          
          .btm_btm_left_shadows{
            z-index: 9em;
            top: -10em;
            width: 45em;
            height: 15em;
            position: absolute;   
            border:2px solid $t;
            background:             
             
            radial-gradient(
               90% 100% at 100% 50%,
                rgba($t,.0) ,$t,
              rgba($bk,.3),
              $t
              )
             -1em 5em / 10em 2.5em,     
            radial-gradient(
               90% 100% at 50% 50%,
                rgba(#666,.6) ,
                rgba(#848484,.6),
              $t,
              $t
              )
             12% 5em / 9em 2.5em,                  
            radial-gradient(
               90% 100% at 50% 50%,
                rgba(#666,.6) ,
                rgba(#848484,.6),
              $t,
              $t
              )
             0em  66% /12em 2.7em,                
            radial-gradient(
               90% 100% at 50% 50%,
                rgba(#666,.6) ,
                rgba(#848484,.6),
              $t,
              $t
              )
             0em  66% /12em 2.7em, 
            radial-gradient(
               90% 100% at 50% 50%,
                rgba(#666,.5) ,
                rgba(#848484,.5),
              $t,
              $t
              ) 
             5em  64% /11em 2.5em,               
            radial-gradient(
               90% 100% at 50% 50%,
                rgba(#666,.5) ,
                rgba(#848484,.5),
              $t,
              $t
              )
             5em  64% /11em 2.5em,             
               
            radial-gradient(
               90% 100% at 100% 50%,
              rgba(#808080,1),
                rgba(#b1b1b1,1) ,
                rgba(blue,.0) 
              )
             -0em  90% /17em 3em,
            radial-gradient(
               90% 100% at 100% 50%,
                rgba(#fff,1) 60%,
                rgba(#707070,.8) ,
              $t
              )
             -1em  90% /18em 3em,                 
              
              $t
              
              ;            
            background-repeat: no-repeat;
            &:after{
              content: '';
            width: 43em;
            height: 15em;
            position: absolute;   
            border:2px solid $t;   
              background:
                 linear-gradient(
                  $bk,
                  rgba($bk, 1) 52%,

                ) 
                0%  0% / 2.2em 3.8em,                          
                 linear-gradient(
                  $bk,
                  rgba($bk, 1) 52%,

                ) 
                37%  0% / 2.2em 2.7em,               
            radial-gradient(
               90% 100% at 50% 50%,   
                rgba(#6e6e6e,1),
                rgba(#808080,1),
                rgba(#b1b1b1,1) ,
                rgba(blue,.0),
              $t,$t,$t
              )
             50%  90% /35em 3.8em,     
            radial-gradient(
               90% 100% at 50% 50%,   
                rgba(#6e6e6e,1),
                rgba(#808080,1),
                rgba(#b1b1b1,1) ,
                rgba(#fff,.2),
              $t,$t,$t,$t
              )
             50%  90% /38em 3.6em,                                     
                $t
                ;
                background-repeat: no-repeat;
              
            }
          }
        }
        .btm_corners{
          .btm_left{
            z-index: 10;
            width: 13em;
            height: 13em;
            position: absolute;
            border: 2px solid $t;
            left: -1.4em;
            background:                          
            linear-gradient(
              rgba($bk,1) 49%,
              rgba($bk,1) 50%,
            )  
                0% 0em / 2.8em 2em,                
            radial-gradient(
               50% 100% at 50% 0%,
                rgba($bk,1) 49%,
                rgba($t,.0) 50% 
              )
             -7em  1em /14em 100%,               
              rgba($p,.0)
              ;
            
            background-repeat: no-repeat;
            &:after{
              transform: rotate(4deg);
              width: 100%;
              height: 100%;
              content: '';
              border: 1px solid $t;
              position:absolute;
              background: 
                linear-gradient(
                  $bk,
                  rgba($bk, 1) 52%,

                ) 
                0%  0% / 2.2em 2.7em,                          
            radial-gradient(
               50% 100% at 50% 0%,
                rgba($bk,1) 49%,
                rgba($t,.0) 50% 
              ) 
             -7em  1em /14em 100%,  
                $t
                ;
              background-repeat: no-repeat;
            }
            &:before{
              transform: rotate(-1deg);
              width: 100%;
              height: 100%;
              content: '';
              border: 1px solid $t;
              position:absolute;
              background: 
            linear-gradient(
              6deg,
              rgba($bk,1) 49%,
              rgba(blue,.0) 50%,
            )  
                65% 88% / 2.8em 2em,                 
            radial-gradient(
               100% 120% at 100% 50%,
                rgba($t,0) 49%,
                rgba($bk,1) 50% 
              )
             -.6em 60%/4em 4em,                 
            radial-gradient(
               130% 83% at 100% 0%,
                rgba($t,.0) 49%,
                rgba($bk,1) 50% 
              )
             -5em  8em /17em 7em, 
                ;
              background-repeat: no-repeat;
            }            
          }
        }
      }
    }
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console