:root {
    --fundo-cor: #0F3040;
    --fonte-cor: #906056;
    --pt-fonte-cor: #906056;
    --in-fonte-cor: rgb(0, 128, 102);
    --quote-line-color: black;
    --quote-bg-color: #0e2b39;
    --cor-de-destaca: rgb(241, 216, 162);
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--fundo-cor);
    color: var(--fonte-cor);
    font-size: 1.25rem;
}

header {
    text-align: center;
    margin: 1em 0;
}

main {
    display: grid;
    text-align: center;
    margin: 1em 0;
    grid-template-columns: 1fr;
}

footer {
    text-align: center;
    margin: 1em 0;
}

a:any-link,
a:any-link.pt {
    color: var(--pt-fonte-cor);
}

a:any-link.en {
    color: var(--in-fonte-cor);
}

.col {
    text-align: left;
    padding: 0 2em;
}

.pt {
    order: 1;
    color: var(--pt-fonte-cor);
}

.en {
    order: 2;
    color: var(--in-fonte-cor);
}

.pt-quote {
    order: 1;
}

.en-quote {
    order: 2;
}

.quote {
    padding: 0.3em 0 0.3em 1em;
    border-left: solid var(--quote-line-color) 0.6em;
    background-color: var(--quote-bg-color);
    border-radius: 1em;
    margin: 1em 2em;
}

.play-title {
    width: 100%;
    text-align: center;
    font-weight: bold;
}

.play-section {
    width: 100%;
    text-align: center;
    font-style: italic;
    margin-bottom: 1em;
}

.numero-de-linha {
    padding-right: 1em;
}

.destaca {
    color: var(--cor-de-destaca);
}

.alinhar-a-direita {
    text-align: right;
}

@media (min-width: 650px) {
    main {
        grid-template-columns: 1fr 1fr;
    }

    .en-quote {
        display: none;
        order: 1;
    }

    .pt-quote {
        grid-column: 1 / 3;
        order: 1;
    }

    .side-1 {
        grid-column-start: 1;
    }

    .side-2 {
        grid-column-start: 2;
    }

    .pt {
        order: 1;
    }

    .en {
        order: 1;
    }

    .single-col-spacer {
        display: none;
    }
}