@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 :root {
	 --primary-color: #fe9f5b;
	 --secondary-color: #e7e8eb;
	 --tertiary-color: #fff;
	 --text-color: #000;
	 --disabled-text-color: #b9bdc9;
	 --bg-color: #fff;
}
 [data-theme="dark"] {
	 --primary-color: #ffe5b5;
	 --secondary-color: #0a0d12;
	 --tertiary-color: #fff;
	 --text-color: #fff;
	 --disabled-text-color: #31374c;
	 --bg-color: #1c2138;
}
 * {
	 margin: 0;
	 padding: 0;
}
 .main-wrapper {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 height: 100vh;
	 background: var(--bg-color);
}
 .main-wrapper .text {
	 font-size: 18px;
	 font-weight: 600;
	 letter-spacing: 1px;
	 color: var(--text-color);
	 font-family: 'Poppins', 'sans-serif';
}
 .main-wrapper .disabled {
	 color: var(--disabled-text-color);
}
 .main-wrapper .theme-switch-wrapper {
	 position: relative;
	 width: 100px;
	 height: 50px;
	 margin: 10px;
	 background: var(--secondary-color);
	 border-radius: 50px;
}
 .main-wrapper .theme-switch-wrapper input {
	 display: none;
}
 .main-wrapper .theme-switch-wrapper .slider-wrapper {
	 position: relative;
	 width: 100%;
	 height: 100%;
	 top: 0;
	 right: 0;
	 left: 0;
	 bottom: 0;
}
 .main-wrapper .theme-switch-wrapper .slider-wrapper .star {
	 position: absolute;
	 background-color: var(--tertiary-color);
	 transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
	 border-radius: 50%;
}
 .main-wrapper .theme-switch-wrapper .slider-wrapper .star-1 {
	 top: 10px;
	 left: 35px;
	 z-index: 0;
	 width: 30px;
	 height: 3px;
}
 .main-wrapper .theme-switch-wrapper .slider-wrapper .star-2 {
	 top: 18px;
	 left: 28px;
	 z-index: 1;
	 width: 30px;
	 height: 3px;
}
 .main-wrapper .theme-switch-wrapper .slider-wrapper .star-3 {
	 top: 27px;
	 left: 40px;
	 z-index: 0;
	 width: 30px;
	 height: 3px;
}
 .main-wrapper .theme-switch-wrapper .slider-wrapper .star-4, .main-wrapper .theme-switch-wrapper .slider-wrapper .star-5, .main-wrapper .theme-switch-wrapper .slider-wrapper .star-6 {
	 opacity: 0;
	 transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
 .main-wrapper .theme-switch-wrapper .slider-wrapper .star-4 {
	 top: 16px;
	 left: 11px;
	 z-index: 0;
	 width: 2px;
	 height: 2px;
	 transform: translate3d(3px, 0, 0);
}
 .main-wrapper .theme-switch-wrapper .slider-wrapper .star-5 {
	 top: 32px;
	 left: 17px;
	 z-index: 0;
	 width: 3px;
	 height: 3px;
	 transform: translate3d(3px, 0, 0);
}
 .main-wrapper .theme-switch-wrapper .slider-wrapper .star-6 {
	 top: 36px;
	 left: 28px;
	 z-index: 0;
	 width: 2px;
	 height: 2px;
	 transform: translate3d(20px, 0, 0);
}
 .main-wrapper .theme-switch-wrapper .theme-btn-slider {
	 position: absolute;
	 margin: 5px;
	 width: 40px;
	 height: 40px;
	 border-radius: 50%;
	 background: var(--primary-color);
	 transform: translateX(0px);
	 transition: transform 0.6s;
}
 .main-wrapper .theme-switch-wrapper input:checked + .slider-wrapper .theme-btn-slider {
	 background: transparent;
	 transform: translateX(34px);
	 box-shadow: 15px 0px 0 0 var(--primary-color);
}
 .main-wrapper .theme-switch-wrapper input:checked + .slider-wrapper .star-1 {
	 width: 2px;
	 height: 2px;
}
 .main-wrapper .theme-switch-wrapper input:checked + .slider-wrapper .star-2 {
	 width: 4px;
	 height: 4px;
	 transform: translate3d(20px, 0, 0);
}
 .main-wrapper .theme-switch-wrapper input:checked + .slider-wrapper .star-3 {
	 width: 2px;
	 height: 2px;
	 transform: translate3d(-7px, 0, 0);
}
 .main-wrapper .theme-switch-wrapper input:checked + .slider-wrapper .star-4, .main-wrapper .theme-switch-wrapper input:checked + .slider-wrapper .star-5, .main-wrapper .theme-switch-wrapper input:checked + .slider-wrapper .star-6 {
	 opacity: 1;
}
 .main-wrapper .theme-switch-wrapper input:checked + .slider-wrapper .star-4 {
	 transform: translate3d(10px, 0, 0);
	 transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
 .main-wrapper .theme-switch-wrapper input:checked + .slider-wrapper .star-5 {
	 transform: translate3d(0, 0, 0);
	 transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
 .main-wrapper .theme-switch-wrapper input:checked + .slider-wrapper .star-6 {
	 transform: translate3d(25px, 0, 0);
	 transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}