#app {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.options-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#app .options-container .option-button {
  background-color: #90ee90;
  border: none;
  padding: 15px 30px;
  margin: 5px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: 25px; /* Make the buttons rounded */
  width: 250px; /* Fixed width */
  height: 30px; /* Fixed height */
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

#app .options-container .selected {
    background-color: gold; /* Gold background for selected options */
    position: relative; /* Positioning context for the tick */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.option-button:hover {
  background-color: #ddd;
}

/* Add a tick on the top right corner of selected buttons */
#app .options-container .selected::after {
  content: '\2713'; /* Unicode for checkmark */
  position: absolute;
  top: -5px; /* Adjust to move up */
  right: -5px; /* Adjust to move right */
  color: white;
  background-color: green;
  border-radius: 50%;
  padding: 2px 6px;
}

.vote-button {
  margin-top: 20px;
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: 25px; /* Make the buttons rounded */
  width: 350px; /* Fixed width */
  height: 50px; /* Fixed height */
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.vote-button.disabled {
  background-color: #CCC;
  cursor: default;
}