@font-face { font-family: "Rubik"; font-display: swap; font-weight: 100 900; src: url("../fonts/rubik.woff2") format('woff2-variations'); } :root, [data-bs-theme=light] { --bs-primary: #6345d9; --bs-primary-rgb: 214,107,26; --bs-link-color-rgb: var(--bs-primary-rgb); --bs-nav-link-color: var(--bs-primary); --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, white); --bs-font-sans-serif: "Rubik", sans-serif; --bs-dropdown-link-hover-bg: var(--bs-primary); } .btn { --bs-btn-border-radius: .5rem; } .btn-primary { --bs-btn-bg: color-mix(in srgb, var(--bs-primary) 90%, white); --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-bg) 90%, black); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-bg) 80%, black); --bs-btn-active-border-color: var(--bs-btn-active-bg); font-weight: 500; } .nav-link { color: color-mix(in srgb, var(--bs-primary) 90%, black); } .dropdown-item.active, .dropdown-item:active { background-color: var(--bs-primary); } .form-control:focus { box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--bs-primary) 25%, transparent); border-color: color-mix(in srgb, var(--bs-primary), transparent); } .icon-link.dropdown-toggle::after { border: none; display: none; }