:root {
    /* AES Brand Colors */
    --aes-aqua: #53B7ED;
    --aes-core-blue: #063B59;
    --aes-white: #FFFFFF;

    /* MRL Brand Colors */
    --mrl-gold: #EEC000;
    --mrl-cream: #FEFCF2;
    --mrl-black: #000000;

    --border-sm: 2px;
    --border-md: 4px;

    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.5rem;
    --font-2xl: 1.75rem;
    --font-3xl: 2.5rem;
    --font-4xl: 3.5rem;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
}

body {
    background-color: var(--mrl-cream);
    font-family: "Arial", sans-serif;
    font-size: var(--font-base);
    font-weight: normal;
    font-style: normal;
    padding-top: 0.25in
}

/* Horizontal Rule Dividing Line */
hr {
    height: 2px;
    background-color: black;
    margin: 32px 0 32px 0
}

table {
    border-collapse: collapse; /* This is key! */
}

th, td {
    border: 1px solid #000; /* Add border to all cells */
    padding: 8px;
}

ul ul {
    padding-left: 20px; /* Less indentation for nested lists */
}

/**
 * The bullet lists need some right margin on mobile to account fot the left indent caused by the bullets.
 * This looks ok, but is probably not the "right" way to do it.
 */
.bullet-list {
    margin-right: var(--space-lg);
}

.bullet-point {
    font-family: 'Arial', sans-serif;
    color: var(--mrl-black);
    font-size: var(--font-base);
    margin-bottom:  var(--space-sm);
    margin-top:  var(--space-sm);
}

.centered-text {
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: var(--font-2xl);
}

.flex-margin {
    margin-left: 2%;
    margin-right: 2%;
}

.guide-table {
    margin: var(--space-md) var(--space-xl);
    width: auto;
    border: 1px solid #000; /* Add border to all cells */
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    font-family: "Arial", sans-serif;
    font-size: var(--font-base);
}

.navigation {
    font-family: 'Arial', sans-serif;
    font-size: var(--font-lg);
    margin: var(--space-md) var(--space-sm);
    text-align: center;
}

.page-title {
    color: var(--mrl-black);
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: var(--font-3xl);
    margin: var(--space-md);
    text-align: center;
}

.page-title-banner {
    background: var(--mrl-gold);
    color: var(--mrl-black);
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: var(--font-3xl);
    margin: var(--space-md);
    padding: var(--space-md);
    text-align: center;
}

/* Margin for paragraph sections */
.para {
    margin: var(--space-md);
}

.paragraph-large {
    margin: auto;
    width: 80%;
    padding: 10px;
    font-family: 'Arial', sans-serif;
    font-size: var(--font-lg);
    line-height: 1.2;
}

.section-title {
    font-family: 'Arial', sans-serif;
    color: var(--mrl-black);
    font-weight: bold;
    font-size: var(--font-2xl);
    margin: var(--space-md);
    text-align: center;
}

.sub-title {
    font-family: 'Arial', sans-serif;
    color: var(--mrl-black);
    font-size: var(--font-lg);
    line-height: 1.2;
    margin: var(--space-md);
    text-align: center;
}

.sku-code-guide {
    margin: var(--space-xs) var(--space-md);
}

@media (max-width: 768px) {
    .page-title {
        color: var(--mrl-black);
        font-family: 'Arial', sans-serif;
        font-weight: bold;
        font-size: var(--font-xl);
        margin: var(--space-xs) var(--space-md) ;
        text-align: center;
    }
}