html {
    scroll-behavior: smooth;
}

:root {
    --header-height: 4rem;

    /* Gender */
    --gender-m-bg: hsl(211, 79%, 15%);
    --gender-m-border: hsl(211, 80%, 40%);
    --gender-m-badge-bg: hsl(211, 80%, 25%);
    --gender-m-color: hsl(211, 80%, 50%);

    --gender-f-bg: hsl(324, 79%, 15%);
    --gender-f-border: hsl(323, 80%, 40%);
    --gender-f-badge-bg: hsl(323, 80%, 25%);
    --gender-f-color: hsl(323, 80%, 50%);
}

[data-bs-theme="dark"] {

    /* Gender - Dark */
    --gender-m-bg: hsl(211, 79%, 12%);
    --gender-m-border: hsl(211, 80%, 30%);
    --gender-m-badge-bg: hsl(211, 80%, 20%);
    --gender-m-color: hsl(211, 80%, 40%);

    --gender-f-bg: hsl(324, 79%, 12%);
    --gender-f-border: hsl(323, 80%, 30%);
    --gender-f-badge-bg: hsl(323, 80%, 20%);
    --gender-f-color: hsl(323, 80%, 40%);
}

body {
    background-color: light-dark(#a0a0a0, #212529);
    color: light-dark(#212529, #f8f9fa);
}

header {
    height: var(--header-height);
}

[data-page-height] {
    min-height: calc(100dvh - var(--header-height));
}

.nav-link.active > span {
    display: inline !important;
}

.avatar {
    position: relative;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    border: 2px solid var(--bs-border-color, #dee2e6) !important;
    box-sizing: border-box;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.75) !important;
}

.bg-avatar {
    background-color: rgb(25 25 25) !important;
}

.badge.tag {
    background-color: rgb(90 76 58) !important;
    color: #ffecd3 !important;
    text-decoration: none;
}


.gender_m {
    --bs-card-bg: var(--gender-m-bg);
    --bs-card-border-color: var(--gender-m-border);
    --bs-card-color: #ffffff;
    --bs-badge-bg: var(--gender-m-badge-bg);
    --bs-badge-color: #ffffff;
    --theme-link-color: var(--gender-m-color);
}

.gender_f {
    --bs-card-bg: var(--gender-f-bg);
    --bs-card-border-color: var(--gender-f-border);
    --bs-card-color: #ffffff;
    --bs-badge-bg: var(--gender-f-badge-bg);
    --bs-badge-color: #ffffff;
    --theme-link-color: var(--gender-f-color);
}

.cursor-pointer { cursor:pointer; }