.vote-button { width: 100%; background-color: var(--accent-color); color: var(--text-fg-on-accent); text-align: left; border-radius: 25px; font-size: 200%; padding: 1em; margin-bottom: 0.25em; } .vote-choices { display: flex; flex-wrap: wrap; } .vote-choice { font-size: 40%; background-color: var(--accent-color-bright); color: var(--text-fg-on-accent-bright); border-radius: 4px; padding-left: 4px; padding-right: 4px; margin-right: 0.5em; } @media (hover:hover) { button:hover .vote-choice { background-color: var(--accent-color); color: var(--text-fg-on-accent); } } .ambiguity-group { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: var(--accent-color); margin-bottom: 0.25em; padding: 0; border-radius: 10px; } .ambiguity-button { border-radius: 10px; margin: 0; } .ambiguity-button.selected { background-color: var(--accent-color-bright); color: var(--text-fg-on-accent-bright); } @keyframes bounce { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); } 20% { transform: translateY(-5px); animation-timing-function: cubic-bezier(0.333, 0, 0,667, 0.333); } 40% { transform: translateY(0); } 100% { transform: translateY(0); } } .typing span { font-size: 150%; line-height: 0; display: inline-block; animation-name: bounce; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } .typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; } .typing.active span { opacity: 1.0; } .typing.idle span { opacity: 0.0; transition-property: opacity; transition-duration: 6s; transition-delay: 3s; }