body {
    max-width: 78vh;
    margin: auto;
}

div.choose-name {
    font-size: large;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

div.choose-name > * {
    margin: 0.5em;
}

div.choose-name * {
    font-size: large;
}

div.choose-name .join-as {
    display: flex;
    justify-content: space-between;
}

div.choose-name .join-as button {
    margin: 1em;
}

div.story {
    margin: 1em;
    text-align: center;
}

div.ballot {
    display: flex;
    justify-content: center;
}

div.ballot > div {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}

div.ballot > div > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30vmin;
    max-width: 23vh;
    height: 30vmin;
    max-height: 23vh;
    border: solid thin;
    margin: 1vmin;
    font-size: 16vmin;
}

div.ballot.pending > div > div > div.voter {
    display: none;
}

div.ballot > div > div > div.voter {
    position: absolute;
    width: 30vmin;
    max-width: 23vh;
    height: 30vmin;
    max-height: 23vh;
    margin: 0.5em;
    font-size: small;
}

div.ballot.final span {
    color: #ccc;
}

div.ballot div.chosen {
    background-color: #19a4af;
    color: white;
}

div.ballot div.winner {
    box-shadow: 0.5vw 0.5vw 0.5vw black;
    position: relative;
    top: -0.5vw;
    left: -0.5vw;
}

div.participants,div.role,div.new-story {
    margin: 1em;
}

div.new-story input {
    width: 50%;
    font-size: large;
}

div.new-story button {
    margin: 0.5em;