<div class="rating-stars">
		<input type="radio" name="rating" id="rs0"><label for="rs0"></label>
		<input type="radio" name="rating" id="rs1"><label for="rs1"></label>
		<input type="radio" name="rating" id="rs2"><label for="rs2"></label>
		<input type="radio" name="rating" id="rs3" checked><label for="rs3"></label>
		<input type="radio" name="rating" id="rs4"><label for="rs4"></label>
		<input type="radio" name="rating" id="rs5"><label for="rs5"></label>
		<span class="number"></span>
	</div>

:root {
	--tb: #ffffff40;
	--tbh: #ffffff70;
	--tran: all 0.5s ease 0.1s;	
}		

body {
	margin: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #11114e;
	perspective: 150vmin;
	background: radial-gradient( circle at 50% 0%, #1d659f, #11114e);	
}

body * {
	box-sizing: border-box;
	transform-style: preserve-3d;
}

.rating-stars {
	display: block;
	width: 65vmin;
	padding: 3vmin;
	border-radius: 5vmin;
	position: relative;
	display: flex;
	justify-content: center;
	transform: rotateX(15deg);
}

input { display: none; }

label {
	width: 10vmin;
	height: 10vmin;
	cursor: pointer;
	margin: 0.5vmin 1.5vmin;
	transition: var(--tran);
	transition-delay: 0s;
	position: relative;
}

label:before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: "\2605";
	z-index: 2;
	font-size: 11vmin;
	line-height: 11vmin;
	color: #b1ddff;
	text-align: center;
	transform: translateY(0vmin);
	transition: var(--tran);
	text-shadow: 
		1px 1px 1px var(--tb), 
		-1px -1px 1px var(--tb), 
		-1px 0px 1px var(--tb), 
		1px 0px 1px var(--tb), 		
		0vmin 0.1vmin 1px #1d8be1, 
		0vmin 0.1vmin 1px #1d8be1, 
		0vmin 0.2vmin 1px #1b81d1, 
		0vmin 0.2vmin 1px #1b81d1, 
		0vmin 0.3vmin 1px #1972b7, 
		0vmin 0.3vmin 1px #1972b7, 
		0vmin 0.4vmin 1px #1a76bd, 
		0vmin 0.4vmin 1px #1a76bd, 
		0vmin 0.5vmin 1px #196fb1, 
		0vmin 0.5vmin 1px #196fb1, 
		0vmin 0.6vmin 1px #1868a5, 
		0vmin 0.6vmin 1px #1868a5, 
		0vmin 0.7vmin 1px #155f97, 
		0vmin 0.7vmin 1px #155f97, 
		0vmin 0.8vmin 1px #125689, 
		0vmin 0.8vmin 1px #125689, 
		0vmin 0.9vmin 1px #104e7d, 
		0vmin 0.9vmin 1px #104e7d, 
		0vmin 1.0vmin 1px #104975, 
		0vmin 1.1vmin 1px #104975, 
		0vmin 1.1vmin 1px #0e4169, 
		0vmin 1.2vmin 1px #0e4169, 
		0vmin 1.2vmin 1px #0c395d, 
		0vmin 1.3vmin 1px #0c395d, 
		0vmin 1.3vmin 1px #0a3151, 
		0vmin 1.4vmin 1px #0a3151, 
		0vmin 1.4vmin 1px #092c49, 
		0vmin 1.5vmin 1px #092c49, 
		0vmin 1.5vmin 1px #072239, 
		0vmin 1.6vmin 1px #072239, 
		0vmin 1.6vmin 3px #00000020;
	filter: drop-shadow(0px 5px 10px #008dff) drop-shadow(0px 5px 30px #008dff);		
}

label:hover:before {
	color: #e2f2ff;
	filter: drop-shadow(0px 5px 15px #b1ddff) drop-shadow(0px 5px 30px #b1ddff);
}




/*** unchecked:before ***/
input:checked + label ~ label:before, 
input:checked + label ~ label:hover:active:before {
	transition: var(--tran);
	color: #ffedb9;
	color: #18242f;
	transform: translateY(1.5vmin);
	filter: none;
	text-shadow: 
		1px 1px 1px var(--tbh), 
		-1px -1px 1px var(--tbh), 
		-1px 0px 1px var(--tbh), 
		1px 0px 1px var(--tbh), 
		0vmin 0.01vmin 1px #1d8be1, 
		0vmin 0.02vmin 1px #1d8be1, 
		0vmin 0.03vmin 1px #1b81d1, 
		0vmin 0.04vmin 1px #1b81d1, 
		0vmin 0.05vmin 1px #1972b7, 
		0vmin 0.06vmin 1px #1972b7, 
		0vmin 0.07vmin 1px #1a76bd, 
		0vmin 0.08vmin 1px #1a76bd, 
		0vmin 0.09vmin 1px #196fb1, 
		0vmin 0.10vmin 1px #196fb1, 
		0vmin 0.11vmin 1px #1868a5, 
		0vmin 0.12vmin 1px #1868a5, 
		0vmin 0.13vmin 1px #155f97, 
		0vmin 0.14vmin 1px #155f97, 
		0vmin 0.15vmin 1px #125689, 
		0vmin 0.16vmin 1px #125689, 
		0vmin 0.17vmin 1px #104e7d, 
		0vmin 0.18vmin 1px #104e7d, 
		0vmin 0.19vmin 1px #104975, 
		0vmin 0.20vmin 1px #104975, 
		0vmin 0.21vmin 1px #0e4169, 
		0vmin 0.22vmin 1px #0e4169, 
		0vmin 0.23vmin 1px #0c395d, 
		0vmin 0.24vmin 1px #0c395d, 
		0vmin 0.25vmin 1px #0a3151, 
		0vmin 0.26vmin 1px #0a3151, 
		0vmin 0.27vmin 1px #092c49, 
		0vmin 0.28vmin 1px #092c49, 
		0vmin 0.29vmin 1px #072239, 
		0vmin 0.3vmin 1px #072239, 
		0vmin 0.5vmin 3px #00000020;
}



/*** unchecked:hover:before ***/
input:checked + label ~ label:hover:before, 
label ~ label:hover:active:before {	
	color: #2196F3;
	transform: translateY(1vmin);
	text-shadow: 
		1px 1px 1px var(--tbh), 
		-1px -1px 1px var(--tbh), 
		-1px 0px 1px var(--tbh), 
		1px 0px 1px var(--tbh), 
		0vmin 0.02vmin 1px #1d8be1, 
		0vmin 0.04vmin 1px #1d8be1, 
		0vmin 0.06vmin 1px #1b81d1, 
		0vmin 0.08vmin 1px #1b81d1, 
		0vmin 0.10vmin 1px #1972b7, 
		0vmin 0.12vmin 1px #1972b7, 
		0vmin 0.14vmin 1px #1a76bd, 
		0vmin 0.16vmin 1px #1a76bd, 
		0vmin 0.18vmin 1px #196fb1, 
		0vmin 0.20vmin 1px #196fb1, 
		0vmin 0.22vmin 1px #1868a5, 
		0vmin 0.24vmin 1px #1868a5, 
		0vmin 0.26vmin 1px #155f97, 
		0vmin 0.28vmin 1px #155f97, 
		0vmin 0.30vmin 1px #125689, 
		0vmin 0.32vmin 1px #125689, 
		0vmin 0.34vmin 1px #104e7d, 
		0vmin 0.36vmin 1px #104e7d, 
		0vmin 0.38vmin 1px #104975, 
		0vmin 0.40vmin 1px #104975, 
		0vmin 0.42vmin 1px #0e4169, 
		0vmin 0.44vmin 1px #0e4169, 
		0vmin 0.46vmin 1px #0c395d, 
		0vmin 0.48vmin 1px #0c395d, 
		0vmin 0.50vmin 1px #0a3151, 
		0vmin 0.52vmin 1px #0a3151, 
		0vmin 0.54vmin 1px #092c49, 
		0vmin 0.56vmin 1px #092c49, 
		0vmin 0.58vmin 1px #072239, 
		0vmin 0.60vmin 1px #072239, 
		0vmin 1vmin 3px #00000020;	
}


label[for=rs1]:before {
	transition-delay: 0.05s;
}
label[for=rs2]:before {
	transition-delay: 0.1s;
}
label[for=rs3]:before {
	transition-delay: 0.15s;
}
label[for=rs4]:before {
	transition-delay: 0.2s;
}
label[for=rs5]:before {
	transition-delay: 0.25s;
}




/*** Reload ***/
label[for=rs0] {
	position: absolute;
	top: 20vmin;
	display: flex;
	align-items: center;
	justify-content: center;
}

label[for=rs0]:before {
    --ar: #18242f;
	content: "";
    position: absolute;
    width: 12vmin;
    height: 12vmin;
    border-radius: 100%;
	transform: rotate(0deg);
    background: 
		radial-gradient(circle at 50% 135%, #fff0 40%, var(--ar) calc(40% + 1px) 45%, #fff0 calc(45% + 1px) 100%), 
		radial-gradient(circle at 50% -35%, #fff0 40%, var(--ar) calc(40% + 1px) 45%, #fff0 calc(45% + 1px) 100%), 
		conic-gradient(from -45deg at 50% 60%, var(--ar) 0 25%, #fff0 0 100%), 
		conic-gradient(from 135deg at 50% 40%, var(--ar) 0 25%, #fff0 0 100%);
    background-size: 100% 20%, 100% 20%, 1.5vmin 1.5vmin, 1.5vmin 1.5vmin;
    background-repeat: no-repeat;
    background-position: 0% 27%, 0% 73%, 77% 47%, 23% 52%;
    transition: all 0.5s ease 0s;
    filter: drop-shadow(1px 1px 1px #0008) drop-shadow(-1px -1px 1px #fff2);
}

label[for=rs0]:hover:before {
	--ar: #e2f2ff;
	transform: rotate(270deg);
	transition: all 0.5s ease 0s;
	filter: 
		drop-shadow(-1px -1px 1px #0008) 
		drop-shadow(1px 1px 1px #fff2) 
		drop-shadow(0px 5px 15px #b1ddff) 
		drop-shadow(0px 5px 30px #b1ddff);
}


/*** Number ***/
.number {
    position: absolute;
    margin-top: 20.9vmin;
    font-size: 3vmin;
    font-family: Arial, serif;
    color: #b1ddff;
    z-index: -1;
    filter: 
		drop-shadow(1px 1px 1px #000) 
		drop-shadow(-1px -1px 1px #fff4) 
		drop-shadow(0px 0px 5px #008dff) 
		drop-shadow(0px 0px 10px #008dff) 
		drop-shadow(0px 0px 15px #008dff);
}

#rs0:checked ~ .number {
    color: #18242f;
    font-weight: bold;
    filter: 
		drop-shadow(1px 1px 1px #000) 
		drop-shadow(-1px -1px 1px #fff4);
    text-shadow: none;
}

.number:after {
	content: "0";
}

#rs1:checked ~ .number:after {
	content: "1";
}

#rs2:checked ~ .number:after {
	content: "2";
}

#rs3:checked ~ .number:after {
	content: "3";
}

#rs4:checked ~ .number:after {
	content: "4";
}

#rs5:checked ~ .number:after {
	content: "5";
}