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="camera">
  <div class="back"></div>
  <div class="top">
    <div class="flash_top_left_container">
      <div class="flash_top_left_outer">
        <div class="flash_top_left_inner">
          <div class="flash_top_left_gradient"></div>
        </div>
      </div>
    </div>
    <div class="onOffbtn">
      <p><i class="fas fa-power-off"></i></p>
    </div>
    <div class="under_power">
      <div class="inner"></div>
    </div>
    <div class="red_on_off_container">
      <div class="btn_container">
        <div class="red_btn"></div>

      </div>
    </div>
    <div class="lens_container">
      <div class="lens_inner_1">
        <div class="lens_inner_2">
        <div class="lens_inner_3">
<!--            rings-->
          <div class="lens_inner_4">
          <div class="inner_rings_1">
          <div class="inner_rings_2">
          <div class="inner_rings_3">
          <div class="inner_rings_4">
          <div class="inner_rings_5">
            
          </div>            
          </div>              
          </div>            
          </div>
          </div>
          </div>
        </div>
        </div>
      </div>
    </div>
    <div class="under_lens">
      <div class="inner"></div>
    </div>  
    <div class="flash_right">
      <div class="flash_right_inner">
        <div class="inner_2">
          <div class="inner_3">
            <div class="hole">
              
            </div>
          </div>
        </div>
      </div>
      <div class="shadows_middle"></div>
      <div class="shadows_left"></div>
      <div class="shadows_left_corner"></div>
      <div class="shadows_right"></div>
      <div class="shadows_right_corner"></div>        
    </div>
    
    <div class="toggle_under_flash_container">
      <p class="minus">
        <i class="fas fa-minus"></i>
      </p>      
      <div class="toggle_under_flash">
         <div class="toggle"></div>
      </div>
      <p class="plus">
        <i class="fas fa-plus"></i>
      </p>          
    </div>
    <div class="toggle_blocker"></div>
    <div class="text">
      <h1>One</h1>
      <h1>Step</h1>
      <h1 class="num">2</h1>
    </div>    
  </div>

  <div class="bottom">
    <div class="top_btm">
      <div class="left"></div>
      <div class="middle">
        <div class="middle_main"></div>
        <div class="switch">
          <div class="switch_btn"></div>
        </div>
        
      </div>
      <div class="right"></div>
    </div>
    <div class="btm">
<!--       <div class="mouth"></div> -->
      <h1>Polaroid</h1>
      <h1>I-TYPE CAMERA</h1>
      <div class="logo"></div>  
      <div class="under_btm"></div>
  <div class="corners">
    <div class="corner_left"></div>
    <div class="corner_right"></div>
  </div>      
    </div>
  </div>
</div>
              
            
!

CSS

              
                $t: transparent;
$bk: #232323;
$top:#e8e6e6;

@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

* {
  box-sizing: border-box;
}
body {
  background: $bk;
  font-size: 1vmin;
  .camera {
    font-size: 1.15vmin;
    width: 81.5em;
    height: 67em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
.back{
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;     
    width: 77em;
    height: 67em;
      position:absolute;
      content: '';
    top:-.6em;
    left: 50.1%;
    transform:translate(-50%,0%);
      background:
    linear-gradient(
      to top,
       rgba(#000,.15),
     rgba(#000,.1),
    )
   0% 100% / 100% 100%,            
        //left   
    linear-gradient(
      to right,
       rgba(#000,.2),
     rgba(red,.0),
    )
   0% 100% / 7% 100%,            
        #E4E0E1
        ;
      background-repeat: no-repeat;    
  }    
    .top{
      width: 76em;
      height: 41.5em;
      margin: auto;
      background-color: $top;
      border-top-right-radius: 5em;
      border-top-left-radius: 5em;
      position: relative;
      .flash_top_left_container{
        
        position: absolute;
        width: 15em;
        height:25em;
        top: 2.7em;
        left:2.5em;
        background-repeat: no-repeat;
        .flash_top_left_outer{
      border-right: .3em solid #A6A89E;
      border-bottom: .3em solid #A6A89E;
      border-left: .3em solid #A6A89E;
      border-top: .3em solid #5B5D5C;
        box-shadow:
    0 0 0 .1em rgba(#282828, .7),
    0 0 0 .2em rgba(#000, .5)
          ;          
          width: 13em;
          height: 24em;
          background:
          radial-gradient(
              150% 100% at 50% 50%,
            rgba(#0e0f0f,1),
            rgba(#2b302e,.3) ,
            )
            50% -7em / 100% 50%,  
          radial-gradient(
              100% 100% at 50% 50%,
            rgba(#0e0f0f,1) ,
            rgba(#2b302e,.3),
            )
            -5em 15em / 100% 50%,          
            
            #262926;
          background-repeat: no-repeat;
          border-radius: 2.5em;
          position: absolute;
          left:50%;
          transform: translatex(-50%);
          .flash_top_left_inner{
            box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
            width: 90%;
            height:95%;
            @include center;
            border-radius: inherit;
            background:
            linear-gradient(
              to bottom,
               rgba(#f3f3f3,.7) 60%,
             rgba(#a5a5a5,1) 65%
            )
           100% 6% / 100% .4em,            
              #b2b2b2;
            &:after{
              content: '';
              width:62%;
              height:100%;
              @include center;
              background:                
            linear-gradient(
              to bottom,
              rgba(#505050,.4),
              rgba(#f3f3f3,.3) 60%,
             rgba(#828282,.2),
            )
           5% 100% / 25% 95%,                 
            linear-gradient(
              to bottom,
              rgba(#505050,.4),
              rgba(#505050,.3) 60%,
             rgba(#828282,.2),
            )
           85% 100% / .6em 95%,                  
                
            linear-gradient(
              to right,
              rgba(#505050,1),
               rgba(#a5a4a4,1),
              rgba(#505050,1),
              rgba(#a5a4a4,1),
            )
           25% 5% / 100% .5em,  
          radial-gradient(
              100% 100% at 50% 100%,
            rgba(#a5a4a4,1) 49%,
            rgba($t,.0) 50%,
            )
            56% -.5em / 3em 2em,                
            linear-gradient(
              to right,
               rgba(#a5a4a4,.7) 60%,
             rgba($t,0)
            )
           30% 100% / .2em 93.5%,                  
            linear-gradient(
              to right,
               rgba(#a5a4a4,.7) 60%,
             rgba($t,0)
            )
           35% 100% / .2em 93.5%, 
            linear-gradient(
              to right,
               rgba(#a5a4a4,.7) 60%,
             rgba($t,0)
            )
           75% 100% / .2em 93.5%,                 
            linear-gradient(
              to right,
               rgba(#a5a4a4,.7) 60%,
             rgba($t,0)
            )
           80% 100% / .2em 93.5%,                 
            linear-gradient(
              to right,
               rgba(#a5a4a4,.7) 60%,
             rgba($t,0)
            )
           85% 100% / .2em 93.5%,                   
            linear-gradient(
              to right,
               rgba(#828282,.7) 40%,
              rgba(#505050,1),
              rgba(#505050,1),
             rgba(#828282,.7) 60%,
            )
           60% 100% / .6em 97.5%,                  //c5c5c5
            linear-gradient(
              to right,
              #d6d6d6,
               rgba(#c5c5c5,.3) 21%,
              rgba(#e6e6e6,1) 22%,
              rgba(#e6e6e6,1) 24%,
              rgba(#c5c5c5,1),
             rgba(#c5c5c5,.7) 80%,
              rgba(#b0afb0,.8) 81%,
              rgba(#b0afb0,.8) 90%,
              rgba(#c5c5c5,.7) 91%
            )
           60% 100% / 100% 97.5%,                    
                #dadada
                ;
              background-repeat: no-repeat;
            }
            &:before{
              content: '';
              width:100%;
              height:66%;
              @include center;
              top:54%;
              background: 
            linear-gradient(
              to bottom,
               rgba(#545555,.7) 70%,
             rgba(#a5a5a5,1)
            )
           100% 6% / 100% .4em,                  
                #202020;
              
            } 
            .flash_top_left_gradient{
              width: 100%;
              height:100%;
              border-radius: inherit;
              background: 
            linear-gradient(
              to bottom,
              rgba(#6d6e6c,.1),
              rgba(red,.0) 60%,
             rgba(#6d6e6c,.2),
            )
           5% 100% / 100% 20%,                  
            linear-gradient(
              to bottom,
              rgba(#6d6e6c,.6),
              rgba(red,.0) 60%,
             rgba(#6d6e6c,.4),
            )
           5% 100% / 100% 100%,                   
                ;
            }
          }
        }
      }
      .onOffbtn{
        box-shadow: 0px 0px .3em rgba(#3f4242,0.6), 0px 0px .3em rgba(#3f4242,0.6);
        border: .3em solid rgba(#404546,1);
        width:4em;
        height: 4em;
        border-radius:50%;
        position:absolute;
        left:26%;
        top:9.5%;
        background:         
          #d9e4e6;
        background-repeat: no-repeat;
        p{
          font-size: 2.5em;
          color:#e7997a;
          @include center;
          transform: translate(-50%,-50%) rotate(-30deg);
        }
      }
    .under_power{
      width:4.4em;
      height:4.4em;
      position: absolute;
      top: 30%;
      left:29%;
      border-radius: 50%;
      transform: translate(-50%,-50%);
      border-left:2px solid rgba(#fff,.5);
      border-top:2px solid rgba(#fff,.4);  
      .inner{
        width:4.3em;
        height:4.3em;
        border-radius: inherit;
        position: absolute;
        @include center;
        background:
        radial-gradient(
          100% 100% at 50% 50%,
           rgba(#fff,.55) 10%,
          rgba(#fff,.1) 12%,
          rgba(#000,.0) 21%
        )
          50% 0% / 100% 100%,          
        radial-gradient(
          100% 100% at 50% 50%,
           rgba(#000,.3),
          rgba(#000,.4) 50%,
          rgba(red,.8) 51%
        )
          50% 0% / 100% 100%,          
        radial-gradient(
          100% 100% at 50% 50%,
           rgba(#3f363f,.5),
          rgba(#161316,1) 50%,
          rgba(red,.0) 51%
        )
          50% 50% / 85% 85%,           
        radial-gradient(
          100% 100% at 50% 50%,
           rgba(#3f363f,.5),
          rgba(#161316,1) 50%,
          rgba(red,.0) 51%
        )
          50% 50% / 85% 85%,          
          #4E4E50;
        background-repeat: no-repeat;
      }
    }      
      .red_on_off_container{
        width: 10em;
        height:10em;
        // border:1px solid red;
        border-radius: 50%;
        position: absolute;
        top: 73.8%;
        left:2.8%;
        background: linear-gradient(145deg, #f4f0f1, #cdcacb);
        .btn_container{
          width:85%;
          height: 85%;
          background: #2e1111;
          @include center;
          border-radius: inherit;
          .red_btn{
            width: 93%;
            height:93%;
            border-radius: inherit;
            @include center;
            background:
    radial-gradient(
        100% 50% at 50% 100%,
      rgba(#ea8f95,.6) 43%,
      rgba(#ea8f95,.6) 50%,
      $t 53%
      )
      50% 1.5em / 150% 100%,                
    radial-gradient(
        100% 100% at 50% 50%,
      #bd1b2f 43%,
      rgba(#ea8f95,.6) 50%,
      rgba(gray,.0) 51%,
      $t 65%
      )
      50% 50% / 98% 110%,                
              #bd1b2f;
            background-repeat: no-repeat;
          }
        }

      }
      .lens_container{
          width: 31em;
          height:31em;
        border-radius:50%;
        @include center;
        left:52.5%;
        top:41.5%;
        background:
//           shading
// top
    -webkit-radial-gradient(
      50% 0%,
      18% 50%, 
      rgba(#bc0a22, 0.5) 0%,
      rgba(#bc0a22, 0) 100%
    ),          
//           left 
    -webkit-radial-gradient(
      0% 30%, 100% 37%, 
      rgba(255, 255, 255, 0.5) 0%, 
      rgba(255,255,255,0)100%),
//     right white shadow
    -webkit-radial-gradient(100% 70%, 10% 62%, 
      rgba(255, 255, 255, 0.3) 0%, 
      rgba(255,255,255,0)
      100%),          
    radial-gradient(
        100% 100% at 50% 0%,
     $t 45%,
        rgba(#c53146,.8) 50%,
      rgba(#bb0b22,1) 51%
      )
      50% 14em / 105% 100%,            
          #bb0b1e;
          ;
        background-repeat: no-repeat;
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.53);
      ;           
          &:after{
            content: '';
              width: 100%;
            height: 100%;
            position:absolute;
            @include center;
            border-radius: inherit;
            background:
              //         full round shading
    radial-gradient(
        100% 100% at 50% 50%,
      $t 42%,
      rgba(#f2f2f2,.02) 44%,
      rgba(#f2f2f2,.01) 47%,
      rgba(#000,.2) 48%,
        rgba(blue,.0) 51%,
      rgba(red,0)
      )
      50% 50% / 100% 100%, 

//         right shading
    radial-gradient(
        100% 100% at 0% 50%,
      $t 42%,
      rgba(#f2f2f2,.08) 44%,
      rgba(#f2f2f2,.05) 47%,
      rgba(#000,.2) 48%,
        rgba(blue,.0) 51%,
      rgba(red,0)
      )
      15.6em 50% / 100% 110%,               
              ;
          }        
        .lens_inner_1{
          width: 86%;
          height:86%;
          border-radius: inherit;
          border:1px solid #000;
          @include center;
          top:48%;
          background:
            #232424;
          background-repeat: no-repeat;
          &:after{
            border-radius: inherit;
            width:100%;
            height:100%;
            content: '';
            @include center;
            background:
//               lens shading 
//     top white shadow    
    -webkit-radial-gradient(
      50% 0%,
      68% 50%, 
      rgba(#000, 0.5) 0%,
      rgba(255, 255, 255, 0) 100%
    ),     
//     bottom
    -webkit-radial-gradient(
      50% 100%, 42% 50%, 
      rgba(255, 255, 255, 0.1) 0%, 
      rgba(255,255,255,0)
      100%),              
              ;
background-repeat: no-repeat;            
          }
          .lens_inner_2{
            width: 97%;
            height:97%;
            border-radius: inherit;
            background:pink;
            @include center;
            // top:50%;
            background:#474949;
            &:after{
              width:100%;
              height:100%;
              content: '';
              position: absolute;
              border-radius: inherit;
              background:
                //     left white shadow
    -webkit-radial-gradient(
      0% 30%, 50% 37%, 
      rgba(255, 255, 255, 0.2) 0%, 
      rgba(255,255,255,0)100%),
                ;
              background-repeat: no-repeat;
            }
            .lens_inner_3{
              width: 95%;
              height:95%;
              border-radius: inherit;
              background:pink;
              @include center;
              // top:50%;
              background:#888888;
//               rings
              .lens_inner_4{
                width: 95%;
                height:95%;
                border-radius: inherit;
                background:pink;
                @include center;
                background:
            repeating-radial-gradient(
              circle at 50%, 
              #3F3F43 3px,
              #4b4b4b 4px, 
              #868686 7px)            
            
            ;                  
                background-repeat: no-repeat;
                .inner_rings_1{
                  width: 16.5em;
                  height: 16.5em;
                  background:       radial-gradient(
        100% 100% at 50% 50%,
        rgba(#232323,1) 10%,
      rgba(#232323,.7) 40%,
      rgba(#232323,.8)70%,
      )
      50% 50% / 100% 100%;
            background-repeat: no-repeat;
                  @include center;
                  top: 52%;
                  border-radius: 50%;
                  border: 5px solid #232323;
                  .inner_rings_2{
                    width: 99%;
                    height: 97%;                               border-radius: inherit;
                    background:#1C1B20;
                    @include center;
                    top:51%;
                    .inner_rings_3{
                    width: 95%;
                    height: 95%;
                    border:0px solid #1C1B20;
                    border-radius: inherit;
                    border-left:2px solid #7C897C;
                    border-right: 2px solid #7C897C;
                                    background:
              linear-gradient(
                -20deg,
              #28272E 49%,
                $t 51%,
              )
              50% 100% / 100% 5.5em,                   
              radial-gradient(
                  100% 110% at 100% 50%, 
                // $t 30%,
                rgba(#396440,0)  49%,
                rgba(#396440,.6) 50%
                )
              -2.5em 50% / 70% 95%,                          
              radial-gradient(
                  100% 110% at 00% 50%, 
                  rgba($t,.0) 45%,
                rgba(#396440,.6) 47%
                )
                6em 50% / 70% 95%,                 
                rgba(#28272E,1)
                ;
                      background-repeat: no-repeat;
              .inner_rings_4{
              width: 82%;
              height: 82%;
              border:1px solid #1C1B20;
                border-left: none;
                border-right: none;
                // border:1px solid red;
              border-radius: inherit;
                @include center;
                top:51%;
              background:
              radial-gradient(
                  100% 110% at 100% 50%, 
                // $t 30%,
                rgba(#396440,0)  49%,
                rgba(#396440,.6) 50%
                )
              -3.4em 50% / 70% 95%,                        radial-gradient(
                  100% 110% at 00% 50%, 
                  rgba($t,.0) 45%,
                rgba(#396440,.6) 47%
                )
                7em 50% / 70% 95%,  
                rgba(#171417,1)  
                ;
                        background-repeat: no-repeat;           

                .inner_rings_5{
                  width:80%;
                  height:80%;
                  border:1px solid #110f10;
                  border-radius: inherit;
                  position:absolute;
                  top:50%;
                  left:50%;
                  
                  transform: translate(-50%,-50%);
                  background:
                    
               radial-gradient(
                  100% 190% at 100% 50%, 
                 rgba($t,0)20%,
                 rgba(#0d202a,1) 23%,
                  rgba(#0d202a,1) 49%,
                rgba(pink,.5) 51%
                )
                -2.5em 50% /50% 80%,        
                    #110f10
                    
                    ;
                  background-repeat: no-repeat;
                &:after{
                  border:2px solid #000;
                    border-left:1px solid rgba(#7C897C,.7);
                    border-right: 1px solid rgba(#7C897C,.7);
                                 
                  width: 85%;
                  height:85%;
                  content:'';
                  position: absolute;
                  border-radius: inherit;
                  position:absolute;
                  top:50%;
                  left:50%;
                  transform: translate(-50%,-50%); 
                  background:
               radial-gradient(
                  100% 100% at 50% 50%, 
 
                 rgba( #110f10,1) 23%,
                  rgba( #110f10,1) 49%,
                rgba(#110f10,.2) 51%
                )
                50% 50% /75% 80%,                     
                  linear-gradient(
                    -30deg,
                  $t 40%,
                    #110f10 41%,
                    #110f10 61%,
                    $t 60%
                  )
                  100% 13% / 5.5em 3em,                     
                  linear-gradient(
                    30deg,
                  $t 40%,
                    #110f10 41%,
                    #110f10 61%,
                    $t 60%
                  )
                  0% 20% / 5.5em 3em,                     
                  linear-gradient(
                    to left,
                    rgba(#0d202a,.5),
                    rgba(#4ca0b4,.6) 75% 
  
                  )
                  5.5em 50% / 3em 5em,                    
                  linear-gradient(
                    to right,
                    rgba(#0d202a,.5) ,
                    rgba(#4ca0b4,.4) 75%
  
                  )
                  -1em 50% / 3em 5em,                                 
                    
               radial-gradient(
                  120% 100% at 50% 100%, 
                 rgba($t,0)20%,
                 rgba(#0d202a,1) 23%,
                  rgba(#0d202a,1) 49%,
                rgba($t,0) 51%
                )
                50% -2em /120% 50%,    
                            
                    #110f10
                    
                    ;
                  background-repeat: no-repeat;                  
                }                  
                }

                      }
                    }                    
                  }
                }
              }               
            }              
          }          
        }
        }
.under_lens{
      border-radius: 50%;
      width: 4.2em;
      height: 4.2em;
      border-bottom: 3px solid #323232;
      border-right: 1px solid rgba(#323232,.6);
box-shadow: 0 .2em .4em rgba(0,0,0,0.16), 0 .2em .4em rgba(0,0,0,0.23);  
    
      position: absolute;
      top:72%;
      left:72%;
      transform: translate(-50%,-50%);
      background:      
   
        #323232;
      background-repeat: no-repeat;
      .inner{
        width: 72%;
        height:72%;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        // @include center;
        border-radius: inherit;
        border:2px solid #808080;
        // background:#060606;
        background:
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#060606,1) 48%,
      rgba(#B5B4B8,.2) 55%
      )
      50% 50% / 90% 95%,          
          #B5B4B8;
        background-repeat: no-repeat;
      }
    }      
      .flash_right{
        width:16em;
        height:15.5em;
        border:1px solid black;
        position: absolute;
        @include center;
        left:86.2%;
        top:24%;
        border-radius: 3em;
      border-top: 1px solid #858488;
      border-left: 1px solid #858488;
      border-right: 2px solid #181818;
      border-bottom: 1px solid #858488;        
      box-shadow: 0px -3px 1px rgba(#181818, 0.75), 
        inset 0px 0px 15px 0px rgba(#181818,.4),
        inset 0px 0px 6px 0px rgba(#fff,.4)
        ;    
        overflow: hidden;
        &:before{
          z-index: 3;
          width: 100%;
          height: 100%;
          content: '';
          position: absolute;
          background: 

    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#000,.5) 48%,
      rgba($t,.0) 55%
      )
      50% -7em / 100% 95%,             
    linear-gradient(
      to right,
    rgba(#000,.4) 49%,
      rgba(#000,.4) 51%,
    )
    100% 50% / 12% 95%,              
            ;
          
          background-repeat: no-repeat;
        }        
        .flash_right_inner{
          width: 83%; 
          height:81%;
          border-radius: inherit;
          position: absolute;
          top: 55%;
          left:47%;
          transform: translate(-50%,-50%);
          border: 2px solid #D2D2D2;
          background:            
            linear-gradient(
            -30deg,
              #3D3C40,
              #A4A4A4,
              #CACACA,
            ); 
          &:before{
            content: '';
            width: 95%;
            height:98%;
            @include center;
            background:
               
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#131313,1) 50%,
      rgba($t,.0) 51%
      )
      50% -2.4em / 140% 95%,              
              #1C1C1C;
            background-repeat: no-repeat;
            border-radius: inherit;
          } 
          .inner_2{
            width: 80%;
            height: 80%;
            border:1px solid white;
            border-radius: inherit;
            position: absolute;
            top:53%;
            left:50%;
            transform:translate(-50%,-50%);                        background:                
              linear-gradient(
              -30deg,
                #3D3C40,
                #A4A4A4,
                #CACACA,
            )50% 100% / 100% 100%;  
            background-repeat: no-repeat;
            &:before{
              border-radius: inherit;
              content: '';
              width: 90%;
              height: 90%;
              border:2px solid #1C1C1C;
              @include center;

            }   
              .inner_3{
              width: 85%;
              height:85%;
              border-radius: inherit;
              @include center;
              background:
              radial-gradient(
                  100% 100% at 50% 50%,
                  rgba(#131313,1) 50%,
                rgba($t,.0) 51%
                )
                50% -1.3em / 140% 95%, 
                #1C1C1C;
              background-repeat: no-repeat;     
                .hole{
                                  width: 1.7em;
                height:1.7em;
                border-radius: 2px;
                position: absolute;
                top: 57%;
                left: 47%;
                transform: translate(-50%,-50%);
                background: #DDDDDB;
        &:before{
          z-index: 3;
          width: 87%;
          height:50%;
          content: '';
          position: absolute;
          top: -1.8em;
          left: .15em;
          background:            
    linear-gradient(
      to right,
      $t,
    rgba(#fff,.1) 20%,
      rgba(#fff,.15),
      rgba(#fff,.1),
      $t
    )
    50% 100% / 95% 100%,            
            
            ;
          background-repeat: no-repeat;
        }                    
                }
              }            
          }
          
        }
        .shadows_middle{
          z-index: 8;
          position: absolute;
          width: 59%;
          height: 30%;
          top: 25%;
          left:47%;
          transform:translate(-50%,-50%);
          background:
    radial-gradient(
        105% 80% at 50% 100%,
        rgba(red,.0) 25%,
      rgba(#fff,.3),
      rgba(#fff,.3),
      rgba(#fff,.0) 55%
      )
      50% -2em / 105% 100%,            
            ;
          background-repeat: no-repeat;
        } 
        .shadows_left{
          z-index: 8;
          position: absolute;
          width: 3em;
          height: 4.5em;
          top: 45%;
          left:70%;
          transform:translate(-50%,-50%) rotate(-10deg);
          background:
    radial-gradient(
        100% 120% at 00% 50%, 
        rgba(red,.0) 45%,
      rgba(#1F1F1F,1) 47%
      )
      2em 50% / 70% 95%,              
    radial-gradient(
        100% 120% at 00% 50%,
        rgba(#1F1F1F,.7) 50%,
      rgba($t,.0) 51%
      )
      -.4em 50% / 90% 95%,            
          linear-gradient(
            65deg,
            $t,
          rgba(#E0E0E0,.2) ,
            rgba(#E0E0E0,.3),
            rgba(#E0E0E0,.2),
            $t
          )
          50% 100% / 100% 5.5em,               
            ;
          background-repeat: no-repeat;
        }    
        .shadows_left_corner{
          z-index: 8;
          position: absolute;
          width: 50%;
          height:50%;
          top: 70%;
          left:65%;
          transform:translate(-50%,-50%) rotate(45deg);
          background:
    -webkit-radial-gradient(100% 50%, 50% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(
            255,
            255,
            255,
            0
          )
          100%),               
            ;
          background-repeat: no-repeat;
        }                 .shadows_right_corner{
          z-index: 8;
          position: absolute;
          width: 50%;
          height:50%;
          top: 72%;
          left:30%;
          transform:translate(-50%,-50%) rotate(-45deg);
          background:
    -webkit-radial-gradient(0% 50%, 50% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(
            255,
            255,
            255,
            0
          )
          100%),              
            ;
          background-repeat: no-repeat;
        }  
      }
      .toggle_blocker{
        width: 7.5em;
        height:3.5em;
        position: absolute;
        left:81%;
        top:47%;
        border:1px solid $top;
        background: 
    linear-gradient(
      to right, 
    $top 49%,
      $top 51%,
    )
    100% 100% / .2em 100%,            
    linear-gradient(
      to right, 
    $top 49%,
      $top 51%,
    )
    0% 100% / .3em 100%,            
    linear-gradient(
      to right, 
    $top 49%,
      $top 51%,
    )
    50% 100% / 100% .75em,            
          ;
        background-repeat: no-repeat;
        
      }
      .toggle_under_flash_container{
        width: 13em;
        height:3em;
        // border:1px solid red;
        position: absolute;
        left:77.5%;
        top:47%;        
      }
      .toggle_under_flash{
        width: 7em;
        height:3em;
        position: absolute;

        @include center;
        background:
    radial-gradient(
        100% 100% at 00% 50%,
        rgba(#bc082a,1) 50%,
      rgba($top,1) 51%
      )
      5.5em 0% / 3em 3em,          
    radial-gradient(
        100% 100% at 100% 50%,
        rgba(#af0a20,1) 50%,
      rgba($top,1) 51%
      )
      -1.5em 0% / 3em 3em, 
    linear-gradient(
      to right,
    #af0a20 49%,
      #bc082a 51%,
    )
    50% 100% / 15em 15em,
    // linear-gradient(
    //   to right,
    // #bc082a 49%,
    //   $t 51%,
    // )
    // 50% 100% / 15em 15em,          
          // bc082a
          #c8072f
          ;
        background-repeat: no-repeat;
        .toggle{
          box-shadow: .2em 0px 1em .2em rgba(#000,.25);
          width:2.5em;
          height:2.5em;
          border-radius: 50%;
          @include center;
          border-top:1px solid #cf3b55;
          border-right:1px solid #cf3b55;
          border-left:1px solid #cf3b55;
          background:
            #c7072e
            ;
        }
      } 
      p{
        font-weight: 200; 
        color:$top;
      text-shadow: 
        -.04em -.04em -0px rgba(#000,.2),
        .04em .04em 0px rgba(#000,.2)
        ;     
        font-size: 2em;
        position: absolute;
        top:50%;
        transform: translateY(-50%);        
      }
      .plus{
        // border:1px solid green;
        
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        right: 0;
      }
.text{

        width: 12em;
        height: 7em;
        position: absolute;
        top:85%;
        left:88.5%;
      transform: translate(-50%,-50%);
      h1{
        font-family: Arial;
        font-size:4em;
        color: #77767B;
        position:absolute;   
        letter-spacing: -1px;
      }
      h1:nth-of-type(1){
        left: .3em;
      }
      h1:nth-of-type(2){
        top: .7em;
      }
      h1:nth-of-type(3){
        top: 0;
        color:#C14633;

        left:1.6em;
        top:.45em;
        font-size:5em;
        font-weight: bolder;
      }           
    }      
    }
    .bottom{
      position: relative;
      width: 100%;
      height: 25em;
      margin: auto;
      background: 
    linear-gradient(
      
   #c10927 49%,
      #c10927 51%,
    )
    50% 100% / 50% 100%,          
        // #dad5d6
        ;
      background-repeat: no-repeat;
//       bottom shading
   &:after{
     content: '';
     width: 100%;
     height:93.5%;
     position: absolute;
     @include center;
     top:48%;
      background: 
// shading
        //right
    linear-gradient(
      to right,
       rgba($t,.0) 20%,
       rgba(#d26c7a,.75),
       rgba(#d26c7a,.75),
     rgba($t,0) 91%
    )
   99.5% 50% / 5em 100%,  
   //      // left
    linear-gradient(
      to right,
       rgba($t,.05) 11%,
       rgba(#d26c7a,.75),
       rgba(#d26c7a,.75),
     rgba($t,.0) 91%
    )
   1% 50% / 3em 100%,           
        ;
      background-repeat: no-repeat;     
   }      
      .top_btm{
        position: relative;
      width: 100%;
      height:5em;
      .left{
        position: absolute;
        z-index:1;
        width: 37.2%;
        height: inherit;
        border-top-left-radius: 2em;
        border-bottom-right-radius: 30px;
        border-bottom: 2px solid #000;
        border-right: 2px solid rgba(#000,.5);
        box-shadow: 0 2px 2px -2px #f9f8f9;        
        background:
          linear-gradient(
            to right,
          #cbc4c4,
            rgba(#f9f8f9,.4),
            rgba(#dcd7d8,.5)70%,
            $t
          )
          50% 0% / 100% 95%,            
          linear-gradient(
            -45deg,
            $t 45%,
          rgba(#f9f8f9,.4) 49%,
            $bk 51%,
          )
          0% -2.8em / 2em 5.5em,              
          linear-gradient(
            to bottom,
          #f9f8f9,
            rgba(#f9f8f9,.4),
            rgba(#000,.1)70%,
            $t
          )
          50% 0% / 100% 1em,             
          #dcd7d8;
        //cbc4c4
          ;
        background-repeat: no-repeat;
        
      } 
      .right{
        position: absolute;
        z-index:1;
        width: 33%;
        height: inherit;
        
        // border:2px solid green;
        right: 0;
        border-top-right-radius: 2em;
        border-bottom-left-radius: 30px;
        border-bottom: 2px solid #000;
        border-right: 2px solid rgba(#000,.5);
        box-shadow: 0 2px 2px -2px #f9f8f9;   
        background:
          linear-gradient(
            to left,
          #cbc4c4, 
            rgba(#f9f8f9,.4),
            rgba(#dcd7d8,.5)70%,
            $t
          )
          100% 0% / 100% 95%,          
          linear-gradient(
            45deg,
            $t 45%,
          rgba(#f9f8f9,.4) 49%,
            $bk 51%,
          )
          100% -2.8em / 2em 5.5em,              
          linear-gradient(
            to bottom,
          #f9f8f9,
            rgba(#f9f8f9,.4),
            rgba(#000,.1)70%,
            $t
          )
          50% 0% / 100% 1em,             
          #cbc4c4;
          ; 
background-repeat: no-repeat;        
      }  
 .middle{
        z-index:0;
        width: 22em;
        height: 6em;
        position: absolute;
        top:0;
        left:52%;
        transform: translate(-50%, 0%);
          background:
          linear-gradient(
            to top,
          $t,
            rgba(#c40a29,.4),
            rgba(#d05b60,1),
            // red
          )
          50% 0% / 80% 3em,             
          linear-gradient(
            to bottom,
          $t,
            rgba(#c40a29,.4),
            rgba(#d05b60,1),
            // red
          )
          50% 100% / 80% 3.7em,              
//           left angle
          // black
          linear-gradient(
            80deg,
          $t 30%,
            rgba(#c40a29 ,.5) 35%,
            rgba(#c40a29,.2) 72%,
            $t 78%,
          )
          5.5% 0% / 3.5em 95%,              
          // white
          linear-gradient(
            80deg,
          #c40a29  40%,
            rgba(#c40a29,.4),
            rgba(#fff,.4) 52%,
            $t 65%, 
          )
          3% 100% / 3em 88%,
          // white  2 (right)        
          linear-gradient(
            -79deg,
          $t 40%,
            rgba(#d6757c,.3),
            rgba(#d6757c,.3) 52%,
            rgba(#7b061a,.2),
            #c40a29 65%,
          )
          11% 100% / 2.7em 88%,           
       
//           right angle
          // black
          linear-gradient(
            -80deg,
          $t 30%,
            rgba(#c6182f,.5) 35%,
            rgba(#c40a29,.2) 72%,
            $t 78%,
          )
          94.5% 0% / 3.5em 95%,       
          // white     right      
          linear-gradient(
            -80deg,
          #c40a29  40%,
            rgba(#d6757c,.4),
            rgba(#d6757c,.4) 52%,
            $t 65%,
          )
          97.3% 100% / 3em 88%, 
          // white  2 (right)         
          linear-gradient(
            79deg,
          $t 40%,
            rgba(#7b061a,.2),
            rgba(#d6757c,.3),
            rgba(#d6757c,.3) 52%,
            #c40a29 65%,
          )
          91% 100% / 2.7em 88%,           
          linear-gradient(
            to right,
          $t,
            rgba(#d05b60,.4),
            rgba(#d05b60,.2)70%,
            // red
          )
          95% 0% / 1.5em .7em,           
          linear-gradient(
            to right,
          $t,
            rgba(#d05b60,.4),
            rgba(#d05b60,.2)70%,
            // red
          )
          5% 0% / 1.5em .7em,           
          linear-gradient(
            to bottom,
          rgba(#d6757c,.3),
            rgba(#d6757c,.4),
            rgba(#d05b60,.06)90%,
            $t
          )
          50% 0% / 17em .6em,             
          linear-gradient(
            to left,
            rgba(#d6757c,.2),
            rgba(#d6757c,.5),
            rgba(#d05b60,.2)
          )
          96% 0% / 2em .5em,           
          linear-gradient(
            to bottom,
          #9A9BA1,
            rgba(#d6757c,.4),
            rgba(#d05b60,.2)70%,
            $t
          )
          100% 0% / 1.5em 1em,     
          linear-gradient(
            to right,
            rgba(#d6757c,.0),
            rgba(#d6757c,.3),
            rgba(#d05b60,.3)
          )
          4% 0% / 2em .6em,             
          linear-gradient(
            to bottom,
          #9A9BA1,
            rgba(#d6757c,.4),
            rgba(#d05b60,.2)70%,
            $t
          )
          0% 0% / 2em 1em,           
          linear-gradient(
            to top,
            rgba(#d6757c,.4) 5%,
          rgba(#d6757c,.1),
            rgba(#7b061a,.07),
            $t
          )
          50% 0% / 83% 100%,        
          ;
        background-repeat: no-repeat;

        .switch{
          width: 12.7em; 
          height: 3em;
          position: absolute;
          @include center;
          left:54%;
          background:
    linear-gradient(
      to right,
    rgba(#a10b1b,.05),
     rgba(#a10b1b,.1),
      rgba(#a10b1b,.6)
    )
    100% 50% / 89% 2.7em,                 
    linear-gradient(
      to bottom,
    rgba(#000,.1),
     rgba(#000,.1),
      rgba(#000,.3)
    )
    45% 93% / 90% .2em,              
    linear-gradient(
      to bottom,
      #000 1%,
    #444348 2%,
      #444348 98%,
      #000 99%
    )
    45% 5% / 75% .1em,             
    linear-gradient(
      to bottom,
      #000 1%,
    #cd454d 2%,
      #cd454d 98%,
      #000 99%
    )
    43% 50% / 75% 2.8em,                   
    radial-gradient(
        100% 100% at 50% 50%,
      #cd454d 46%,
        rgba(#000,1) 50%,
      rgba($t,.0) 51%
      )
      100% 50% / 3em 2.8em,
    radial-gradient(
        100% 100% at 50% 50%,
      #cd454d 43%,
      rgba(#000,.3),
        rgba(#000,1) 50%,
      rgba($t,.0) 51%
      )
      0% 50% / 3em 2.8em,   
            
            ;
          background-repeat: no-repeat;
          .switch_btn{
            width: 2.8em;
            height: 2.8em;
            @include center;
            border-radius: 50%;
            border-bottom:none;
            left: 75%;
            background:
    radial-gradient(
        100% 100% at 50% 50%,
     #ce4c53 44%,
        rgba(#b10e21,.6) 48%,
      rgba($t,.0) 55%
      )
     50% 50% / 98% 100%,              
              #b10e21;
            background-repeat: no-repeat;
  box-shadow: 0 2em 4em rgba(#c10925,0.19), 0 .3em .3em rgba(0,0,0,0.23), 
    -.15em .2em 0 .2em rgba(#c50925, .4),
 -.15em .2em 0 .2em rgba(#000, .3),    
    .04em .1em 0 .1em rgba(#c40926, .5),     
    0 .38em .28em rgba(#c40926,0.50), 0 .8em .5em rgba(#000,0.42);  
            ;            
          }
        }
      }        
      }
      .btm{
        width: 100%;
          height: 80%;
    position: relative;
        border-bottom-left-radius: 1em;
        border-bottom-right-radius: 1em;        
      background:
//         main mouth
    linear-gradient(
      to right,

       rgba(#111212,0)49%,
     rgba(#111212,1)50%
    )
   10.5% 0% / .5% 43%,   
    linear-gradient(
      to right,

       rgba(#111212,0)49%,
     rgba(#111212,1)50%
    )
   92.3% 0% / .5% 43%,           
    linear-gradient(
      to bottom,

       rgba($t,.0),
     rgba(#000,.8)
    )
   59% 41% / 81.5% 3%,        
    linear-gradient(
      to bottom,
      #111212,
       rgba(#111212,1) 69%,
     rgba(#2a2a2a,1) 70%
    )
   59% 30% / 81.5% 20%, 
      
        //       end  main mouth
        //white lines under main mouth 
    linear-gradient(
      to right,
       rgba(#111212,.7)49%,
     rgba(#111212,1)50%
    )
   10% 24% / 10% .5%,   
    linear-gradient(
      to right, 

       rgba(#d88489,.4),
     rgba(green,0),

    )
   9% 32% / 3% 27%,  
    linear-gradient(
      to right, 

       rgba(#d88489,.6)39%,
     rgba(#d88489,0)40%,
 
    )
   9% 32% / .5% 27%,   
    linear-gradient(
      to bottom, 

       rgba(#000,.2),
     rgba($t,0),

    )
   9.5% 26% / 3% 8%,   
    linear-gradient(
      to bottom, 

       rgba(#000,.1),
     rgba($t,0),

    )
   93% 26% / 3% 8%,         
    linear-gradient(
      to left, 

       rgba(#d88489,.2),
     rgba(green,0),

    )
   93.5% 32% / 3% 27%,          
    linear-gradient(
      to right,

       rgba(#111212,.7)49%,
     rgba(#111212,1)50%
    )
   93% 24% / 10% .5%,           
    linear-gradient(
      to right, 

       rgba(#d88489,.6)39%,
     rgba(#d88489,0)40%,
 
    )
   94% 32% / .5% 27%,          
    linear-gradient(
      to left, 

       rgba(#2a2a2a,.3),
     rgba(green,0),

    )
   92% 32% / 3% 27%,         
    linear-gradient(
      to bottom,
#960b1b 30%,
       rgba(#2a2a2a,.2),
      rgba(#2a2a2a,.2),
     rgba(#960b1b,0)  65%
    )
   59% 47% / 81.5% 6%,           
    linear-gradient(
      to bottom,
#960b1b 25%,
       rgba(#680608,1),
      rgba(#680608,1),
     rgba(#960b1b,1) 65%
    )
   59% 47% / 81.5% 6%,          
        //960b1b
//         long white bottom line
    linear-gradient(
      to right,

       rgba(#d88489,1)49%,
     rgba(#d88489,1)50%
    )
   57.8% 50.5% / 85% .5%,           

          #c10927;
        background-repeat: no-repeat;
h1{
        font-family: Arial;
        font-size:5.4em;
        color: #77767B;
        color:#e0e6e8;
        position:absolute;   
        letter-spacing: -1px;
        font-weight: 600;
        @include center;
        top: 74%;
        left:53%;
        text-shadow: 
        .04em .04em 0px rgba(#000,.3);
        &:nth-of-type(2){
          width:10em;
          text-align:right;
          left: 81.3%;
          font-size:2em;
          letter-spacing: 0px;
          top:79%;
        }
      }      
.logo{
        width: 6.3em;
        height: 7.2em;
        @include center;
  // border:1px solid white;
        left: 18%;
        top: 70.5%;
        background: 
          linear-gradient(
            to bottom,
            #009ddc,
          #009ddc,
          )
          60% 5% / 100% .7em,           
          linear-gradient(
            to bottom,
            #009e4f,
          #009e4f,
          )
          60% 25% / 100% .7em,           
          linear-gradient(
            to bottom,
            #ffe300,
          #ffe300,
          )
          60% 45% / 100% .7em,           
          linear-gradient(
            to bottom,
            #f8aa00,
          #f8aa00,
          )
          60% 65% / 100% .7em,             
          linear-gradient(
            to bottom,
            #de231c,
          #de231c,
          )
          60% 100% / 100% 1.28em,            
          
          ;
        background-repeat: no-repeat;
      }     
  .under_btm{
    width:100%;
    height: 1.5em;
    @include center;
    background:
    linear-gradient(
      to bottom,

       rgba(#d88489,0)49%,
     rgba(#2a2a2a,.3)50%
    )
   50% 100% / 100% 100%,        
      #62080e;
    background-repeat: no-repeat;
    border-bottom-left-radius: 5em;
    border-bottom-right-radius: 5em;
    top:99.5%;  
  } 
     
      }
    }    
    
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console