#play ul,
.full #player {
    padding: 0;
    margin: 0;
}

#nowplaying,
#play ul li,
#result div button {
    padding: 0.5rem;
    margin: 0;
}

#readme {
    padding: 0.5rem;
}

#readme button,
#readme ruby,
#title,
#collaboration {
    word-break: break-word;
}

#readme button rt {
    font-size: 1rem;
}

#join,
#dialog button {
    font-size: 200%;
}

dialog a,
#nowplaying strong {
    font-size: 150%;
}

#nowplaying,
#result div button,
#play ul li {
    font-size: 125%;
}

#button,
#link {
    font-size: 100%;
}

#nowplaying strong,
#result input:checked+label {
    font-weight: 600;
}

#link,
#result input:checked+label {
    text-decoration: underline solid;
}

@media screen and (max-width: 550px) {
    #play {
        font-size: 3vw;
    }

    #play ul li {
        padding: 1vw;
        margin: 0;
    }

    #readme {
        padding: 1vw;
    }

    #readme button rt {
        font-size: 3vw;
    }
}

#nowplaying strong:before {
    content: "▶️";
    margin-right: 0.5rem;
}

#nowplaying {
    display: flex;
    vertical-align: top;
    justify-content: space-between;
}

#result div,
#join {
    position: sticky;
    top: 0;
}

#play ul {
    position: relative;
    list-style: inside none;
}

#result div,
#dialog button {
    float: right;
}

#result input,
.full #result li,
.full #readme,
#nowplaying::-webkit-details-marker {
    display: none;
}

#player {
    pointer-events: none;
    user-select: none;
    margin: 0 0.5rem;
}

#dialog {
    width: 700px;
    max-width: calc(100% - 2em - 6px);
    max-height: calc(100% - 2em - 6px);

}


#readme button,
.full #player,
.full #result div {
    width: 100%;
}

.full #player {
    pointer-events: auto;
    user-select: auto;
}

.full #player {
    height: 56.25dvw;
    max-width: 100%;
    max-height: calc(100dvh - 12.5rem);
}