/* I always reset all the html elements */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-family: sans-serif;
	min-height: 100vh;
	color: #555;
	padding: 30px;
	background-color: white;
}
.ratings-wrapper{
	border: thin solid #999;
	display: inline-block;
	margin-bottom: 20px;
}
.ratings{
	display: flex;
	flex-direction: row-reverse;
}
.ratings span{
	cursor: pointer;
	transition: color .2s;
	font-size: 50px;
}
.ratings span:hover{
	color: orange;
}
.ratings span:hover ~ span{
	color: orange;
}
.ratings span[data-clicked]{
	color: orange;
}
.ratings span[data-clicked] ~ span{
	color: orange;
}
.reset{
	font-size: 18px;
	text-decoration: none;
	background-color: #4f5a78;
	padding: 15px 50px;
	display: inline-block;
	margin-top: 20px;
	color: #fff;
	border: none;
	cursor: pointer;
}
.reset:hover{
	filter: brightness(1.2);
}