:root {
    /* Base Color: #2B3E50 */
    --primary-0: #2B3E50;	/* Main Primary color */
    --primary-1: #5F7386;
    --primary-2: #41576D;
    --primary-3: #1B3146;
    --primary-4: #0C1F32;
    
    --secondary-1-0: #333156;	/* Main Secondary color (1) */
    --secondary-1-1: #6B6990;
    --secondary-1-2: #4C4975;
    --secondary-1-3: #22204B;
    --secondary-1-4: #121035;
    
    --secondary-2-0: #7B6D3E;	/* Main Secondary color (2) */
    --secondary-2-1: #CEBF8E;
    --secondary-2-2: #A7975F;
    --secondary-2-3: #6C5B24;
    --secondary-2-4: #4C3E0E;
    
    --complement-0: #7B623E;	/* Main Complement color */
    --complement-1: #CEB48E;
    --complement-2: #A78A5F;
    --complement-3: #6C4E24;
    --complement-4: #4C330E;
    
    --transparent:#ffffff00;

    --foreground: var(--complement-4);
    --background: var(--primary-0);
}

html {
    padding: 1rem;
    color: var(--foreground);
    background-color: var(--background);
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial;
}

a, a:hover {
    color: var(--secondary-2-1);
}
a:visited {
    color: var(--complement-1);
}

h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.2rem;
}

li > ul {
    margin: 0.5rem 0;
}

li p {
    margin-bottom: 0.5rem;
}

/* Media Size specific overrides */
@media (min-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

blockquote {
    display: flex;
    padding: 1em;
    margin: 1em 0;
    border-left: var(--primary-1) 5px solid;
}

.statement{
    text-align: center;
    font-size: 1.5rem;
}