/* bootstrap-icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");

/* fonts */
/* https://fonts.google.com/share?selection.family=Dosis:wght@300;400;500 */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;600&display=swap');
/* https://fonts.google.com/share?selection.family=Rasa:wght@300;400;500 */
@import url('https://fonts.googleapis.com/css2?family=Rasa:wght@300;400;500&display=swap');
/* https://fonts.google.com/share?selection.family=Zen%20Kurenaido */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');

/* root */
:root {
    scroll-behavior: smooth;
    /* colors lightmode */
    --fc1-light: #000;
    --fc2-light: #ddd;
    --bc1-ultralight-light: #eee;
    --bc2-light: #fff;
    --cSecondary-light: #6c757d;
    --cNavLink-light: rgba(255, 255, 255, 0.55);
    /* color darkmode */
    --fc1-dark: #fff;
    --fc2-dark: #000;
    --bc1-ultralight-dark: #111;
    --bc2-dark: #000;
    --cSecondary-dark: #fff;
    --cNavLink-dark: #fff;
}

/* lightmode */
@media(prefers-color-scheme: light) {
    :root {
        --fc1: var(--fc1-light);
        --fc2: var(--bc1-ultralight-light);
        --bc1-ultralight: var(--bc1-ultralight-light);
        --bc2: var(--bc2-light);
        --cSecondary: var(--cSecondary-light);
        --cNavLink: var(--cNavLink-light);
    }
    .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
}

/* darkmode */
@media(prefers-color-scheme: dark) {
    :root {
        --fc1: var(--fc1-dark);
        --fc2: var(--bc1-ultralight-dark);
        --bc1-ultralight: var(--bc1-ultralight-dark);
        --bc2: var(--bc2-dark);
        --cSecondary: var(--cSecondary-dark);
        --cNavLink: var(--cNavLink-dark);
    }
}

/* if color-scheme is light */
[color-scheme="light"] {
    --fc1: var(--fc1-light);
    --fc2: var(--bc1-ultralight-light);
    --bc1-ultralight: var(--bc1-ultralight-light);
    --bc2: var(--bc2-light);
    --cSecondary: var(--cSecondary-light);
    --cNavLink: var(--cNavLink-light);
}

/* if color-scheme is dark */
[color-scheme="dark"] {
    --fc1: var(--fc1-dark);
    --fc2: var(--bc1-ultralight-dark);
    --bc1-ultralight: var(--bc1-ultralight-dark);
    --bc2: var(--bc2-dark);
    --cSecondary: var(--cSecondary-dark);
    --cNavLink: var(--cNavLink-dark);
}

[color-scheme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* font-families */
.text-dosis {
    font-family: 'Dosis', 'sans-serif';
}

.text-rasa {
    font-family: 'Rasa', 'sans-serif';
}

.text-zen-kurenaido {
    font-family: 'Zen Kurenaido', 'sans-serif';
}

/* colors */
.fc1 {
    color: var(--fc1) !important;
}

.fc1:hover {
    color: var(--fc1);
}

.fc2 {
    color: var(--fc1);
    font-style: italic;
}

.accents {
    color: #08B30D;
}

.cSecondary {
    color: var(--cSecondary);
}

.cSecondary.active {
    color: #08B30D;
    font-weight: 600;
}

.bgUltralight {
    background-color: var(--bc1-ultralight) !important;
}

.cNavLink {
    color: var(--cNavLink);
}

.bc2 {
    background-color: var(--bc2);
}

#btn-products {
    background-color: var(--bc2);
    outline: .15rem solid var(--fc1);
    color: var(--fc1);
}

.accents-border-bottom {
    border-bottom: .2rem solid #08B30D;
}

/* text-sizes */
.fsz-1 {
    font-size: 1.3rem;
}

.fsz-2 {
    font-size: 1.2rem;
}

.fsz-vs {
    font-size: 0.8rem;
}

/* hover-effects */
a .fc1:hover {
    color: #6c757d;
}

a .cSecondary:hover {
    color: #adb5bd;
}

.cSecondary.active:hover {
    font-weight: 600;
    color: #08B30D;
}

#btn-products:hover {
    background-color: #6c757d;
    color: #fff;
}

/* forms */
#text {
    height: 12rem;
}

/* cards */
.card-custom {
    background-color: var(--bc1-ultralight) !important;
    color: var(--fc1) !important;
}

.badge-custom {
    background-color: transparent !important;
    color: var(--fc1) !important;
    border: 1px solid var(--fc1) !important;
    font-weight: 400;
}

.card-custom .bi {
    color: var(--fc1) !important;
}

/* custom form styles */
.input-group-merged {
    background-color: var(--bc1-ultralight);
    border: 1px solid var(--cSecondary);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input-group-merged:focus-within {
    border-color: var(--fc1);
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

.input-group-merged .input-group-text {
    background-color: transparent;
    border: none;
    color: var(--fc1);
    padding-right: 10px;
}

.input-group-merged .form-control {
    background-color: transparent !important;
    border: none !important;
    color: var(--fc1);
    box-shadow: none !important;
}

.input-group-merged .form-control:-webkit-autofill,
.input-group-merged .form-control:-webkit-autofill:hover, 
.input-group-merged .form-control:-webkit-autofill:focus, 
.input-group-merged .form-control:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--bc1-ultralight) inset !important;
    -webkit-text-fill-color: var(--fc1) !important;
    transition: background-color 5000s ease-in-out 0s;
    border: none !important;
}

#text {
    background-color: var(--bc1-ultralight);
    color: var(--fc1);
    border: 1px solid var(--cSecondary);
}
#text:focus {
    border-color: var(--fc1);
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}