@keyframes snackbar-anim {
    0% {bottom: -6em}
    10% {bottom: 0.5em}
    90% {bottom: 0.5em}
    100% {bottom: -6em}
}

.snackbar {
    position: fixed;
    transition: bottom 0.5s, opacity 0.5s;
    bottom: -6em;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.5em;
    padding: 1em;
}

.snackbar.active {
    animation-name: snackbar-anim;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

.bg-success {
    background-color: #44ff88;
    color: black;
}

.bg-error {
    background-color: #dd22aa;
    color: white;
}

.personality-selection {
    display: inline-block;
    background-color: lightgray;
    margin: 0.4em;
    border: 1px solid black;
    border-radius: 1em;
    padding: 0.8em;
}

.personality-selection:has(input:checked) {
    background-color: #44ff88;
    color: black;
}

.personality-selection input, .emoji-selection input {
    display: none;
}

.personality-selection img {
    width: 2em;
    height: 2em;
    margin-right: 0.4em;
    border-radius: 50% 50%;
    vertical-align: middle;
}

#emoji-selections {
    margin: auto;
    max-width: 1000px;
}

.emoji-selection:has(input:checked) {
    border: 1px solid red;
}