@charset "UTF-8";

:root {
    --color-1: #0D1F44; 
    --color-2: #17346D;
    --color-3: #c6aa2c;
    --color-4: #dbc76b;
    --color-5: #ffc107;
    --color-6: #f7f7f7;
    --color-7: #ffffff;
    --color-8: #000000;
    --color-9: #555555;
}
body.dark-mode {
    --color-1: #0D1F44; 
    --color-2: #17346D;
    --color-3: #c6aa2c;
    --color-4: #dbc76b;
    --color-5: #ffc107;
    --color-6: #2a2a2a;
    --color-7: #000000;
    --color-8: #ffffff;
    --color-9: #a1a1a1;
}
main.container{
    margin-top: 30px;
    margin-bottom: 30px;
}
#article{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;  
}
@media (min-width: 775px) {
#article {
    grid-template-columns: 3fr 1fr; /* conteúdo à esquerda, dados à direita */
    align-items: start;             /* topo alinhado */
}

/* garante que as divs se comportem bem dentro do grid */
#article .content {
    order: 1;
}
#article .personal-data {
    order: 2;
}
}

main.container div{
    padding: 20px;
}
article div.content{
    text-align: justify;
}
h1, h2, h3{
    text-align: left;
    margin: 20px 0px 10px 0px;
}
table{
    margin: auto;
}
table tr th#img{
    text-align: center;
}
table tr th img{
    max-width: 100%;
}
div table th img{
    margin: auto;
}
div.personal-data{
    border: 1px solid var(--color-8);
}
th{
    font-size: 0.9em;
    vertical-align: top;
    text-align: left;
    padding: 5px 5px 2.5px 0px;
}
th#title{
    text-align: center;
}
p{
    text-indent: 30px;
    margin-bottom: 0px;
}
p.date{
    margin-bottom: 15px;
}
li{
    margin: 10px 0px;
}
.article-index {
    background-color: var(--color-6);
    border-left: 4px solid var(--color-3);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
}
.article-index p {
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--color-8);
margin: 20px;
}
.article-index ul {
list-style: none;
padding-left: 0;
}
.article-index li {
margin: 4px 0;
}
.article-index a {
text-decoration: none;
color: var(--color-3);
transition: color 0.2s;
}
.article-index a:hover {
color: var(--color-3);
text-decoration: underline;
}
p.date{
    color: var(--color-9);
}