#app{padding:0}body{background:linear-gradient(to top,#fbc2eb 0%,#a6c1ee 100%);display:grid;place-items:center}.card{background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 10px 15px -3px #0000001a}span.star{font-size:34px;display:inline-block;background-size:cover;background-repeat:no-repeat;cursor:pointer;width:50px;height:50px;stroke-width:1px}span.star svg{width:100%;height:100%;pointer-events:none;stroke:#d3d3d3;stroke-width:1px;fill:transparent;transition:all .5s cubic-bezier(.075,.82,.165,1)}span.star.active svg{fill:orange;stroke:orange}#rating{min-height:24px;margin:10px 0;text-align:center}