/* ReviewDetails.css */ body{ background-color: #13323b; } h1 { text-align: center; } .Top-Bar{ margin-top: -8cm; } .Top-Bar > img{ position: relative; top: 7.85cm; } .Top-Bar > h1{ position: relative; top: 2.2cm; font-size: 3cm; color: #EAA9BC } .Top-Bar > form{ position: relative; left: 32cm; } .journal-form { font-size: 120%; width: 50%; display: none; margin: auto; color: #ccb3bb; border: 3px solid rgb(7, 0, 0); background-color: #b52754; } .meal-name { font-size: 150%; margin: left; width: 50%; border: 3px; color: rgb(228, 119, 119); text-align: left; } .hidden, .rating:not(:checked) > input { /* Hide radio circles while star rating */ display: none; } /* Unchecked stars */ .rating:not(:checked) > label { /* Make stars line up sideways and not vertically */ float: right; /* Hide label text */ width: 1em; overflow: hidden; white-space: nowrap; /* Star default color and size */ font-size: 200%; line-height: 1.2; color: #b3b3cc; } .rating > label:active { position: relative; } .rating:not(:checked) > label::before { content: "★"; } /* Checked star color */ .rating > input:checked ~ label { color: #ffbf00; } .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: orangered; } .rating > input:checked + label:hover, .rating > input:checked ~ label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label { color: orangered; }