.stars{display:flex;margin-top:1em;flex-direction:row-reverse;justify-content:space-between}input.star{display:none}label.star{float:right;padding:10px;cursor:pointer;transition:transform .2s ease}label.star svg{fill:#ccc;transition:fill .25s ease,transform .2s ease}label.highlighted svg{fill:gold}label.highlighted-one svg{fill:#f62}label.highlighted-five svg{fill:#fe7}label.star:hover{transform:rotate(-15deg) scale(1.3)}@keyframes moveStarsUp{0%{transform:translateY(0);opacity:1}to{transform:translateY(-700px);opacity:0}}@keyframes moveStarsDown{0%{transform:translateY(-700px);opacity:0}to{transform:translateY(0);opacity:1}}.animate-stars{animation:moveStarsUp .5s ease forwards}.animate-stars-inverse{animation:moveStarsDown .5s ease forwards}@keyframes moveCommentsUp{0%{transform:translateY(700px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes moveCommentsDown{0%{transform:translateY(0);opacity:0}to{transform:translateY(700px);opacity:1}}.comment-box{opacity:0;transform:translateY(700px)}.comment-box.animate-comments{animation:moveCommentsUp .5s ease forwards}.comment-box.animate-comments-inverse{animation:moveCommentsDown .5s ease forwards}textarea{background-color:transparent;resize:none;width:100%;height:7em;padding:.7em;border-radius:.5rem;font-size:.9em;border:1px solid #ccc;transition:all .2s ease;margin-top:10px}textarea:hover{border:1px solid #CBD5E0}textarea:focus{box-shadow:0 0 0 2px #4d90fe;outline:none}