/* Java and Bedrock, side by side
----------------------------------------
 */

.join-row{
    display: flex;
    gap: 20px;
}

.join-row > div{
    flex: 1; /* Both sides get the same width */
    display: flex;
    flex-direction: column;
}

.join-row .box{
    flex: 1; /* Makes both boxes the same height */
}

.box{
    padding: 20px;
}

/* Fields: a small label, then the thing to copy with its button
----------------------------------------
 */

main.content-page .field-label{
    color: var(--muteText);
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.field{
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Lets the Copy button fill the whole side of the box */
    gap: 10px;
    background-color: var(--primaryColor);
    padding-left: 12px;
    margin-bottom: 15px;
    min-height: 46px; /* Keeps fields without a Copy button the same height as the ones with one */
}

.field code{
    align-self: center;
    padding: 8px 0;
}

code{
    font-family: monospace;
    font-size: 1.05rem;
    overflow-wrap: anywhere; /* Lets the long commands wrap on small screens */
}

.copy{
    border: none;
    padding: 0;
    width: 90px; /* Wide enough for "Copied!" so the button doesn't grow when clicked */
    flex-shrink: 0;
    color: #fff;
    background-color: var(--secondaryColor);
    cursor: pointer;
}

.copy:hover{
    background-color: var(--secondaryColorDark);
}

/* Steps
----------------------------------------
 */

ol{
    margin: 20px 0 15px 0;
    padding-left: 20px;
}

ol li{
    padding: 3px 0;
}

@media only screen and (width < 600px) {
    .join-row{
        flex-direction: column;
        gap: 0;
    }
}