:root {
  --clr-blue: #3d5376;
  --clr-green: #8dc748;
  --clr-accent-green: #80bc45;
  --clr-border: #c2d82e;
  --clr-black: #141414;
  --clr-white: #f1f2f2;
}

.poll {
  background: var(--clr-blue);
  max-width: 300px;
  color: var(--clr-white);
  padding: 2rem;

  .poll__header {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .poll__options {
    display: flex;
    flex-direction: column;

    .option-group {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;

      &:not(:first-child) {
        margin-top: 0.5rem;
      }

      .poll-option {
        background-color: transparent;
        border-color: var(--clr-white);
        display: block;
      }

      .option-label {
        margin-left: 0.5rem;
      }
    }

    .poll__button {
      background: var(--clr-green);
      font-weight: bold;
      color: var(--clr-black);
      padding: 0.5rem 2rem;
      margin-top: 2rem;
      border: 1px solid var(--clr-border);
      align-self: center;
      transition:
        background 0.3s,
        color 0.3s,
        border 0.3s;

      &:hover {
        border-color: var(--clr-white);
        background-color: var(--clr-accent-green);
        color: var(--clr-white);
      }
    }
  }
}