/* ============== Do not delete this ========== */
.section-selector-1 { background-color: var(--gray-200) }
.col-3 h3 { margin-bottom: 16px }


/* =============== Add your custom CSS below =========== */

header.theme-dark .badge { color: var(--white-000) }
header.theme-dark .badge { background-color: var(--black-000) }
header.theme-dark h1 { color: var(--green-400) }
header.theme-dark .container-btn a.btn:nth-child(1):link,
header.theme-dark .container-btn a.btn:nth-child(1):visited { color: var(--white-000) }

header.theme-dark .container-btn a.btn:nth-child(1):focus,
header.theme-dark .container-btn a.btn:nth-child(1):hover,
header.theme-dark .container-btn a.btn:nth-child(1):active { color: var(--green-400) }

header.theme-dark .container-btn a.btn:nth-child(1):focus,
header.theme-dark .container-btn a.btn:nth-child(1):hover,
header.theme-dark .container-btn a.btn:nth-child(1):active { background-color: var(--black-000) }

header.theme-dark .container-btn a.btn:nth-child(1):link,
header.theme-dark .container-btn a.btn:nth-child(1):visited { border-color: var(--white-000) }

header.theme-dark .container-btn a.btn:nth-child(1):focus,
header.theme-dark .container-btn a.btn:nth-child(1):hover,
header.theme-dark .container-btn a.btn:nth-child(1):active { border-color: var(--green-400) }

header.theme-dark .container-btn a.btn:nth-child(2):link,
header.theme-dark .container-btn a.btn:nth-child(2):visited { color: var(--black-000) }

header.theme-dark .container-btn a.btn:nth-child(2):focus,
header.theme-dark .container-btn a.btn:nth-child(2):hover,
header.theme-dark .container-btn a.btn:nth-child(2):active { color: var(--black-000) }

header.theme-dark .container-btn a.btn:nth-child(2):link,
header.theme-dark .container-btn a.btn:nth-child(2):visited { background-color: var(--green-400) }

header.theme-dark .container-btn a.btn:nth-child(2):focus,
header.theme-dark .container-btn a.btn:nth-child(2):hover,
header.theme-dark .container-btn a.btn:nth-child(2):active { background-color: var(--green-500) }

header.theme-dark .container-btn a.btn:nth-child(2):link,
header.theme-dark .container-btn a.btn:nth-child(2):visited { border-color: var(--green-400) }

header.theme-dark .container-btn a.btn:nth-child(2):focus,
header.theme-dark .container-btn a.btn:nth-child(2):hover,
header.theme-dark .container-btn a.btn:nth-child(2):active { border-color: var(--green-500) }


header.theme-dark .badge {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
    text-decoration-color: var(--green-400);
    text-decoration-style: wavy;
    background-color: black !important;
    color: #fff !important;
}
 
header.theme-dark h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    letter-spacing: 4px;
    font-size: var(--font-size-xxxl);
}
 
header.theme-dark h2 {
    font-family: 'Zilla Slab', serif;
    font-weight: 400;
}