:root {
    --bgColor: #fff;
    --bgColorTriplet: 255, 255, 255;
    --textDefault: #000;
    --primary: #0B4CFF;
    --secondary: #FF0B70;
    --terciary: #00BA5B;
}

:root[data-theme='dark'] {
    --bgColor: #000;
    --bgColorTriplet: 0, 0, 0;
    --textDefault: #000;
    --primary: #ACC2FF;
    --secondary: #FFAFD0;
    --terciary: #86E1B3;
}

body {
  background: var(--bgColor);
  color: var(--textDefault);
}

h2 {
	color: var(--primary);
}

/* Styling of various elements, moved from inline */

.home {
  background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url(/assets/background.png);
  background-size: cover;
}

.home_light {
  background: var(--bgColor);
  color: var(--textDefault);
}

/* Quasi-generic backgrounds, meant to be used in wrapper divs to override parent colors of the whole page */
.bg-opaque-100 {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(var(--bgColorTriplet), 1.0)
}

.bg-opaque-90 {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(var(--bgColorTriplet), 0.9)
}

/* Quasi-generic backgrounds, meant to be used in wrapper divs to override parent colors of the whole page */
.bg-opaque-60 {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(var(--bgColorTriplet), 0.6)
}

/* Quasi-generic backgrounds, meant to be used in wrapper divs to override parent colors of the whole page */
.bg-opaque-30 {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(var(--bgColorTriplet), 0.3)
}

#navbar {
  background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url(/assets/background.png);
  background-size: cover;
}

/* Main search bar */
#search_bar {
  border: 0.5px grey solid;
  background: rgba(255, 255, 255, 1.0);
  padding-left: 10px;
  padding-right: 10px;
}

#search_bar_input {
  /* margin-left: 25px; */
  padding: 0;
}

#search_bar_suggestions .list-group-item {
  background: rgba(248, 248, 248, 1);
  margin: 0;
  border: 0;
}

#search_bar_suggestions .list-group-item:last-child {
  background: rgba(248, 248, 248, 1);
  margin: 0;
  border-radius: 0 0 25px 25px;
  border-bottom: 2px solid black;
}

/* Cards */
.card {
  background-color: rgb(248, 248, 248, 1.0);
}

/* Results table and other tabs there */
#results .tab-content {
  background: rgba(255, 255, 255, 1.0);
}

.api .nav-link {
  border-radius: 0.25rem;
  margin-bottom: 0;
}

.api .nav-link.active {
  border-color: #dee2e6;
}

a:hover {
  color: #297ac2;
}