<div class="root">
  <div class="app"></div>
  <div class="circle circle1"></div>
  <div class="circle circle2"></div>
</div>

<div id="fixed">
  <input type="checkbox" id="switch" name="switch" />
  <label for="switch"></label>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --white: #ffffff;
  --light: #f0eff3;
  --black: #000000;
  --dark-blue: #1f2029;
  --dark-light: #353746;
  --red: #3c0076;
  --yellow: #a500ff;
  --grey: #ecedf3;
}

body {
  width: 100vw;
  height: 100vh;
  background: #D91B1A;
}

.root {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  // position: relative;
}

.app {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(180deg, #EC6E38 0%, #DD1B1B 100%) no-repeat 0 63.06667vw;
  background-size: 100vw 34.13333vw;
  padding-top: 5.33333vw;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 50% / 50%;
    background-repeat: no-repeat;
  }
  
  &::before {
    background-image: linear-gradient(180deg, #EC6E38 63%, #DD1B1B 100%);
    background-size: 190.26667vw 81.06667vw;
    width: 190.26667vw;
    height: 81.06667vw;
    left: -45.2vw;
    top: 0.4vw;
    z-index: 1;
  }
  &::after {
    background-image: linear-gradient(0deg, #EC6E38 0%, #DD1B1B 100%);
    background-size: 144.66667vw 81.06667vw;
    width: 144.66667vw;
    height: 81.06667vw;
    left: -22.4vw;
    top: -9.06667vw;
    z-index: 2;
  }
}

.circle {
    position: absolute;
    border-radius: 50% / 50%;
    background-repeat: no-repeat;
    left: 50%;
    transform: translateX(-50%);
  
  &.circle1 {

      background-image: linear-gradient(0deg, #EC6E38 0%, #DD1B1B 100%);
      background-size: 84.8vw 60.13333vw;
      width: 84.8vw;
      height: 60.13333vw;
      top: -12.8vw;
      z-index: 3;
  }
  &.circle2 {
      background-image: linear-gradient(180deg, #EC6E38 0%, #DD1B1B 88%);
      background-size: 122.8vw 30.13333vw;
      width: 122.8vw;
      height: 30.13333vw;
      top: 85.73333vw;
      z-index: 4;
  }
}


#fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  transform: translate3d(-50%, -50%, 0);
  z-index: 999;
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  visibility: hidden;
}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label{
  position: relative;
  width: 70px;
  display: inline-block;
  padding: 0;
  text-align: center;
  height: 6px;
  border-radius: 4px;
  background-image: linear-gradient(298deg, var(--red), var(--yellow));
  z-index: 100 !important;
}
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
  position: absolute;
  font-weight: 900;
  cursor: pointer;
  top: -17px;
  z-index: 2;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 300ms linear; 
}
[type="checkbox"]:not(:checked) + label:before {
  content: 'Off';
  left: 0;
  color: var(--grey);
  background-color: var(--dark-light);
  box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
[type="checkbox"]:checked + label:before {
  content: 'On';
  left: 30px;
  color: var(--yellow);
  background-color: var(--dark-blue);
  box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}

const checkedEle = document.querySelector('#switch');
const rootEle = document.querySelector('.root');

checkedEle.addEventListener('change',(e)=>{
  
  if (e.target.checked) {
    rootEle.style.position = 'relative'
  } else {
    rootEle.style.position = 'static'
  }
})