<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'
  }
})