@font-face {
    font-family: "Vegur";
    src: url("../fonts/Vegur-Light.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0; 
}

@font-face {
    font-family: "Vegur";
    src: url("../fonts/Vegur-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0; 
}

@font-face {
    font-family: "Vegur";
    src: url("../fonts/Vegur-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0; 
}

@font-face {
    font-family: "NotoSansMono";
    src: url("../fonts/NotoSansMono-VariableFont_wdth,wght.ttf") format('truetype-variations');
    font-style: normal;
}

:root {
    --libreoffice-font-sans-serif: "Vegur";
    font-size: 16px;
}

/* For desktop */
@media (min-width: 992px) {
    :root {
        font-size: 18px;
    }
}

[data-theme="light"] {
    --libreoffice-primary-color: #106802;
    --libreoffice-primary-color-rgb: 16, 104, 2;
    --libreoffice-primary-color-rgba-25: 16, 104, 2, .25;

    --libreoffice-darken-primary-color: #082d01;
    --libreoffice-darken-primary-color-rgb: 8, 45, 1;

    --libreoffice-code-block-bg: snow;

    --libreoffice-bg-color: white;
    --libreoffice-hover-bg-color: #f8f9fa;
    --libreoffice-hover-color: var(--libreoffice-primary-color);

    --libreoffice-body-color: #212529;
    --libreoffice-body-color-rgb: 33,37,41;

    --libreoffice-code-color: #530260;
    --libreoffice-code-block-bg: snow;

    --libreoffice-switch-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23106802'/%3e%3c/svg%3e");

    .d-dark-theme {
        display: none;
    }
}

[data-theme="dark"] {
    --libreoffice-primary-color: #dfe;
    --libreoffice-primary-color-rgb: 221, 255, 238;
    --libreoffice-primary-color-rgba-25: 221, 255, 238, .25;

    --libreoffice-darken-primary-color: #2b734f;
    --libreoffice-darken-primary-color-rgb: 43, 115, 79;

    --libreoffice-code-block-bg: snow;

    --libreoffice-bg-color: #002a1a;
    --libreoffice-hover-bg-color: #004a2a;
    --libreoffice-hover-color: var(--libreoffice-primary-color);

    --libreoffice-body-color: #efefef;
    --libreoffice-body-color-rgb: 33,37,41;

    --libreoffice-code-color: #FBBCF8;
    --libreoffice-code-block-bg: #004a00;

    --libreoffice-switch-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dfe'/%3e%3c/svg%3e");

    .d-light-theme {
        display: none;
    }

    .icon:before {
        background-color: white;
    }
}

:root {
    --bs-body-bg: var(--libreoffice-bg-color);
    --bs-body-color: var(--libreoffice-body-color);
    --bs-body-color-rgb: var(--libreoffice-body-color-rgb);

    --bs-primary: var(--libreoffice-primary-color);
    --bs-primary-rgb: var(--libreoffice-primary-color-rgb);
    --bs-link-color: var(--libreoffice-primary-color);
    --bs-nav-link-color: var(--libreoffice-primary-color);
    --bs-link-color-rgb: var(--libreoffice-primary-color-rgb);
    --bs-link-hover-color: var(--libreoffice-darken-primary-color);
    --bs-link-hover-color-rgb: var(--libreoffice-darken-primary-color-rgb);
    --bs-link-opacity: 1;
    --bs-code-color: var(--libreoffice-code-color);
    --code-block-bg-color: var(--libreoffice-code-block-bg);
 
    --bs-black: #000;
    --bs-blue: #0369A3;
    --bs-cyan: #1C99E0;
    --bs-font-sans-serif: "Vegur";
    --bs-font-monospace: "NotoSansMono";
    --bs-green: #43C330;
    --bs-link-decoration: underline;
    --bs-orange: #D36118;
    --bs-purple: #530260;
    --bs-white: #fff;
    --bs-yellow: #E9B913;

    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
}

.pagination {
    --bs-pagination-active-color: var(--libreoffice-bg-color);
    --bs-pagination-active-bg: var(--libreoffice-primary-color);
    --bs-pagination-active-border-color: var(--libreoffice-primary-color);
}

.btn-outline-primary {
  --bs-btn-color:var(--libreoffice-primary-color);
  --bs-btn-border-color:var(--libreoffice-primary-color);
  --bs-btn-hover-color: var(--libreoffice-bg-color);
  --bs-btn-hover-bg:var(--libreoffice-primary-color);
  --bs-btn-hover-border-color:var(--libreoffice-primary-color);
  --bs-btn-focus-shadow-rgb:13,110,253;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--libreoffice-primary-color);
  --bs-btn-active-border-color:var(--libreoffice-primary-color);
  --bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:var(--libreoffice-primary-color);
  --bs-btn-disabled-bg:transparent;
  --bs-btn-disabled-border-color:var(--libreoffice-primary-color);
  --bs-gradient:none
}

/* For switch controls */
.form-check-input:focus {
    border-color: var(--libreoffice-primary-color);
    box-shadow: 0 0 0 .25rem rgba(var(--libreoffice-primary-color-rgba-25));
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: var(--libreoffice-switch-svg);
}

.form-check-input:checked {
    background-color: var(--libreoffice-darken-primary-color);
    border-color: var(--libreoffice-primary-color);
}

/* end switch controls */

h6 {
    font-size: 1.2rem;
}

.emphasized {
    font-size: 1.2rem;
}

.font-light {
    font-weight: 200;
}

code.block {
    display: block;
    background-color: var(--code-block-bg-color);
    border: var(--bs-border-width) solid var(--bs-black);
    padding: 0.6rem;
    margin-bottom: 1rem;
}

.external-link:after {
    content: ' \1F517';
}

/* Custom component nav-color */
header.nav-color {
    background-color: #106802;
    color: white;
}

header.nav-color .nav {
    --bs-nav-link-color: white;
    --bs-link-hover-color-rgb: snow;
    --bs-link-hover-color: snow;
}

header.nav-color .nav a:hover {
    text-decoration: underline;
}

header.nav-color > div.border-bottom {
    border-bottom: none !important;
}

header.nav-color img.d-light-theme {
    display: none;
}

header.nav-color img.d-dark-theme {
    display: block;
}