@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
font-family: 'Inter', Arial, sans-serif;
background-color: #f4f4f4;
color: var(--muted);
margin: 0;
padding: 0;
}

.pageArticle {
width: 1000px;
background: white;
margin: 10px auto 30px auto;
padding: 5px 20px 20px 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
h1 {
text-align: center;
color: #0078D4;
}

.highlight {
color: #0078D4;
font-weight: bold;
font-family: 'Inter', sans-serif;
}

h2 {
display: flex;
background: #005a9c;
color: white;
border-radius: 5px;
align-items: center;
margin: 15px 10px;
padding: 8px 20px;
font-size: 1.3rem;
font-weight: 600;
}

h2 span:nth-child(1) {
    flex-grow: 1; /* Allows the title to take up remaining space */
    text-align: center;
    font-weight: bold;
}

h2 span:nth-child(2) {
    font-size: 0.7em;
    opacity: 0.7;
    white-space: nowrap; /* Prevents date from wrapping */
    padding-right: 0.7em;
}

h2.centered {
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
height: 1.2em; /* Needed for vertical centering */
border: 1px solid black;
margin-top: 1.2em;
}

h4 {
font-size: 1.1rem;
color: var(--ink);
}

div.leftRightContainer {
    display: flex;
    justify-content: space-evenly; /* Places one div on the left, one on the right */
}

div.leftRightContainer + div.leftRightContainer {
margin-top: 1em;
}

/* Deprecated. Replaced by div.leftRightContainer */
br.separator {
margin: 0;
padding: 0;
clear: both;
}

code {
background: #e0e0ff;
}

.cta {
text-align: center;
margin-top: 20px;
}

.cta a {
background: #0078D4;
color: white;
padding: 12px 20px;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
/*display: inline-block;*/
transition: background 0.3s;
}
.cta a:hover {
background: #0056A3;
}

figure {
text-align: left;
margin: 0;
}

figure + figure {
  margin-top: 1em; /* Default rule */
}

div.leftRightContainer > figure + figure {
  margin-top: 0em; /* Override when inside .leftRightContainer */
}

figcaption {
text-align: center;
font-style: italic;
font-size: 10pt;
font-family: 'Inter', sans-serif;
}

figcaption:not(:first-of-type) {
margin-top: 1em;
}

table.shaded {
border-collapse: collapse;
border-spacing: 0;
font-family: Inter;
font-feature-settings: 'tnum';
font-size: 10pt;
margin: 0.5em auto 0 auto;
padding: 0;
}

table.shaded th {
text-align: center;
background-color: #e8e8ee;
font-size: 10pt;
font-family: Inter;
margin: 0.5em auto 0 auto;
padding: 0;
}
table.shaded th {
text-align: center;
padding: 0.2em 0.6em 0.2em 0.6em;
background-color: #d8e8e8;
}
table.shaded tr td {
padding: 0.2em 0.6em 0.2em 0.6em;
}

table.shaded td:nth-child(n+1) {
text-align: right;
}

table.shaded tr:nth-child(odd) {
background-color: #efffff;
}

table.shaded tr:nth-child(even) {
background-color: #e3f3f3;
}

/* Like shaded but left aligned */
table.shadedLeft {
border-collapse: collapse;
border-spacing: 0;
font-family: Inter;
font-size: 10pt;
margin: 0.5em auto 0 auto;
padding: 0;
}

table.shadedLeft th {
text-align: center;
background-color: #e8e8ee;
font-size: 10pt;
font-family: Inter;
margin: 0.5em auto 0 auto;
padding: 0;
}
table.shadedLeft th {
text-align: center;
padding: 0.2em 0.6em 0.2em 0.6em;
background-color: #d8e8e8;
}
table.shadedLeft tr td {
padding: 0.2em 0.6em 0.2em 0.6em;
}

table.shadedLeft td:nth-child(n+1) {
text-align: left;
}

table.shadedLeft tr:nth-child(odd) {
background-color: #efffff;
}

table.shadedLeft tr:nth-child(even) {
background-color: #e3f3f3;
}