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" id="looper">
    <main> 
      <form>
          <input type="checkbox" id="looper_switch">
          <label for="looper_switch"><span>O N</span><span>OFF</span><input type="reset" value=""></label>
          <div id="looper_content">
              <div class="looper_content_inner">
                  <div class="looper_content_inner_top">
                      <div class="looper_content_inner_top_top">
                          <div class="looper_content_inner_name">BOSS RC-505 LOOP STATION</div>
                          <div class="looper_content_inner_tuning_right">
                              <span class="looper_content_inner_tuning_inner"></span>
                          </div>
                          <div class="looper_content_inner_tuning_right_three">
                              <div class="looper_content_inner_tuning_inner_one">
                                  <span class="looper_content_inner_tuning_ttl">Peax - MIC</span>
                                  <span class="looper_content_inner_tuning_roll"></span>
                                  <span>MIN</span>
                                  <span>MAX</span>
                              </div>
                              <div class="looper_content_inner_tuning_inner_two">
                                  <span class="looper_content_inner_tuning_ttl">INPUT LEVEL - INST</span>                            
                                  <span class="looper_content_inner_tuning_roll"></span>
                                  <span>MIN</span>
                                  <span>MAX</span>
                              </div>
                              <div class="looper_content_inner_tuning_inner_three">
                                  <span class="looper_content_inner_tuning_ttl">OUTPUT LEVEL</span>  
                                  <span class="looper_content_inner_tuning_roll"></span>
                                  <span>MIN</span>
                                  <span>MAX</span>
                              </div>
                          </div>
                          <div class="looper_content_inner_monitor">
                              <span class="looper_content_inner_monitor_inner"></span>
                          </div>
                          <div class="looper_content_inner_tuning_left_seven">
                              <div class="looper_content_inner_tuning_left_inner_one">
                                  <span>MEMORY VALUE</span>
                                  <span class="looper_content_inner_tuning_left_roll"></span>
                              </div>
                              <div class="looper_content_inner_tuning_left_seven_inner">
                                  <div class="looper_content_inner_tuning_left_inner_two">
                                      <span class="looper_content_inner_tuning_left_back"></span>
                                      <span class="looper_content_inner_tuning_left_roll"></span>
                                  </div>
                                  <div class="looper_content_inner_tuning_left_inner_three">
                                      <span class="looper_content_inner_tuning_left_forword"></span>
                                      <span class="looper_content_inner_tuning_left_roll"></span>
                                  </div>
                                  <div class="looper_content_inner_tuning_left_inner_four">
                                      <span>SYSTEM</span>
                                      <span class="looper_content_inner_tuning_left_roll"></span>
                                  </div>
                                  <div class="looper_content_inner_tuning_left_inner_five">
                                      <span>WRITE</span>
                                      <span class="looper_content_inner_tuning_left_roll"></span>
                                  </div>
                                  <div class="looper_content_inner_tuning_left_inner_six">
                                      <span>EXIT</span>
                                      <span class="looper_content_inner_tuning_left_roll"></span>
                                  </div>
                                  <div class="looper_content_inner_tuning_left_inner_seven">
                                      <span>MEMORY</span>
                                      <span class="looper_content_inner_tuning_left_roll"></span>
                                  </div>
                              </div>
                          </div>
                          <div class="looper_content_inner_tuning_left">
                              <span class="looper_content_inner_tuning_inner"></span>
                          </div>
                      </div>
                      <div class="looper_content_inner_top_bottom">
                          <div class="looper_content_inner_btn">
                              <div class="looper_content_inner_btn_left">
                                  <input type="checkbox" id="looper_effector_btn_left_typea">
                                  <label for="looper_effector_btn_left_typea"></label>
                                  <div class="looper_effector_btn_typea">A</div>
                                  <input type="checkbox" id="looper_effector_btn_left_typeb">
                                  <label for="looper_effector_btn_left_typeb"></label>
                                  <div class="looper_effector_btn_typeb">B</div>
                                  <input type="checkbox" id="looper_effector_btn_left_typec">
                                  <label for="looper_effector_btn_left_typec"></label>
                                  <div class="looper_effector_btn_typec">C</div>
                              </div>
                              <div class="looper_content_inner_btn_center">
                                  <input type="checkbox" id="looper_effector_btn_all">
                                  <label for="looper_effector_btn_all"></label>
                                  <div class="looper_effector_btn_all">
                                      <span>ALL<br />START<br />STOP</span>
                                  </div>
                                  <input type="checkbox" id="looper_effector_btn_undo">
                                  <label for="looper_effector_btn_undo"></label>
                                  <div class="looper_effector_btn_undo">
                                      <span>UNDO/<br />REDO</span>
                                  </div>
                                  <input type="checkbox" id="looper_effector_btn_tap">
                                  <label for="looper_effector_btn_tap"></label>
                                  <div class="looper_effector_btn_tap">
                                      <span>TAP<br />TEMPO</span>
                                  </div>
                                  <input type="checkbox" id="looper_effector_btn_start">
                                  <label for="looper_effector_btn_start"></label>
                                  <div class="looper_effector_btn_start">
                                      <span>START/<br />STOP</span>
                                  </div>
                                  <div class="looper_effector_btn_edit"></div>
                              </div>
                              <div class="looper_content_inner_btn_right">
                                  <input type="checkbox" id="looper_effector_btn_right_typea">
                                  <label for="looper_effector_btn_right_typea"></label>
                                  <div class="looper_effector_btn_typea">A</div>
                                  <input type="checkbox" id="looper_effector_btn_right_typeb">
                                  <label for="looper_effector_btn_right_typeb"></label>
                                  <div class="looper_effector_btn_typeb">B</div>
                                  <input type="checkbox" id="looper_effector_btn_right_typec">
                                  <label for="looper_effector_btn_right_typec"></label>
                                  <div class="looper_effector_btn_typec">C</div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="looper_content_inner_bottom">
                      <div class="looper_content_replay_block">
                          <!-- edit btn -->
                          <div class="looper_content_replay_edit">
                              <input type="checkbox" id="looper_content_replay_edit1">
                              <label for="looper_content_replay_edit1"></label>
                              <span class="looper_content_replay_editicon">EDIT</span>
                          </div>
                          <!-- replay btn -->
                          <input type="checkbox" id="looper_content_replay_stay1">
                          <label for="looper_content_replay_stay1"></label>
                          <div class="looper_content_replay_stay">
                              <span class="looper_content_replay_txt">CLEAR:HOLD > 2 SEC.</span>
                              <span class="looper_content_replay_stayicon"></span>
                          </div>
                          <!-- mix button -->
                          <div class="looper_content_replay_mix">
                              <span class="looper_content_replay_adjustment"></span>
                          </div>
                          <!-- loop button -->
                          <div class="looper_content_loop_btn">
                              <input type="checkbox" id="looper_content_loop_num1">
                              <label for="looper_content_loop_num1"></label>
                              <input type="checkbox" id="looper_content_loop_num1_sec">
                              <label for="looper_content_loop_num1_sec"></label>
                              <span class="looper_content_loop_btn_num">1</span>
                              <div class="looper_content_loop_btn_inner">
                                  <div class="looper_content_loop_btn_rump">
                                      <div class="looper_content_loop_btn_btn">
                                          <span class="looper_content_loop_btn_play"></span>
                                          <span class="looper_content_loop_btn_slush"></span>
                                          <span class="looper_content_loop_btn_stop"></span>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="looper_content_replay_block">
                          <!-- edit btn -->
                          <div class="looper_content_replay_edit">
                              <input type="checkbox" id="looper_content_replay_edit2">
                              <label for="looper_content_replay_edit2"></label>
                              <span class="looper_content_replay_editicon">EDIT</span>
                          </div>
                          <!-- replay btn -->
                          <input type="checkbox" id="looper_content_replay_stay2">
                          <label for="looper_content_replay_stay2"></label>
                          <div class="looper_content_replay_stay">
                              <span class="looper_content_replay_txt">CLEAR:HOLD > 2 SEC.</span>
                              <span class="looper_content_replay_stayicon"></span>
                          </div>
                          <!-- mix button -->
                          <div class="looper_content_replay_mix">
                              <span class="looper_content_replay_adjustment"></span>
                          </div>
                          <!-- loop button -->
                          <div class="looper_content_loop_btn">
                              <input type="checkbox" id="looper_content_loop_num2">
                              <label for="looper_content_loop_num2"></label>
                              <input type="checkbox" id="looper_content_loop_num2_sec">
                              <label for="looper_content_loop_num2_sec"></label>
                              <span class="looper_content_loop_btn_num">2</span>
                              <div class="looper_content_loop_btn_inner">
                                  <div class="looper_content_loop_btn_rump">
                                      <div class="looper_content_loop_btn_btn">
                                          <span class="looper_content_loop_btn_play"></span>
                                          <span class="looper_content_loop_btn_slush"></span>
                                          <span class="looper_content_loop_btn_stop"></span>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="looper_content_replay_block">
                          <!-- edit btn -->
                          <div class="looper_content_replay_edit">
                              <input type="checkbox" id="looper_content_replay_edit3">
                              <label for="looper_content_replay_edit3"></label>
                              <span class="looper_content_replay_editicon">EDIT</span>
                          </div>
                          <!-- replay btn -->
                          <input type="checkbox" id="looper_content_replay_stay3">
                          <label for="looper_content_replay_stay3"></label>
                          <div class="looper_content_replay_stay">
                              <span class="looper_content_replay_txt">CLEAR:HOLD > 2 SEC.</span>
                              <span class="looper_content_replay_stayicon"></span>
                          </div>
                          <!-- mix button -->
                          <div class="looper_content_replay_mix">
                              <span class="looper_content_replay_adjustment"></span>
                          </div>
                          <!-- loop button -->
                          <div class="looper_content_loop_btn">
                              <input type="checkbox" id="looper_content_loop_num3">
                              <label for="looper_content_loop_num3"></label>
                              <input type="checkbox" id="looper_content_loop_num3_sec">
                              <label for="looper_content_loop_num3_sec"></label>
                              <span class="looper_content_loop_btn_num">3</span>
                              <div class="looper_content_loop_btn_inner">
                                  <div class="looper_content_loop_btn_rump">
                                      <div class="looper_content_loop_btn_btn">
                                          <span class="looper_content_loop_btn_play"></span>
                                          <span class="looper_content_loop_btn_slush"></span>
                                          <span class="looper_content_loop_btn_stop"></span>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="looper_content_replay_block">
                          <!-- edit btn -->
                          <div class="looper_content_replay_edit">
                              <input type="checkbox" id="looper_content_replay_edit4">
                              <label for="looper_content_replay_edit4"></label>
                              <span class="looper_content_replay_editicon">EDIT</span>
                          </div>
                          <!-- replay btn -->
                          <input type="checkbox" id="looper_content_replay_stay4">
                          <label for="looper_content_replay_stay4"></label>
                          <div class="looper_content_replay_stay">
                              <span class="looper_content_replay_txt">CLEAR:HOLD > 2 SEC.</span>
                              <span class="looper_content_replay_stayicon"></span>
                          </div>
                          <!-- mix button -->
                          <div class="looper_content_replay_mix">
                              <span class="looper_content_replay_adjustment"></span>
                          </div>
                          <!-- loop button -->
                          <div class="looper_content_loop_btn">
                              <input type="checkbox" id="looper_content_loop_num4">
                              <label for="looper_content_loop_num4"></label>
                              <input type="checkbox" id="looper_content_loop_num4_sec">
                              <label for="looper_content_loop_num4_sec"></label>
                              <span class="looper_content_loop_btn_num">4</span>
                              <div class="looper_content_loop_btn_inner">
                                  <div class="looper_content_loop_btn_rump">
                                      <div class="looper_content_loop_btn_btn">
                                          <span class="looper_content_loop_btn_play"></span>
                                          <span class="looper_content_loop_btn_slush"></span>
                                          <span class="looper_content_loop_btn_stop"></span>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="looper_content_replay_block">
                          <!-- edit btn -->
                          <div class="looper_content_replay_edit">
                              <input type="checkbox" id="looper_content_replay_edit5">
                              <label for="looper_content_replay_edit5"></label>
                              <span class="looper_content_replay_editicon">EDIT</span>
                          </div>
                          <!-- replay btn -->
                          <input type="checkbox" id="looper_content_replay_stay5">
                          <label for="looper_content_replay_stay5"></label>
                          <div class="looper_content_replay_stay">
                              <span class="looper_content_replay_txt">CLEAR:HOLD > 2 SEC.</span>
                              <span class="looper_content_replay_stayicon"></span>
                          </div>
                          <!-- mix button -->
                          <div class="looper_content_replay_mix">
                              <span class="looper_content_replay_adjustment"></span>
                          </div>
                          <!-- loop button -->
                          <div class="looper_content_loop_btn">
                              <input type="checkbox" id="looper_content_loop_num5">
                              <label for="looper_content_loop_num5"></label>
                              <input type="checkbox" id="looper_content_loop_num5_sec">
                              <label for="looper_content_loop_num5_sec"></label>
                              <span class="looper_content_loop_btn_num">5</span>
                              <div class="looper_content_loop_btn_inner">
                                  <div class="looper_content_loop_btn_rump">
                                      <div class="looper_content_loop_btn_btn">
                                          <span class="looper_content_loop_btn_play"></span>
                                          <span class="looper_content_loop_btn_slush"></span>
                                          <span class="looper_content_loop_btn_stop"></span>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </form>
    </main>
  </div>
              
            
!

CSS

              
                    /**************
    reset
    **************/
    body, div, span, ul, li {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    body {
       font-family: 'Open Sans', sans-serif;  
    }
    *, *::before, *::after {
        box-sizing: border-box;
    }
    input[type="checkbox"] {
        display: none;
    }

    /**************
    content
    **************/
    #looper {
        background-repeat: no-repeat;
        padding: 45% 0 0;
        width: 100%;
        background-position: center center;
        position: relative;
        margin: 0 0 4%;
    }
    #looper_content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 93.5%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    height: 100%;
    opacity: 1;
    margin: 2% auto;
    z-index: -1;
    }
    #looper_content * {
    font-size: 0;
    color: white;
    vertical-align: middle;
    }
    #looper_content label {
    margin: 0;
    }
    #looper_content .looper_content_inner {
    height: 100%;
    position: relative;
    }
    #looper_content .looper_content_inner_top {
    height: calc(83% - 1.25vw - 1.25vw);
    height: -webkit-calc(83% - 1.25vw - 1.25vw);
    width: 100%;
    margin: 0% auto;
    border-radius: 3% 3% 3% 3% / 7% 7% 7% 7%;
    background: linear-gradient(100deg, #08080A ,#08080A 70%,#2F2D35 90%);
    box-shadow: 0 0 0 0.1vw #0b0a0b, 0 0 0 0.4vw #141214, 0 0 0 0.7vw #1b1c1b, 0 0 0 1vw #252325, 0 0 0 1.25vw #2e2b2e;
    }
    #looper_content .looper_content_inner_top_top {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    position: relative;
    padding: 13.5% 0 0;
    }
    #looper_content .looper_content_inner_name {
    position: absolute;
    background-color: #ae1f24;
    width: 35%;
    color: black;
    padding: 0.4% 0;
    font-size: .8vw;
    font-weight: bold;
    top: 11%;
    left: 9%;
    overflow: unset;
    text-indent: 4vw;
    letter-spacing: .23vw;
    }
    #looper_content .looper_content_inner_name:before {
    content: '';
    position:absolute;
    background: #08080A;
    width: 40%;
    padding: 8% 0 0;
    top: 0%;
    left: 87.5%;
    border-radius: 50% 0 0 0 / 100% 0 0 0;
    }
    #looper_content .looper_content_inner_name:after {
    content: '';
    position:absolute;
    width: 160%;
    z-index: 2;
    background: #ae1f24;
    padding: .5% 0 0;
    top: 0;
    left: auto;
    }
    #looper_content .looper_content_inner_tuning_right {
    width: 14%;
    padding: 14% 0 0;
    position: absolute;
    top: 0;
    left: 0;
    }
    #looper_content .looper_content_inner_tuning_right:after {
    content: '';
    width: 68%;
    padding: 68% 0 0;
    display: block;
    position: absolute;
    background-color: #1C1B1F;
    top: 57%;
    left: 54%;
    border-radius: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    box-shadow: .2vw 0 0 0 #626168, .3vw .2vw 0 0 #121213;
    }
    #looper_content .looper_content_inner_tuning_right:before {
    content: '';
    width: 95%;
    padding: 95% 0 0;
    display: block;
    position: absolute;
    top: 57%;
    left: 57%;
    border-radius: 50%;
    background-color: #08080A;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    }
    #looper_content .looper_content_inner_tuning_inner {
    width: 45%;
    padding: 45% 0 0;
    background-color: #1B1A1E;
    position: absolute;
    top: 54%;
    left: 52%;
    border-radius: 50%;
    border: .1vw solid #1c1c29;
    box-shadow: .1vw .1vw 0 0 #1c1c29, .2vw .2vw 0 0 #16161d, .3vw .3vw 0 0 #121215, .4vw .4vw 0 0 #080808;
    z-index: 2;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    background: radial-gradient(circle at 60% 40%,#35323a, #1B1A1E 40%, #1B1A1E 70%);
    }
    #looper_content .looper_content_inner_tuning_inner:after {
    content: '';
    width: 1vw;
    position: absolute;
    background-color: white;
    top: 10%;
    left: 50%;
    height: .2vw;
    -webkit-transform: translateX(-50%) rotate(90deg);
            transform: translateX(-50%) rotate(90deg);
    }
    #looper_content .looper_content_inner_tuning_right_three {
    width: 25.3%;
    position: absolute;
    top: 30%;
    left: 14%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    }
    #looper_content .looper_content_inner_tuning_right_three > * {
    width: 33.3%;
    position: relative;
    text-align: center;
    }
    #looper_content .looper_content_inner_tuning_ttl {
    font-size: .7vw;
    display: block;
    position: relative;
    }
    #looper_content .looper_content_inner_tuning_roll {
    content: '';
    width: 60%;
    padding: 60% 0 0;
    display: block;
    position: relative;
    background-color: #1C1B1F;
    top: 0;
    left: 0;
    border-radius: 50%;
    box-shadow: .2vw 0 0 0 #626168, .3vw .2vw 0 0 #121213;
    margin: 10% auto 0;
    }
    #looper_content .looper_content_inner_tuning_roll:after {
    content: '';
    width: 60%;
    padding: 60% 0 0;
    position: absolute;
    border-radius: 50%;
    border: .1vw solid #1c1c29;
    box-shadow: .1vw .1vw 0 0 #1c1c29, .2vw .2vw 0 0 #16161d, .3vw .3vw 0 0 #121215, .4vw .4vw 0 0 #080808;
    top: 46%;
    left: 46%;
    z-index: 2;
    display: inline-block;
    margin: 0;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    background: radial-gradient(circle at 50% -10%,#35363c, #29272d 40%, #1B1A1E 70%);
    }
    #looper_content .looper_content_inner_tuning_roll:before {
    content: '';
    width: .8vw;
    height: .2vw;
    position: absolute;
    top: 30%;
    left: -webkit-calc(50% - .1vw);
    left:         calc(50% - .1vw);
    background-color: white;
    -webkit-transform: translateX(-50%) rotate(90deg);
            transform: translateX(-50%) rotate(90deg);
    z-index: 3;
    }
    #looper_content .looper_content_inner_tuning_roll + span,
    #looper_content .looper_content_inner_tuning_roll + span + span {
    font-size: .7vw;
    position: absolute;
    }
    #looper_content .looper_content_inner_tuning_roll + span {
    bottom: -15%;
    left: 15%;
    color: white;
    }
    #looper_content .looper_content_inner_tuning_roll + span + span {
    bottom: -15%;
    right: 15%;
    }
    #looper_content .looper_content_inner_monitor {
    width: 19.25%;
    position: absolute;
    top: 23%;
    left: calc(14% + 25.3% + 1%);
    background-color: #B6BAC6;
    padding: 5% 0 0;
    margin: 2% 0;
    display: inline-block;
    }
    #looper_content .looper_content_inner_monitor_inner {
    background-color: #313153;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    width: 80%;
    padding: 22% 0 0;
    }
    #looper_content .looper_content_inner_tuning_left_seven {
    width: 27.25%;
    position: absolute;
    top: 17.5%;
    left: calc(14% + 25.3% + 1% + 19.25%);
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    }
    #looper_content .looper_content_inner_tuning_left_inner_one {
    width: 33%;
    text-align: center;
    margin: 5% 0 0;
    }
    #looper_content .looper_content_inner_tuning_left_inner_one span {
    font-size: .8vw;
    display: block;
    }
    #looper_content .looper_content_inner_tuning_left_inner_one .looper_content_inner_tuning_left_roll {
    content: '';
    width: 60%;
    padding: 60% 0 0;
    margin: 8% 0 0;
    display: inline-block;
    position: relative;
    background-color: #1C1B1F;
    top: 0;
    left: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 .15vw #626168, 0 0 0 0.3vw #121213;
    }
    #looper_content .looper_content_inner_tuning_left_inner_one .looper_content_inner_tuning_left_roll:after {
    content: '';
    width: 80%;
    padding: 80% 0 0;
    position: absolute;
    top: 46%;
    left: 46%;
    border-radius: 50%;
    border: .1vw solid #1c1c29;
    box-shadow: .1vw .1vw 0 0 #1c1c29, .2vw .2vw 0 0 #16161d, .3vw .3vw 0 0 #121215, .4vw .4vw 0 0 #080808;
    z-index: 2;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    background: radial-gradient(circle at 45% 32%,#2b292f, #1B1A1E 40%, #1B1A1E 70%);
    }
    #looper_content .looper_content_inner_tuning_left_seven_inner {
    width: 55%;
    margin: 5% 0 0;
    }
    #looper_content .looper_content_inner_tuning_left_seven_inner > * {
    width: 33.3%;
    display: inline-block;
    text-align: center;
    margin: 0 0 10%;
    line-height: 1;
    }
    #looper_content .looper_content_inner_tuning_left_seven_inner > * span {
    font-size: .7vw;
    color: white;
    display: block;
    text-align: center;
    }
    #looper_content .looper_content_inner_tuning_left_back,
    #looper_content .looper_content_inner_tuning_left_forword {
    width: 0;
    height: 0;
    border-style: solid;
    margin: 0 auto;
    }
    #looper_content .looper_content_inner_tuning_left_back {
    border-width: .25vw 1.0vw .25vw 0;
    border-color: transparent #ffffff transparent transparent;
    }
    #looper_content .looper_content_inner_tuning_left_forword {
    border-width: .25vw 0 .25vw 1.0vw;
    border-color: transparent transparent transparent #ffffff;
    }
    #looper_content .looper_content_inner_tuning_left_seven_inner .looper_content_inner_tuning_left_roll {
    content: '';
    width: 30%;
    padding: 30% 0 0;
    display: inline-block;
    position: relative;
    background-color: #1C1B1F;
    top: 0;
    left: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0.2vw #161519, 0 0 0.3vw #121213;
    margin: 15% 0 0;
    }
    #looper_content .looper_content_inner_tuning_left {
    width: 14%;
    position: absolute;
    top: 0;
    right: 0;
    padding: 14% 0 0;
    }
    #looper_content .looper_content_inner_tuning_left:after {
    content: '';
    width: 66%;
    padding: 66% 0 0;
    display: block;
    position: absolute;
    background-color: #1C1B1F;
    top: 57%;
    left: 53%;
    border-radius: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    background-color: #1B1A1E;
    box-shadow: -.2vw 0 0 0 #626168, -.3vw .2vw 0 0 #121213;
    }
    #looper_content .looper_content_inner_btn {
    display: flex;
    flex-wrap: wrap;
    }
    #looper_content .looper_content_inner_btn_left {
    width: 16%;
    margin: 1% 2% 0;
    position: relative;
    }
    #looper_content .looper_content_inner_btn_left label {
    display: inline-block;
    position: absolute;
    width: 18%;
    padding: 18% 0 0;
    top: 0;
    z-index: 100;
    }
    #looper_content .looper_content_inner_btn_left label[for*="looper_effector_btn_typea"] {left: 8%;}
    #looper_content .looper_content_inner_btn_left label[for*="looper_effector_btn_typeb"] {
        left: 41%;
    }
    #looper_content .looper_content_inner_btn_left label[for*="looper_effector_btn_typec"] {
        left: 74%;
    }
    #looper_content [class*=looper_effector_btn_type] {
    content: '';
    width: 15%;
    padding: 7.5% 0;
    background-color: #1B1A1E;
    position: relative;
    border-radius: 50%;
    border: .1vw solid #a29eb0;
    box-shadow: .1vw .1vw 0 0 #a29eb0 ,.15vw .15vw 0 0 #a29eb0;
    z-index: 2;
    display: inline-block;
    margin: 0 9%;
    top: 0%;
    left: 0%;
    font-size: 1vw;
    line-height: 0;
    text-align: center;
    }
    #looper_content .looper_content_inner_btn_center {
    width: 60%;
    padding: 0  0 0 13.5%;
    display: inline-block;
    position: relative;
    }
    #looper_content .looper_content_inner_btn_center label {
    display: inline-block;
    position:absolute;
    width: 7%;
    padding: 7% 0 0;
    z-index: 100;
    top: 0;
    }
    #looper_content .looper_content_inner_btn_center label[for*="looper_effector_btn_all"] {
    left: 22.1%;
    }
    #looper_content .looper_content_inner_btn_center label[for*="looper_effector_btn_undo"] {
    left: 38.1%;
    }
    #looper_content .looper_content_inner_btn_center label[for*="looper_effector_btn_tap"] {
    left: 53.8%;
    }
    #looper_content .looper_content_inner_btn_center label[for*="looper_effector_btn_start"] {
    left: 69.8%;
    }
    #looper_content .looper_effector_btn_all,
    #looper_content .looper_effector_btn_undo,
    #looper_content .looper_effector_btn_tap,
    #looper_content .looper_effector_btn_start {
    content: '';
    width: 8%;
    padding: 2% 0;
    background-color: #1B1A1E;
    position: relative;
    border-radius: 50%;
    border: .1vw solid #a29eb0;
    box-shadow: 0 .1vw 0 0 #a29eb0, 0 .15vw 0 0 #a29eb0;
    z-index: 2;
    display: inline-block;
    margin: 0;
    top: 0%;
    left: 0%;
    line-height: 1;
    text-align: center;
    }
    #looper_content .looper_effector_btn_all span,
    #looper_content .looper_effector_btn_undo span,
    #looper_content .looper_effector_btn_tap span,
    #looper_content .looper_effector_btn_start span {
    font-size: .8vw;
    display: block;
    }
    #looper_content .looper_effector_btn_all {
    margin: 0 12.5% 0 0;
    padding: 1% 0;
    }
    #looper_content .looper_effector_btn_undo {
    margin: 0 12.5% 0 0;
    }
    #looper_content .looper_effector_btn_tap {
    margin: 0 12.5% 0 0;
    }
    #looper_content .looper_effector_btn_start {
    margin: 0 9.5% 0 0;
    }
    #looper_content .looper_effector_btn_start .rhythm {
    top: -30%;
    right: auto;
    left: 70%;
    color: #ae1f24;
    border-bottom: .1vw solid #ae1f24;
    width: 150%;
    padding: 0 15%;
    position: absolute;
    }
    #looper_content .looper_effector_btn_edit {
    content: '';
    width: 3.5%;
    padding: 3.5% 0 0;
    margin: 0;
    display: inline-block;
    position: relative;
    background-color: #1C1B1F;
    top: 0;
    left: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 .2vw #161519, 0 0 .3vw #121213;
    }
    #looper_content .looper_effector_btn_edit:before {
    content: 'edit';
    font-size: .8vw;
    position:absolute;
    top: -100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    }
    #looper_content .looper_content_inner_btn_right {
    width: 16%;
    margin: 1% 2% 0;
    position: relative;
    }
    #looper_content .looper_content_inner_btn_right label {
    display: inline-block;
    position: absolute;
    width: 18%;
    padding: 18% 0 0;
    top: 0;
    z-index: 100;
    }
    #looper_content .looper_content_inner_btn_right label[for*="looper_effector_btn_right_typea"] {left: 8%;}
    #looper_content .looper_content_inner_btn_right label[for*="looper_effector_btn_right_typeb"] {
        left: 40.5%;
    }
    #looper_content .looper_content_inner_btn_right label[for*="looper_effector_btn_right_typec"] {
        left: 74%;
    }
    #looper_content .looper_content_inner_bottom {
    width: calc(93% - 1.25vw - 1.25vw);
    margin: 0 auto;
    position: absolute;
    top: 44%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 56%;
    border-radius: 3% 3% 3% 3% / 7% 7% 7% 7%;
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(#08080A ,#08080A 80%,#2F2D35 90%);
    box-shadow: 0 0 0 0.1vw #0b0a0b, 0 0 0 0.4vw #141214, 0 0 0 0.7vw #1b1c1b, 0 0 0 1vw #252325, 0 0 0 1.25vw #2e2b2e;
    }
    #looper_content .looper_content_replay_block {
    width: 20%;
    position: relative;
    }
    #looper_content .looper_content_replay_edit {
    position: absolute;
    width: 50%;
    top: 0;
    left: 0;
    clear: both;
    padding: 25% 0 0;
    }
    #looper_content .looper_content_replay_editicon {
    width: 50%;
    padding: 10% 0;
    background-color: #1B1A1E;
    border-radius: 40%;
    border: .15vw solid #a29eb0;
    box-shadow: .1vw .1vw 0 0 #a29eb0, .15vw .15vw 0 0 #a29eb0;
    display: inline-block;
    margin: 0;
    top: 50%;
    left: 50%;
    font-size: .75vw;
    letter-spacing: .1vw;
    line-height: 0;
    text-align: center;
    position: absolute;
    z-index: 2;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    }
    #looper_content input + label[for*="looper_content_replay_edit"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    }
    /* stay */
    #looper_content label[for*='looper_content_replay_stay'] {
    position: absolute;
    top: 21%;
    left: 0;
    width: 50%;
    padding: 0 0 30%;
    z-index: 100;
    }
    #looper_content .looper_content_replay_stay {
    position: absolute;
    top: 17%;
    left: 0;
    width: 50%;
    padding: 0 0 30%;
    clear: both;
    }
    #looper_content .looper_content_replay_txt {
    font-size: .8vw;
    display: block;
    margin: 0;
    text-align: center;
    }
    #looper_content .looper_content_replay_stayicon {
    content: '';
    width: 45%;
    padding: 45% 0 0;
    background-color: #1B1A1E;
    position: absolute;
    border-radius: 50%;
    border: .15vw solid #a29eb0;
    box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0;
    z-index: 2;
    display: inline-block;
    margin: 0;
    top: 30%;
    left: 50%;
    font-size: 1.0vw;
    line-height: 0;
    text-align: center;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    margin: 0;
    }
    #looper_content .looper_content_replay_stayicon:after {
    content: '';
    background: #a29eb0;
    width: 30%;
    position: absolute;
    padding: 29% 0 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    }
    /* mix */
    #looper_content .looper_content_replay_mix {
    position: absolute;
    width: 30%;
    padding: 0 0 42%;
    top: 7.5%;
    left: 55%;
    box-shadow: -0.1vw 0 0 0 #0c0c0f, 0.1vw 0 0 0 #0c0c0f, -0.15vw 0 0 0 #0c0c0f, 0.15vw 0 0 0 #0c0c0f, -0.2vw 0 0 0 #0c0c0f, -0.2vw 0 0 0 #0c0c0f, 0 0.2vw 0 0 #57575C, 0 0.4vw 0 0 #5D5D63, 0 0.6vw 0 0 #626168, 0 0.8vw 0 0 #65656c;
    }
    #looper_content .looper_content_replay_mix:after {
    content: '';
    border-left: .3vw solid #191818;
    height: 100%;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    }
    #looper_content .looper_content_replay_adjustment {
    position: absolute;
    width: 90%;
    padding: 30% 0 0;
    background-color: #080808;
    border-radius: .25vw;
    box-shadow: 0 -.1vw 0 0 #a29eb0, 0 -.15vw 0 0 #a29eb0, 0 -.2vw 0 0 #a29eb0, 0 .1vw 0 0 #131215, 0 .15vw 0 0 #131215;
    z-index: 2;
    margin: 0 5%;
    }
    #looper_content .looper_content_replay_adjustment:after {
    content: '';
    border-top: .1vw solid white;
    position:absolute;
    width: 100%;
    top: 50%;
    left: 0;
    }
    #looper_content .looper_content_loop_btn {
    top: 46%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 70% 0 0;
    }
    #looper_content .looper_content_loop_btn input + label {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    }
    #looper_content .looper_content_loop_btn_num {
    font-size: 1.5vw;
    position: absolute;
    top: 5%;
    left: 10%;
    font-family: none;
    font-weight: bold;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    }
    #looper_content .looper_content_loop_btn_inner {
    width: 65%;
    position: absolute;
    padding: 65% 0 0;
    top: 2%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    box-shadow: .4vw -.4vw 0 0 #a29eb0, .1vw -.2vw 0 0 #a29eb0, .4vw .4vw 0 0 #0E0E10, -.4vw .4vw 0 0 #0E0E10;
    margin: 0;
    }
    #looper_content .looper_content_loop_btn_rump {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 81%;
    padding: 0 0 0;
    background-color: #1E1D23;
    border-radius: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    line-height: 0;
    }
    #looper_content .looper_content_loop_btn_rump:before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 0;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    padding: 100% 0 0;
    position: relative;
    top: 0;
    right: 0;
    }
    #looper_content .looper_content_loop_btn_btn {
    content: '';
    width: 60%;
    padding: 60% 0 0;
    background-color: #1B1A1E;
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 0 0.1vw #a29eb0, 0 0 0 0.2vw #a29eb0, 0 0 0 0.3vw #A29BB0, 0 0 0 1.25vw black;
    z-index: 2;
    display: inline-block;
    margin: 0;
    top: 50%;
    left: 50%;
    font-size: 1.0vw;
    line-height: 0;
    text-align: center;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    }
    #looper_content .looper_content_loop_btn_play {
    border-width: .75vw 0 .75vw 1.75vw;
    border-color: transparent transparent transparent #a29eb0;
    position: absolute;
    padding: 0;
    top: 50%;
    z-index: 2;
    left: 11%;
    display: block;
    border-style: solid;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    }
    #looper_content .looper_content_loop_btn_slush {
    position: absolute;
    padding: 30% 0 0;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    background-color: #a29eb0;
    -webkit-transform: translateY(-50%) rotate(30deg);
            transform: translateY(-50%) rotate(30deg);
    width: 4%;
    }
    #looper_content .looper_content_loop_btn_stop {
    position: absolute;
    padding: 25% 0 0;
    top: 50%;
    left: 65%;
    z-index: 2;
    display: block;
    background-color: #a29eb0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 25%;
    border-radius: 50%;
    }
    @media screen and (max-width: 1200px) {
        #looper_content .looper_content_inner_name {
            font-size: 1vw;
        }
        #looper_content .looper_content_inner_tuning_ttl {
            transform: scale(.5);
            width: 200%;
            margin: 0 0 0 -50%;
            font-size: 1vw;
        }
        #looper_content .looper_content_inner_tuning_roll {
            margin: 5% auto 0;
        }
        #looper_content .looper_content_inner_tuning_inner + span {
            -webkit-transform: scale(.5);
                    transform: scale(.5);
            right: -15%;
        }
        #looper_content .looper_content_inner_tuning_roll + span,
        #looper_content .looper_content_inner_tuning_roll + span + span {
            -webkit-transform: scale(.5);
                    transform: scale(.5);
        }
        #looper_content .looper_content_inner_tuning_roll + span {
            left: 7.5%;
        }
        #looper_content .looper_content_inner_tuning_roll + span + span {
            right: 7.5%;
        }
        #looper_content .looper_content_inner_tuning_left_inner_one > span:first-child {
            -webkit-transform: scale(.5);
                    transform: scale(.5);
            width: 150%;
            margin: 0 0 0 -25%;
        }
        #looper_content .looper_content_inner_tuning_left_inner_two span:first-child,
        #looper_content .looper_content_inner_tuning_left_inner_three span:first-child,
        #looper_content .looper_content_inner_tuning_left_inner_four span:first-child,
        #looper_content .looper_content_inner_tuning_left_inner_five span:first-child,
        #looper_content .looper_content_inner_tuning_left_inner_six span:first-child,
        #looper_content .looper_content_inner_tuning_left_inner_seven span:first-child {
            -webkit-transform: scale(.5);
                    transform: scale(.5);
            line-height: 0;
            font-size: 1.0vw;
        }
        #looper_content .looper_effector_btn_all,
        #looper_content .looper_effector_btn_undo,
        #looper_content .looper_effector_btn_tap,
        #looper_content .looper_effector_btn_start {
            padding: 1.5% 0;
            width: 9%;
            margin: 0 10% 0 0;
        }
        #looper_content .looper_effector_btn_start {
            margin: 0 13% 0 0;      
        }
        #looper_content .looper_effector_btn_all span,
        #looper_content .looper_effector_btn_undo span,
        #looper_content .looper_effector_btn_tap span,
        #looper_content .looper_effector_btn_start span {
            -webkit-transform: scale(.5);
                    transform: scale(.5);
            display: block;
            width: 200%;
            left: -50%;
            position: relative;
            font-size: 1.4vw;
        }
        #looper_content .looper_effector_btn_edit:before {
            -webkit-transform: scale( .5 ) translateX(-100%);
                    transform: scale( .5 ) translateX(-100%);
        }
        #looper_content [class*=looper_effector_btn_type] {
            font-size: 1vw;
        }
        #looper_content .looper_effector_btn_all {
            padding: 0;
        }
        #looper_content .looper_content_replay_stayicon {
            top: 30%;
        }
        #looper_content .looper_content_replay_editicon {
            font-size: 1vw;
            -webkit-transform: translateX(-50%) translateY(-50%) scale(.8);
            transform: translateX(-50%) translateY(-50%) scale(.8);
            padding: 14% 0;
        }
        #looper_content .looper_content_replay_txt {
            -webkit-transform: scale(.6);
                    transform: scale(.6);
            width: 155%;
            margin: 0 0 0 -27.5%;
            font-size: 1.3vw;
        }
        #looper_content .looper_content_loop_btn_num {
            font-size: 1.5vw;
        }
    }
    
    @media screen and (max-width: 767px) {
        #looper_content .looper_content_inner_name {
            font-size: 1vw;
            -webkit-transform: scale(.4);
                    transform: scale(.4);
            width: 80%;
            left: -14%;
            text-indent: 10vw;
        }
        #looper_content .looper_content_inner_tuning_ttl {
            -webkit-transform: scale(.25);
                    transform: scale(.25);
            width: 400%;
            margin: 0 0 0 -150%;
            font-size: 1.5vw;
        }
        #looper_content .looper_content_inner_tuning_roll {
            margin: -5% auto 0;
        }
        #looper_content .looper_content_inner_tuning_inner + span {
            -webkit-transform: scale(.5);
                    transform: scale(.5);
            right: -15%;
        }
        #looper_content .looper_content_inner_tuning_roll + span,
        #looper_content .looper_content_inner_tuning_roll + span + span {
            -webkit-transform: scale(.25);
                    transform: scale(.25);
            font-size: 2vw;
        }
        #looper_content .looper_content_inner_tuning_roll + span {
            left: -10%;
            bottom: -30%;
        }
        #looper_content .looper_content_inner_tuning_roll + span + span {
            right: -10%;
            bottom: -30%;
        }
        #looper_content .looper_content_inner_tuning_left_inner_one > span:first-child {
            -webkit-transform: scale(.25);
                    transform: scale(.25);
            width: 300%;
            margin: 0 0 0 -100%;
            font-size: 1.5vw;
        }
        #looper_content .looper_content_inner_tuning_left_inner_one .looper_content_inner_tuning_left_roll {
            margin: 0% 0 0;
        }
        #looper_content .looper_content_inner_tuning_left_inner_two span:last-child,
        #looper_content .looper_content_inner_tuning_left_inner_three span:last-child {
            margin: 15% 0 0;
        }
        #looper_content .looper_content_inner_tuning_left_inner_four span:first-child,
        #looper_content .looper_content_inner_tuning_left_inner_five span:first-child,
        #looper_content .looper_content_inner_tuning_left_inner_six span:first-child,
        #looper_content .looper_content_inner_tuning_left_inner_seven span:first-child {
            -webkit-transform: scale(0.2);
                    transform: scale(0.2);
        }
        #looper_content .looper_effector_btn_all,
        #looper_content .looper_effector_btn_undo,
        #looper_content .looper_effector_btn_tap,
        #looper_content .looper_effector_btn_start {
            padding: 4.277% 0;
        }
        #looper_content .looper_effector_btn_all span,
        #looper_content .looper_effector_btn_undo span,
        #looper_content .looper_effector_btn_tap span,
        #looper_content .looper_effector_btn_start span {
            -webkit-transform: scale(.3) translateY(-150%);
                    transform: scale(.3) translateY(-150%);
            display: block;
            line-height: 1;
            position: absolute;
            top: 50%;
        }
        #looper_content .looper_effector_btn_edit:before {
            -webkit-transform: scale( .2 ) translateX(-250%);
                    transform: scale( .2 ) translateX(-250%);
            top: -100%;
        }
        #looper_content [class*=looper_effector_btn_type] {
            font-size: 1.5vw;
            width: 30%;
            padding: 15% 0;
            margin: 0 0%;
            -webkit-transform: scale(0.5);
                    transform: scale(0.5);
        }
        #looper_content .looper_content_replay_editicon {
            font-size: 1.5vw;
            -webkit-transform: translateX(-50%) scale(.4);
                    transform: translateX(-50%) scale(.4);
            width: 150%;
            padding: 30% 0;
            top: 0%;
        }
        #looper_content .looper_content_replay_txt {
            -webkit-transform: scale( .25 );
                    transform: scale( .25 );
            width: 400%;
            margin: 0 0 0 -150%;
        }
        #looper_content .looper_content_loop_btn_num {
            transform: scale(.5);
            font-size: 3vw;
            left: 5%;
        }
    }
    
    @media screen and (max-width: 480px) {
        #looper_content .looper_effector_btn_all span,
        #looper_content .looper_effector_btn_undo span,
        #looper_content .looper_effector_btn_tap span,
        #looper_content .looper_effector_btn_start span {
            -webkit-transform: scale(.2) translateY(-225%);
                    transform: scale(.2) translateY(-225%);
        }
    }
    
    
    /**************************
    animation
    **************************/
    
    /*switch btn*/
    label[for*="looper_switch"] {
      position: fixed;
      width: 10%;
      padding: 10% 0 0;
      background: linear-gradient(100deg,#2F2D35 30%,#1f1e23);
      z-index: 1;
      bottom: 20%;
      left: 0;
      box-shadow: 0.1vw 0.1vw 0 0 #2F2D35, 0.2vw 0.2vw 0 0 #2F2D35, 0.3vw 0.3vw 0 0 #1f1e23, 0.4vw 0.4vw 0 0 #1f1e23, 0.5vw 0.5vw 0 0 #1f1e23;
      margin: 0;
      pointer-events: none;
    }
    label[for*="looper_switch"] span {
      position: absolute;
      color: white;
      top: 73%;
      left: 10%;
      background-color: transparent;
      opacity: 1;
      box-shadow: none;
      font-size: 1.2vw;
      line-height: 1;
    }
    label[for*="looper_switch"] span:nth-of-type(2) {
      top: 15%;
    }
    label[for*="looper_switch"]:after {
      content: '';
      position: absolute;
      box-shadow: inset 0.3vw 0.3vw 0.6vw 0px #1f1e23, inset -0.3vw -0.3vw 0.6vw #3f3c47;
      width: 20%;
      height: 80%;
      left: 70%;
      top: 50%;
      -webkit-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
      border-radius: 1vw;
      pointer-events: none;
      z-index: 100;
    }
    label[for*="looper_switch"]:before {
      content:'';
      box-shadow: 0.05vw 0.05vw 0.05vw #6b6874, -0.05vw -0.05vw 0.05vw #d9d4ec;
      width: 15%;
      padding: 40% 0 0;
      position: absolute;
      border-radius: 1vw;
      background: linear-gradient(145deg, #ada9bc, #928e9e);
      left: 70%;
      top: 36%;
      margin-left: 0;
      cursor: pointer;
      -webkit-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
      z-index: 105;
      -webkit-transition: 0.2s all ease;
      transition: 0.2s all ease;
      pointer-events: auto;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"]:before {
      top: 69%;
      transition: 0.2s all ease;
      -webkit-transition: 0.2s all ease;
    }
    input[id*=looper_switch] + label[for*="looper_switch"] input[type="reset"] {
      position: absolute;
      height: 40%;
      top: 50%;
      left: 61%;
      background-color: transparent;
      border: none;
      z-index: 110;
      width: 18%;
      outline: 0;
      pointer-events: auto;
      font-size: 0;
    }
    
    @media screen and (max-width: 480px) {
      label[for*="looper_switch"] {
        width: 15%;
        padding: 15% 0 0;
      }
      label[for*="looper_switch"] span {
        top: 65%;
      }
      label[for*="looper_switch"] span:last-child {
        top: 10%;
      }
    }
    
    /**************************
    looper content
    **************************/
    
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content {
      animation: pointerchange .5s linear 1 19.7s;
      animation-fill-mode: forwards;
    }
    @keyframes pointerchange { 
        0%   { z-index: -1; }
        100% { z-index: auto; }
    }
    
    /**************************
    monitor
    **************************/
    
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_monitor_inner {
      background-color: #6d6d82;
    }
    
    
    /**************************
    abc
    **************************/
    
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_left .looper_effector_btn_typea {
      animation: flashing_abc 1.5s linear 8 1s,
                 flashing_abc-0 0.6666666666s linear 1 13s,
                 flashing_abc-1 0.6666666666s linear 1 15s,
                 flashing_abc-2 0.6666666666s linear 3 17s,
                 flashing_abc-3 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_left .looper_effector_btn_typeb {
      animation: flashing_abc 1.5s linear 8 1s,
                 flashing_abc-0 0.6666666666s linear 2 17.6666666666s,
                 flashing_abc-1 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_left .looper_effector_btn_typec {
      animation: flashing_abc 1.5s linear 8 1s,
                 flashing_abc-0 0.6666666666s linear 1 13.6666666666s,
                 flashing_abc-1 0.6666666666s linear 1 15.6666666666s,
                 flashing_abc-2 0.6666666666s linear 1 18.3333333333s,
                 flashing_abc-3 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_right .looper_effector_btn_typea {
      animation: flashing_abc 1.5s linear 8 1s,
                 flashing_abc-0 0.6666666666s linear 1 13.6666666666s,
                 flashing_abc-1 0.6666666666s linear 1 15.6666666666s,
                 flashing_abc-2 0.6666666666s linear 1 18.3333333333s,
                 flashing_abc-3 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_right .looper_effector_btn_typeb {
      animation: flashing_abc 1.5s linear 8 1s,       
                 flashing_abc-0 0.6666666666s linear 2 17.6666666666s,
                 flashing_abc-1 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_right .looper_effector_btn_typec {
      animation: flashing_abc 1.5s linear 8 1s,
                 flashing_abc-0 0.6666666666s linear 1 13s,
                 flashing_abc-1 0.6666666666s linear 1 15s,
                 flashing_abc-2 0.6666666666s linear 3 17s,
                 flashing_abc-3 .5s linear 1 19.2s;
    }
    
    @keyframes flashing_abc { 
        0%   { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        45%  { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        50%  { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        60%  { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        100% { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
    }
    @keyframes flashing_abc-0 {
        0%   { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        20%  { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        40%  { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        60%  { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        80%  { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        100% { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
    }
    @keyframes flashing_abc-1 {
        0%   { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        20%  { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        40%  { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        60%  { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        80%  { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        100% { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
    }
    @keyframes flashing_abc-2 {
        0%   { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        20%  { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        40%  { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        60%  { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        80%  { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        100% { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
    }
    @keyframes flashing_abc-3 {
        0%   { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        20%  { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        40%  { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        60%  { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        80%  { color: #ffffff; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        100% { color: #ed6d9b; box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
    }
    
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_effector_btn_left_typea"] ~ div[class*="looper_effector_btn_typea"],
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_effector_btn_left_typeb"] ~ div[class*="looper_effector_btn_typeb"],
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_effector_btn_left_typec"] ~ div[class*="looper_effector_btn_typec"],
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_effector_btn_right_typea"] ~ div[class*="looper_effector_btn_typea"],
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_effector_btn_right_typeb"] ~ div[class*="looper_effector_btn_typeb"],
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_effector_btn_right_typec"] ~ div[class*="looper_effector_btn_typec"] {
      color: #ed6d9b;
      box-shadow: 0.1vw 0.1vw 0 0 #ed6d9b, 0.15vw 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b;
    }
    
  
    /**************************
    top center btn
    **************************/
    
    /* all start stop */
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_effector_btn_all {
      animation:flashing-center 1.5s linear 8 1s, flashing-center-0 0.6666666666s linear 4 16.3333333333s, flashing-center-1 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_effector_btn_all span {
      animation:flashing-font 1.5s linear 8 1s, flashing-font-0 0.6666666666s linear 4 16.3333333333s, flashing-font-1 .5s linear 1 19.2s;
    }
    /* undo redo */
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_effector_btn_undo {
      animation:flashing-center 1.5s linear 8 1s, flashing-center-0 0.6666666666s linear 7 14.3333333333s, flashing-center-1 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_effector_btn_undo span {
      animation:flashing-font 1.5s linear 8 1s, flashing-font-0 0.6666666666s linear 7 14.3333333333s, flashing-font-1 .5s linear 1 19.2s;
    }
    /* tap tempo */
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_effector_btn_tap {
      animation:flashing-center 1.5s linear 8 1s, flashing-center-0 0.6666666666s linear 7 14.3333333333s, flashing-center-1 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_effector_btn_tap span {
      animation:flashing-font 1.5s linear 8 1s, flashing-font-0 0.6666666666s linear 7 14.3333333333s, flashing-font-1 .5s linear 1 19.2s;
    }
    /*start stop*/
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_effector_btn_start {
      animation:flashing-center 1.5s linear 8 1s, flashing-center-0 0.6666666666s linear 4 16.3333333333s, flashing-center-1 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_effector_btn_start span {
      animation:flashing-font 1.5s linear 8 1s, flashing-font-0 0.6666666666s linear 4 16.3333333333s, flashing-font-1 .5s linear 1 19.2s;
    }
    
    @keyframes flashing-center {
        0%   { color: #ffffff; box-shadow: 0 0.1vw 0 0 #a29eb0, 0 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        45%  { color: #ffffff; box-shadow: 0 0.1vw 0 0 #a29eb0, 0 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        50%  { color: #ed6d9b; box-shadow: 0 0.1vw 0 0 #ed6d9b, 0 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        60%  { color: #ffffff; box-shadow: 0 0.1vw 0 0 #a29eb0, 0 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        100% { color: #ffffff; box-shadow: 0 0.1vw 0 0 #a29eb0, 0 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
    }
    @keyframes flashing-center-0 {
        0%   { color: #ffffff; box-shadow: 0 0.1vw 0 0 #a29eb0, 0 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        20%  { color: #ed6d9b; box-shadow: 0 0.1vw 0 0 #ed6d9b, 0 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        40%  { color: #ffffff; box-shadow: 0 0.1vw 0 0 #a29eb0, 0 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        60%  { color: #ed6d9b; box-shadow: 0 0.1vw 0 0 #ed6d9b, 0 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        80%  { color: #ffffff; box-shadow: 0 0.1vw 0 0 #a29eb0, 0 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        100% { color: #ed6d9b; box-shadow: 0 0.1vw 0 0 #ed6d9b, 0 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
    }
    @keyframes flashing-center-1 {
        0%   { color: #ffffff; box-shadow: 0 0.1vw 0 0 #a29eb0, 0 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        20%  { color: #ed6d9b; box-shadow: 0 0.1vw 0 0 #ed6d9b, 0 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        40%  { color: #ffffff; box-shadow: 0 0.1vw 0 0 #a29eb0, 0 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        60%  { color: #ed6d9b; box-shadow: 0 0.1vw 0 0 #ed6d9b, 0 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
        80%  { color: #ffffff; box-shadow: 0 0.1vw 0 0 #a29eb0, 0 0.15vw 0 0 #a29eb0; border: .1vw solid #a29eb0; }
        100% { color: #ed6d9b; box-shadow: 0 0.1vw 0 0 #ed6d9b, 0 0.15vw 0 0 #ed6d9b, 0 0 1vw 0.15vw #ed6d9b; border: .1vw solid #ed6d9b; }
    }
    @keyframes flashing-font { 
        0%   { color: #ffffff; }
        45%  { color: #ffffff; }
        50%  { color: #ed6d9b; }
        60%  { color: #ffffff; }
        100% { color: #ffffff; }
    }
    @keyframes flashing-font-0 { 
        0%   { color: #ffffff; }
        20%  { color: #ed6d9b; }
        40%  { color: #ffffff; }
        60%  { color: #ed6d9b; }
        80%  { color: #ffffff; }
        100% { color: #ed6d9b; }
    }
    @keyframes flashing-font-1 { 
        0%   { color: #ffffff; }
        20%  { color: #ed6d9b; }
        40%  { color: #ffffff; }
        60%  { color: #ed6d9b; }
        80%  { color: #ffffff; }
        100% { color: #ed6d9b; }
    }
    
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_center input:checked + label[for*="looper_effector_btn_all"] ~ div[class*="looper_effector_btn_all"],
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_center input:checked + label[for*="looper_effector_btn_undo"] ~ div[class*="looper_effector_btn_undo"],
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_center input:checked + label[for*="looper_effector_btn_tap"] ~ div[class*="looper_effector_btn_tap"],
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_center input:checked + label[for*="looper_effector_btn_start"] ~ div[class*="looper_effector_btn_start"] {
      border: .1vw solid #ed6d9b;
      box-shadow: 0 0.1vw 0 0 #ed6d9b, 0 0.15vw 0 0 #ed6d9b;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_center input:checked + label[for*="looper_effector_btn_all"] ~ div[class*="looper_effector_btn_all"] span,
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_center input:checked + label[for*="looper_effector_btn_undo"] ~ div[class*="looper_effector_btn_undo"] span,
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_center input:checked + label[for*="looper_effector_btn_tap"] ~ div[class*="looper_effector_btn_tap"] span,
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_inner_btn_center input:checked + label[for*="looper_effector_btn_start"] ~ div[class*="looper_effector_btn_start"] span {
      color: #ed6d9b;
    }
  
    /*************************
    edit animation
    *************************/
    
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_replay_editicon {
        animation:flashing-edit 1.5s linear 12 1s, flashing-edit-1 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_content_replay_edit"] + .looper_content_replay_editicon {
        border: .15vw solid #7dbf91;
        box-shadow: 0.1vw 0.1vw 0 0 #7dbf91, 0.15vw 0.15vw 0 0 #1d9640, 0 0 1vw 0.15vw #1d9640;
        color: #7dbf91;
    }
    
    @keyframes flashing-edit {
        0%   { color: #ffffff; border: .15vw solid #a29eb0; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; }
        45%  { color: #ffffff; border: .15vw solid #a29eb0; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; }
        50%  { color: #7dbf91; border: .15vw solid #7dbf91; box-shadow: 0.1vw 0.1vw 0 0 #7dbf91, 0.15vw 0.15vw 0 0 #1d9640, 0 0 1vw 0.15vw #1d9640; }
        60%  { color: #ffffff; border: .15vw solid #a29eb0; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; }
        100% { color: #ffffff; border: .15vw solid #a29eb0; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; }
    }
    @keyframes flashing-edit-1 {
        0%   { color: #ffffff; border: .15vw solid #a29eb0; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; }
        20%  { color: #7dbf91; border: .15vw solid #7dbf91; box-shadow: 0.1vw 0.1vw 0 0 #7dbf91, 0.15vw 0.15vw 0 0 #1d9640, 0 0 1vw 0.15vw #1d9640; }
        40%  { color: #ffffff; border: .15vw solid #a29eb0; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; }
        60%  { color: #7dbf91; border: .15vw solid #7dbf91; box-shadow: 0.1vw 0.1vw 0 0 #7dbf91, 0.15vw 0.15vw 0 0 #1d9640, 0 0 1vw 0.15vw #1d9640; }
        80%  { color: #ffffff; border: .15vw solid #a29eb0; box-shadow: 0.1vw 0.1vw 0 0 #a29eb0, 0.15vw 0.15vw 0 0 #a29eb0; }
        100% { color: #7dbf91; border: .15vw solid #7dbf91; box-shadow: 0.1vw 0.1vw 0 0 #7dbf91, 0.15vw 0.15vw 0 0 #1d9640, 0 0 1vw 0.15vw #1d9640; }
    }
    
    /**************************
    stay btn
    **************************/
  
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_content_replay_stay"] ~ .looper_content_replay_stay .looper_content_replay_stayicon {
      border: .15vw solid #fabf0a;
      box-shadow: 0.1vw 0.1vw 0 0 #fabf0a, 0.15vw 0.15vw 0 0 #fabf0a;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_content_replay_stay"] ~ .looper_content_replay_stay .looper_content_replay_stayicon:after {
      background: #fabf0a;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_content_replay_stay"] ~ .looper_content_loop_btn input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_rump:after {
      padding: 78% 0 0;
      border-radius: 50%;
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 78%;
      box-shadow: 0 0 0 1vw #1B1A1E;
      -webkit-transform: translateY(-50%) translateX(-50%);
              transform: translateY(-50%) translateX(-50%);
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_content_replay_stay"] ~ .looper_content_loop_btn input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_btn {
      box-shadow: 0 0 0 0.1vw #fabf0a, 0 0 0 0.2vw #fabf0a, 0 0 0 0.3vw #fabf0a, 0 0 0 1.25vw black;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_content_replay_stay"] ~ .looper_content_loop_btn input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_play {
      border-color: transparent transparent transparent #fabf0a;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_content_replay_stay"] ~ .looper_content_loop_btn input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_slush {
      background-color: #fabf0a;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content input:checked + label[for*="looper_content_replay_stay"] ~ .looper_content_loop_btn input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_stop {
      background-color: #fabf0a;
    }
   
    /**************************
    play btn animation
    **************************/
    
    /* play btn frame */
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn_rump {
      background-image: linear-gradient(to right, #1E1D23 50%, #da2c3c 0);
      animation:flushing_frame 1.5s linear 12 1s;
      box-shadow: 0 0 1vw 0.25vw #da2c3c;
    }
    @keyframes flushing_frame {
        0%   { box-shadow: 0 0 1vw 0.25vw #da2c3c; }
        45%  { box-shadow: 0 0 1vw 0.25vw #da2c3c; }
        50%  { box-shadow: 0 0 2vw 0.5vw #da2c3c; }
        60%  { box-shadow: 0 0 1vw 0.25vw #da2c3c; }
        100% { box-shadow: 0 0 1vw 0.25vw #da2c3c; }
    }
    
    /* play btn no1 */
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_replay_block:nth-of-type(1) .looper_content_loop_btn_rump::before {
      animation: spin 1s linear 16 3s,
                 bg 2s step-end 8 3s,
                 lpswhitch .5s linear 1 19.2s;
    }
    /* play btn no2 */
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_replay_block:nth-of-type(2) .looper_content_loop_btn_rump::before {
      animation: spin 1s linear 14 5s,
                 bg 2s step-end 7 5s,
                 lpswhitch .5s linear 1 19.2s;
    }
    /* play btn no3 */
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_replay_block:nth-of-type(3) .looper_content_loop_btn_rump::before {
      animation: spin 1s linear 12 7s,
                 bg 2s step-end 6 7s,
                 lpswhitch .5s linear 1 19.2s;
    }
    /* play btn no4 */
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_replay_block:nth-of-type(4) .looper_content_loop_btn_rump::before {
      animation: spin 1s linear 10 9s,
                 bg 2s step-end 5 9s,
                 lpswhitch .5s linear 1 19.2s;
    }
    /* play btn no5 */
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_replay_block:nth-of-type(5) .looper_content_loop_btn_rump::before {
      animation: spin 1s linear 8 11s,
                 bg 2s step-end 4 11s,
                 lpswhitch .5s linear 1 19.2s;
    }
    /* play btn 1-5 icon */
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_replay_block .looper_content_loop_btn_btn {
      animation: flashing-play 1.5s linear 12 1s,
                 flashing-play_1 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_replay_block .looper_content_loop_btn_play {
      border-color: transparent transparent transparent #a29eb0;
      animation: flashing-play-bg_2 1.5s linear 12 1s,
                 flashing-play-bg_2_1 .5s linear 1 19.2s;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_replay_block .looper_content_loop_btn_slush,
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_replay_block .looper_content_loop_btn_stop {
      animation: flashing-play-bg 1.5s linear 12 1s,
                 flashing-play-bg_1 .5s linear 1 19.2s;
    }
    
    /* play btn 1-5 checked */
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input + label + input + label {
      z-index: -1;        
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input:checked + label + input + label {
      z-index: 100;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_rump:before {
      animation: spin-2 1s linear infinite 0s, bg-2 2s step-end infinite 0s;
    }

    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_btn {
      box-shadow: 0 0 0 0.1vw #7dbf91, 0 0 0 0.2vw #7dbf91, 0 0 0 0.3vw #7dbf91, 0 0 0 1.25vw black;
    }

    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_play {
      border-color: transparent transparent transparent #7dbf91;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_slush {
      background-color: #7dbf91;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_stop {
      background-color: #7dbf91;
    }
    /*animation stop*/
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input:checked + label + input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_rump:before {
      animation: none;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input:checked + label + input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_btn {
      box-shadow: 0 0 0 0.1vw #a29eb0, 0 0 0 0.2vw #a29eb0, 0 0 0 0.3vw #A29BB0, 0 0 0 1.25vw black;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input:checked + label + input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_play {
      border-color: transparent transparent transparent #a29eb0;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input:checked + label + input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_slush {
      background-color: #a29eb0;
    }
    input[id*=looper_switch]:checked + label[for*="looper_switch"] ~ #looper_content .looper_content_loop_btn input:checked + label + input:checked + label ~ .looper_content_loop_btn_inner .looper_content_loop_btn_stop {
      background-color: #a29eb0;
    }
    
    @keyframes spin {
        to { transform: rotate(.5turn); }
    }
    @keyframes bg {
        50% { background: #da2c3c; }
    }
    @keyframes spin-2 {
        to { transform: rotate(.5turn); }
    }
    @keyframes bg-2 {
        50% { background: #da2c3c; }
    }
    @keyframes lpswhitch {
        0%    { margin-left: 0; border-radius: 50%; background-color: #1E1D23; box-shadow: 0.1vw 0.1vw 0 0 #1E1D23, 0.15vw 0.15vw 0 0 #1E1D23; }
        20%   { margin-left: 0; border-radius: 50%; background-color: #da2c3c; box-shadow: 0.1vw 0.1vw 0 0 #da2c3c, 0.15vw 0.15vw 0 0 #da2c3c, 0 0 1vw 0.15vw #da2c3c; }
        40%   { margin-left: 0; border-radius: 50%; background-color: #1E1D23; box-shadow: 0.1vw 0.1vw 0 0 #1E1D23, 0.15vw 0.15vw 0 0 #1E1D23; }
        60%   { margin-left: 0; border-radius: 50%; background-color: #da2c3c; box-shadow: 0.1vw 0.1vw 0 0 #da2c3c, 0.15vw 0.15vw 0 0 #da2c3c, 0 0 1vw 0.15vw #da2c3c;}
        80%   { margin-left: 0; border-radius: 50%; background-color: #1E1D23; box-shadow: 0.1vw 0.1vw 0 0 #1E1D23, 0.15vw 0.15vw 0 0 #1E1D23; }
        100%  { margin-left: 0; border-radius: 50%; background-color: #da2c3c; box-shadow: 0.1vw 0.1vw 0 0 #da2c3c, 0.15vw 0.15vw 0 0 #da2c3c, 0 0 1vw 0.15vw #da2c3c; }
    }
    @keyframes flashing-play {
        0%   { box-shadow: 0 0 0 .1vw #a29eb0, 0 0 0 .2vw #a29eb0, 0 0 0 .3vw #a29eb0, 0 0 0 1.25vw #090808; }
        45%  { box-shadow: 0 0 0 .1vw #a29eb0, 0 0 0 .2vw #a29eb0, 0 0 0 .3vw #a29eb0, 0 0 0 1.25vw #090808; }
        50%  { box-shadow: 0 0 0 .1vw #ed6d9b, 0 0 0 .2vw #ed6d9b, 0 0 0 .3vw #ed6d9b, 0 0 0 1.25vw #090808; }
        60%  { box-shadow: 0 0 0 .1vw #a29eb0, 0 0 0 .2vw #a29eb0, 0 0 0 .3vw #a29eb0, 0 0 0 1.25vw #090808; }
        100% { box-shadow: 0 0 0 .1vw #a29eb0, 0 0 0 .2vw #a29eb0, 0 0 0 .3vw #a29eb0, 0 0 0 1.25vw #090808; }
    }
    @keyframes flashing-play-bg_2 {
        0%   { border-color: transparent transparent transparent #a29eb0; }
        45%  { border-color: transparent transparent transparent #a29eb0; }
        50%  { border-color: transparent transparent transparent #ed6d9b; }
        60%  { border-color: transparent transparent transparent #a29eb0; }
        100% { border-color: transparent transparent transparent #a29eb0; }
    }
    @keyframes flashing-play-bg {
        0%   { background-color:#a29eb0; }
        45%  { background-color:#a29eb0; }
        50%  { background-color:#ed6d9b; }
        60%  { background-color:#a29eb0; }
        100% { background-color:#a29eb0; }
    }
    @keyframes flashing-play_1 {
        0%   { box-shadow: 0 0 0 .1vw #a29eb0, 0 0 0 .2vw #a29eb0, 0 0 0 .3vw #a29eb0, 0 0 0 1.25vw #090808; }
        20%  { box-shadow: 0 0 0 .1vw #ed6d9b, 0 0 0 .2vw #ed6d9b, 0 0 0 .3vw #ed6d9b, 0 0 0 1.25vw #090808; }
        40%  { box-shadow: 0 0 0 .1vw #a29eb0, 0 0 0 .2vw #a29eb0, 0 0 0 .3vw #a29eb0, 0 0 0 1.25vw #090808; }
        60%  { box-shadow: 0 0 0 .1vw #ed6d9b, 0 0 0 .2vw #ed6d9b, 0 0 0 .3vw #ed6d9b, 0 0 0 1.25vw #090808; }
        80%  { box-shadow: 0 0 0 .1vw #a29eb0, 0 0 0 .2vw #a29eb0, 0 0 0 .3vw #a29eb0, 0 0 0 1.25vw #090808; }
        100% { box-shadow: 0 0 0 .1vw #ed6d9b, 0 0 0 .2vw #ed6d9b, 0 0 0 .3vw #ed6d9b, 0 0 0 1.25vw #090808; }
    }
    @keyframes flashing-play-bg_2_1 {
        0%   { border-color: transparent transparent transparent #a29eb0; }
        20%  { border-color: transparent transparent transparent #ed6d9b; }
        40%  { border-color: transparent transparent transparent #a29eb0; }
        60%  { border-color: transparent transparent transparent #ed6d9b; }
        80%  { border-color: transparent transparent transparent #a29eb0; }
        100% { border-color: transparent transparent transparent #ed6d9b; }
    }
    @keyframes flashing-play-bg_1 {
        0%   { background-color:#a29eb0; }
        20%  { background-color:#ed6d9b; }
        40%  { background-color:#a29eb0; }
        60%  { background-color:#ed6d9b; }
        80%  { background-color:#a29eb0; }
        50%  { background-color:#ed6d9b; }
    }
              
            
!

JS

              
                
              
            
!
999px

Console