/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --bpink: #d64aba;
  --bblue: #4bbad3;
  --bpurple: #995bab;
  --bgold: #dbd08f;
  --bbrown: #2d2519;

  --bbrown-transparent: #2d2519cc;
  --bgold-transparent: #dbd08fcc;

  --bg-color: var(--bgold);
  --card-bg: var(--bbrown);
  --text-color: var(--bgold);
  --border-color: #ddd;
  --focus-color: var(--bblue);

}

.form-control {
    display: block !important;
    width: 100% !important;
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--bblue) !important !important;
    background-color: var(--bgold) !important;
    background-clip: padding-box !important;
    border: var(--bs-border-width) solid var(--bblue) !important;
    border-radius: 3px !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
}

.light-mode {
  --bg-color: #fff;
  --card-bg: #f9f9f9;
  --text-color: #2d2519;
  --border-color: #ddd;
  --focus-color: var(--bblue);
}

.container {
  width: auto;
  min-width: 330px;
}

.card {
  background-color: var(--bgold) !important;
  opacity: 0.9;
}

.btn, .btn-default {
  color: var(--bgold);
}

.btn:hover, .btn-default:hover {
  color: var(--bpink);
}

a {
   font-family: "Josefina Sans";
   color: var(--bgold); 
   text-decoration: none;
}

a:hover {
  color: var(--bpink);
}

.bg-dark {
  background-color: var(--bbrown) !important;
}

.dropdown {
  position: relative;
  display: block;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  background-color: var(--bgold);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 8px 0px;
  border-radius: 5px;
  z-index: 1;
}

#dropdownMenuButton:focus {
  color: var(--bpurple);
}

.dropdown-menu .nav-link {
  display: block;
  padding: 4px;
  text-decoration: none;
  color: black;
}

.dropdown-menu .nav-link:hover {
  background-color: var(--bpurple);
  color: var(--bblue);
}

#dropdownMenuButton.show {
  color: var(--bpurple);
}

html {
  scrollbar-gutter: stable;
}

html, body {
   margin: 0;
   height: 100%;
   width: 100%;
   font-family: "Josefina Sans";
}

h1, h2, h3, h4, h5, h6 {
   font-family: "Montserrat";
}

body {
   background-color: #1F180E;
   background-position: center top;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-image: 
       linear-gradient(to bottom, rgba(31, 24, 14, 0) 60%, #1F180E 100%),
       url("/assets/boundless_bg_brown-180e7d40.jpg");
   background-size: auto 1080px;
   color: var(--bgold); 
}

.nav-link {
  display: inline;
}

.navbar {
  font-size: 24px;
}

.navbar, .nav-item, .nav-link {
   font-family: "Josefina Sans";
   color: var(--bgold); 
}

.nav-link:hover, .nav-link:focus {
  color: var(--bpink);
}

input {
   background: var(--bgold); 
}

.max-width {
   max-width: 1080px;
}

@media (min-width: 576px) {
  main.dashboard.offset-sm-2 {
    margin-left: 100px !important;
  }
}