@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url("https://elixir-ui.netlify.app/Components/elixir.css");

/* CL styles */
@import url('/styles/flex/flex.css');
@import url('/styles/grid/grid.css');

@import url('/styles/navbar.css');
@import url('/styles/header.css');
@import url('/styles/section.css');
@import url('/styles/footer.css');
@import url('/styles/products.css');

/* Products page */
@import url('/styles/products.css');

/* Cart page */
@import url('/styles/cart.css');

/* Auth CSS */
@import url('/styles/auth.css');

:root {
    --overlay-text-color: #2842581a;
    --overlay-bg-color: rgba(0,0,0,0.5);
    --secondary-color: #274156;
    --secondary-active-color: #1e3344;
    --card-border-color: #9e9eff;
    --bg-horizontal-card: #F0f0f0;
}

html {
    font-family: 'Open Sans', sans-serif;
}

*, *::after, *::before {
    font-family: inherit;
}

body::-webkit-scrollbar {
    width: var(--space-0-75);
    height: var(--space-0-5);
}
      
body::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: var(--br-5);
    -webkit-border-radius: var(--br-5);
    -moz-border-radius: var(--br-5);
    -ms-border-radius: var(--br-5);
    -o-border-radius: var(--br-5);
    -webkit-border-radius: var(--br-5);
}
    
.display-none {
    display: none;
}

.text-light {
    color: var(--bg-card-color);
}

.btn-light {
    background-color: var(--bg-card-color);
    border-color: var(--bg-card-color);
    color: var(--text-color)
}

.btn-light:hover {
    background-color: var(--primary-bg-color);
    border-color: var(--primary-bg-color);
    color: var(--text-color);
}

.btn-light.btn-link {
    color: var(--bg-card-color);
    background-color: transparent;
    border: none;
}

.btn-light.btn-link:hover {
    color: var(--primary-bg-color);
}

.input-range {
    width: 100%;
    accent-color: var(--primary-color);
}

.input-range:focus, .input-range:hover {
    accent-color: var(--primary-active-color);
}

.list-spaced .list-head {
    background-color: var(--text-color);
    color: var(--bg-color);
}

.hero-sub-head {
    line-height: 1.2;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-sub-head:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.wishlist-main, .cart-main, .products-main {
    min-height: 85vh;
}