<div class="overlay">
  <div class="popup">
    <h2>How much do you like popups?</h2>
    <form>
      <input id="option1" type="radio" name="rating"/>
      <label for="option1">1</label>
      <input id="option2" type="radio" name="rating"/>
      <label for="option2">2</label>
      <input id="option3" type="radio" name="rating"/>
      <label for="option3">3</label>
      <input id="option4" type="radio" name="rating"/>
      <label for="option4">4</label>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</div>

* {
  box-sizing: border-box;
}

@keyframes beat {
  from { 
    transform: scale(1) 
  }
  to { 
    transform: scale(2) 
  }
}


body, html {
  height: 100%;
  overflow: hidden;
}

.overlay {
  background: grey;
  border: 1px solid grey;
  display: block;
  padding: 64px;
  
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  padding: 32px;
  background: white;
  
  border-radius: 8px;
  border: 1px solid grey;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 1);
  min-width: 240px;
  max-width: 80%;
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
}

@support (::before) {
  input {
    display: none;
  }
}

label {
	cursor: pointer;
  margin-right: 2rem;
}

label::before {
	content: '❤';
	font-size: 1.5rem;
	display: inline-block;
	margin-right: 10px;
	color: #e0e1e2;
	transform: scale(1);
	transition: 0.2s transform;
}

label:hover::before {
  color: #c6c8c9;
}

input:checked + label::before {
  color: black;
}

@supports (transform: scale(2)) and (animation-name: beat) {
  input:checked + label::before {
    color: #e0e1e2;
    animation-name: beat;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
}

label::before {
  animation-duration: 0.3s;
}

label:nth-of-type(1)::before {
  animation-duration: 0.9s;
}

label:nth-of-type(2)::before {
  animation-duration: 0.5s;
}

label:nth-of-type(3)::before {
  animation-duration: 0.25s;
}

label:nth-of-type(4)::before {
  animation-duration: 0.1s;
}

h2 {
  margin-bottom: 2rem;
}

button {
 background-color: #e0e1e2;
  color: #5c5c5c;
  padding: 16px;
  font-weight: bold;
  margin-top: 16px;
  margin-right: 12px;
  font-weight: bold;
  
  border-width: 0;
  border-radius: 4px;
  background-color: rgba(225, 225, 225, 1);
  padding: 1rem;
  color: rgba(95, 95, 95, 1);
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  cursor: pointer;
  font-weight: 700;
  margin-top: 1rem;
  margin-right: 0.75rem;
}

button:hover {
  background-color: #c6c8c9;

  background-color: rgb(198,200,201);
}