/* Bilingual Blog CSS */
:root {
    --sei-la: rgb(238, 159, 63);
    --fundo-fundo-cor: bisque;
    --fundo-cor: burlywood;
    --fonte-cor: black;
    --pt-fonte-cor: #906056;
    --in-fonte-cor: rgb(0, 128, 102);
    --cor-de-destaca: rgb(241, 216, 162);
    --cor-de-ancora: darkred;
    --cor-de-acento: sienna;
    --cor-de-quotacao-texto: #4b2e05;
    --cor-de-quotacao-fundo: rgb(217, 166, 100);
    --js-fundo-cor: #484848;
    --js-texto-cor: burlywood;
}

html {
    width: 100%;
    background-color: var(--fundo-fundo-cor);
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

body {
    width: 100%;
    margin: 0 min(2rem, 4%);
    padding: 0 min(2rem, 6%);
    background-color: var(--fundo-cor);
    color: var(--fonte-cor);
    font-size: 1.25rem;
    overflow-x: hidden;
}

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

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

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

p {
    text-align: left;
}

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

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

a:any-link:hover {
    text-decoration: underline !important;
}

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

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

.quote {
    padding: 0.3em 0 0.3em 1em;
    border-left: solid var(--cor-de-acento) 0.6em;
    background-color: var(--cor-de-quotacao-fundo);
    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-responsivo {
    text-align: center;
}

.alinhar-a-esquerda-responsivo {
    text-align: center;
}

.hidden-just-for-reference {
    display: none;
}

.language-javascript {
    border-radius: 0.5em;
    padding: 1em;
    background-color: var(--js-fundo-cor);
    color: var(--js-texto-cor);
    width: auto;
}

details {
    background-color: var(--cor-de-acento);
    border-radius: 0.4em;
    padding: 0.3em;
    margin-bottom: 0.1em;
    cursor: pointer;
}

.lado-esquerdo {
    grid-column-start: 1;
    order: 1;
}

.lado-esquerdo-ou-ambos {
    grid-column-start: 1;
    order: 1;
}

.lado-direito {
    order: 2;
}

.lado-direito-ou-nenhum {
    order: 2;
}

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

    .lado-esquerdo-ou-ambos {
        grid-column: 1 / 3;
    }

    .lado-direito-ou-nenhum {
        display: none;
    }

    .lado-esquerdo {
        order: 1;
        grid-column-start: 1;
    }

    .lado-direito {
        order: 1;
        grid-column-start: 2;
    }

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

    div#skip-to-english-dialog {
        display: none;
    }
}

/* Seesaw css */
.indented {
    margin-left: 20px;
}
.setup-description {
    background-color: var(--fundo-fundo-cor);
    border-radius: 5px;
    border: 2px solid var(--sei-la);
    margin: 0em 2em 2em 2em;
    max-width: fit-content;
}
.description-header {
    border-bottom: 2px solid var(--sei-la);
    padding: 0.5em 1.5em;
}
.setup-description ul {
    padding: 0px 1.5em;
    margin-left: 2em;
}
img.seesaw-img {
    max-height: 10em;
}
img.blog-img {
    max-height: 14.5em;
    max-width: 100%;
    border-radius: 4%;
    box-shadow: 2px 2px 10px; 
}

.underline,
a.underline {
    text-decoration: underline !important;
}

article {
    width: 700px;
    margin-left: 50px;
}
h1 {
    margin-block-end: 0;
}
h2 {
    margin-block-end: 0;
}
h3 {
    margin-block-start: 0;
}
footer {
    height: 100px;
}

.ex {
    color: var(--cor-de-acento);
}
section.footnote {
    padding: 8px 20px 0 20px;
}
.footnote {
    color: var(--cor-de-acento);
    font-size: small;
}

 blockquote {
    border-left: 4px solid var(--cor-de-acento);
    margin-left: 0;
    padding-left: 1em;
    color: var(--cor-de-quotacao-texto);
}
blockquote:before {
    color: var(--cor-de-acento);
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}
.attribution {
    text-align: right;
}

#toc_container {
    background: var(--cor-de-quotacao-fundo) none repeat scroll 0 0;
    border: 1px solid var(--cor-de-acento);
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 4px 5px 5px 15px;
    width: auto;
}
#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none;
    padding-left: 10px;
    padding-right: 15px;
}
ul.toc_list a:link {
    text-decoration: none;
}
ul.toc_list a:hover {
    text-decoration: underline;
}
ul.toc_list a:active {
    text-decoration: underline;
}
ul.toc_list a:visited {
    color: var(--fonte-cor);
}