/**************************************************************************************************
    
    Base styles
    
**************************************************************************************************/


h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    text-transform: uppercase;
    font-family: EB Garamond, Roboto Condensed, serif; 
    font-weight: bold;
    color:#999696;
}

h3 {
        color:white;
	font-family: EB Garamond, Roboto Condensed, serif; 
}


h1 {
	color: white;
	font-family: EB Garamond, Roboto Condensed, serif; 
	
}  

h2 {
	color: white;
	font-family: EB Garamond, Roboto Condensed, serif; 
	
} 
.dropdown-menu{
	color: white;
}

.glow{
	font-family: EB Garamond, Roboto Condensed, serif; 
	Color: white;
	animation: glow 1s ease-in-out infinite alternate;
}

h1 a, h2 a, h3 a, h4 a, h5 a,
a.h1, a.h2, a.h3, a.h4, a.h5 {
    color: #999696;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover,
a.h1:hover, a.h2:hover, a.h3:hover, a.h4:hover, a.h5:hover {
    color: #bbbbbb;
    text-decoration: none;
}

link {
    color:#999696;
}

a {
    color:#8f8ff2;
}

a.display-trait:hover {
    color: white;
}

.navbar-light .navbar-nav .nav-link {
	color: #898888;
}

.dropdown-item:focus,.dropdown-item:hover{
	color: white;
}

.btn-light:hover {
	color: none;
}

a:hover {
    color: #6e6b6b;
    text-decoration: none;
	animation: glow 1s ease-in-out infinite alternate;
}

.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
    animation: glow 1s ease-in-out infinite alternate;
}

.navbar-item {
	color: white;
}

.bg-dark {
    background-color: #33344a!important;
	box-shadow: 12px 7px 10px 5px rgba(0,0,0,0.2);
}
.bg-secondary {
    background-color: #33344a!important;
}

body {
    background-color: transparent;
    font-family: Lato, sans-serif; 
    min-height: 100vh;
    font-size: 80%;
    color: #898888;
}

.frontpagecol2, .frontpagecol3 {
	background-color: #3d3c57;
}

.frontpagecol1 {
    background-image: linear-gradient(to bottom,#212230, #33344a);
}

.dropdown-menu  {
	min-width: 200px;
	background-color: #33344a;
	
}

.multi-column-dropdown {
       text-transform: uppercase;
       font-family: CaviarDreams, Roboto Condensed, serif;
       text-align:center
       
}

.li-title {
	padding: 5px 15px;
	font-weight: 300;
}

.multi-column-dropdown li a {
	color: #9b9ba8;
	background-color: none;
    font-family: CaviarDreams, Condensed, serif;
}
.multi-column-dropdown li a:hover {
	background-color: none;
}

.ulinks a:hover {
    color: 	none!important;
    text-decoration: none;
}

.dropdown-item {
	color: #9b9ba8;
	background-color: none;
}

.dropdown-item li a:hover {
	text-decoration: none;
	animation: glow 1s ease-in-out infinite alternate;
}

.card {
background: linear-gradient(to bottom, #3d3c57, #2a2a43);

 border: 1px solid #6b6189; /* Thin border with your color */
    border-radius: 10px;       /* Rounded corners */

}

/**************************************************************************************************
    
    Layout
    
**************************************************************************************************/

#app{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: visible;

  --page-bg: #222238;
background-color: #222238;
  background-image: url("/css/images/backdrop.jpg");
  background-size: cover;        /* fill screen */
  background-position: center;   /* center image */
  background-repeat: no-repeat;  /* prevent tiling */
  background-attachment: fixed;  /* prevent scrolling */
}


main {
    flex-grow: 1;
    display: flex;

}

main > .row {
    flex-grow: 1;
}

.main-content {
    display: flex;
    flex-direction: column;
   background:rgba(34, 34, 56, 0.9);
   

}

/* Header */

#header { 
position: relative;
  background-position: center top; /* optional but nice */
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 150px;
}
#header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;                   /* adjust to taste */
  pointer-events: none;
 
}

.site-header-image {
  width: 100%;     
  max-width: 100%;
  overflow: hidden;
}
.navbar, .navbar .nav-item {
    text-transform: uppercase;
    font-family: CaviarDreams, Roboto Condensed, serif;
    font-size:	13px;
}

.navbar-brand {
    font-family: CaviarDreams, AmaticSC, serif; 
	text-transform: uppercase;
	font-size: 22px;
	animation: glow 1s ease-in-out infinite alternate;
}

.nav-link:hover {
	color: white;
}


@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #8600e6, 0 0 40px #8600e6, 0 0 50px #8600e6, 0 0 60px #8600e6, 0 0 70px #8600e6;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #8e4dff, 0 0 40px #8e4dff, 0 0 50px #8e4dff, 0 0 60px #8e4dff, 0 0 70px #8e4dff, 0 0 80px #8e4dff;
  }
}

/*Sidebars */

.sidebar {
Margin-top: -15px;
  z-index: 1;
  padding: 20px;
  text-align: center;
  background-image: url("/css/images/SidebarBack.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto; /* ← match the column width consistently */
}

.sidebar .sidebar-header,
.sidebar .sidebar-section .sidebar-section-header {
    font-family: Garamond, serif; 
    font-weight: bold;
    color: white;
font-size: 25px;
}

.sidebar ul {
list-style-type: none;  /* remove bullets */
  margin: 0;              /* remove default top/bottom margins */
  padding: 10px 0 0 0;    /* only keep the 10px top padding you want */
  text-align: center;     /* center the inline or inline‐block children */
}


.sidebar ul li {

isplay: inline-block;  /* make each <li> shrink to fit its text/icon */
  margin: 0.5rem 0;       /* space between items if you have more than one stacked */
  width: 100%;
}

.sidebar .sidebar-header a:hover {
    background-color: transparent;
} 

.sidebar a,
.sidebar-section-header {
    display: block;
    padding: 0.1em 1em;
	font-size: 15px;
}

.sidebar a {
    text-transform: uppercase;
    font-family: Roboto Condensed, serif;
    color: 7a729d;
}
.sidebar a:hover {
    color: white;
}

.header-icon-container {
  text-align: center;      /* center the image horizontally */
  margin: 1rem 0;          /* optional vertical spacing */
}

.header-icon {
  max-width: 90%;        /* adjust as needed */
  height: auto;
}


/**************************************************************************************************
    
    Content
    
**************************************************************************************************/

.spoiler-toggle { 
     background-color: #212230;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    color:#999696;
}


.nav-tabs .nav-link {
    text-transform: uppercase;
    font-family: Roboto Condensed, serif;
}

.help-icon {
    /*vertical-align: middle;*/
    cursor: pointer;
    margin: 0 5px;
    color: rgba(0,0,0,0.3);
}

.breadcrumb {
    background-color: transparent;
    padding: 0;
    font-family: Roboto Condensed, serif;
    text-transform: uppercase;
    align-items: center;
    
}
.breadcrumb a {
    color:#999696;;
}
.breadcrumb a:hover {
    color: #6e6b6b;
    text-decoration: none;
}

.collapse-title:after {
    content: '';
    display: inline-block;
    position: absolute;
    right: -20px;
    top: 0.425em;
    border: 0.3em solid rgba(0,0,0,0.3);
    border-color: rgba(0,0,0,0.3) transparent transparent transparent;
}

.spoiler {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    margin-bottom: 1rem;
    background: transparent;
    margin-top: 0px;
}
.spoiler-toggle {
    font-weight: bold;
    
    cursor: pointer;
    padding: .3rem 1.25rem;
    font-size: .9rem;
    font-family: Roboto Condensed, serif;
    color: inherit;
    text-transform: uppercase;
}
.spoiler-text {
    padding: .75rem 1.25rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}

/* BROWSE ****************************************************************************************/

.sortable .handle {
    color: #33344a;
}

.img-thumbnail {

	border: 0px solid #545a60;
	animation: glow 1s ease-in-out infinite alternate;
}

.user-characters .category-selected .character-item {
	background-color: rgba(255,255,255,0.15);
	border-radius: .25rem;
}
.user-characters .character-item {
	background-color: rgba(1,1,1,0.1);
	border-radius: .25rem;
}


/* FORMS AND BUTTONS AND STUFF *******************************************************************/



.page-link {
	z-index: 1;
	color: #999696;
	background-color: #33344a;
}
.page-item.active .page-link {
	color: #bbb6b6;
	background-color: #5c5cd1;
}
.page-item.disabled .page-link {
	color: #999696;
	background-color: transparent;
}

.form-control {
	color: #999696;
	background-color: #141426;
}

.btn-primary {
	color: #fff;
	background-color: #5c5cd1;
	animation: glow 1s ease-in-out infinite alternate;
	border: 1px solid #ced4da;
}

.btn-primary:hover  {
	color: #fff;
	background-color: #6767f0;
	animation: glow 1s ease-in-out infinite alternate;
	border: 1px solid #ced4da;
}

.btn-outline-info {
	color: #6767f0;
	background-color: transparent;
	border: 1px solid #6767f0;
}

/*TEXT EDITOR TEST*/
.tox-tinymce {
	color: #999696;
	background-color: #353333;
}

/* LOGS ******************************************************************************************/
tr.inflow {
    background-color: #333533;
}
tr.outflow {
    background-color: #353333;
}

/* PROFILE ***************************************************************************************/

.character-bio .nav-tabs.card-header-tabs .active {
    background-color: #2a2a43;
	color: #999696;
}

card mb-3 {
    color: #4e5861;
	background-color: #212230;
}

.card-body {
    background: linear-gradient(to bottom, #3d3c57, #2a2a43);
}

.list-group-item {
	background: transparent;


}

/* CHARACTERS ************************************************************************************/

.image-nav .nav-item a.active {
    border: 5px solid #ddd;
    background-color: #4e5861;
    color: #4e5861;
}

.site-footer .copyright {
    padding: 0 1rem 1rem;
    color: #4e5861;
}

.profile-assets-card .card-body {
    display: flex;
    flex-direction: coloumn;
    color: #4e5861;
}

/* INVENTORY *************************************************************************************/

.inventory-stack-name {
	color: #999696;
}


.badge-info
{
	color: #093394;
}

/* Speciesimages *************************************************************************************/

.world-entry-image_iconpage{
	color: #778899;
}

html, body {
  height: 100%;
  margin: 0;
  background: #222238; /* prevents white gaps */
}

body {
  background-color: #222238 !important; /* overrides your transparent */
}

#app {
  min-height: 100vh !important; /* overrides min-height: 100% */
  display: flex;
  flex-direction: column;
}

main.container-fluid {
  flex: 1 0 auto;
  display: block !important; /* overrides your display:flex */
}


/* Star BG *************************************************************************************/


/* The star layers */
#stars, #stars2 {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* adjust if needed */
}

#stars  { width: 1px; height: 1px; animation: animStar 90s linear infinite; }
#stars2 { width: 2px; height: 2px; animation: animStar 160s linear infinite; opacity: 0.8; }
#stars3 { width: 3px; height: 3px; animation: animStar 220s linear infinite; opacity: 0.6; }


#stars::after, #stars2::after, #stars3::after{
  content:"";
  position:absolute;
  top:2000px;
  width: inherit;
  height: inherit;
  box-shadow: inherit; /* duplicates the same stars for seamless scroll */
}


#title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: #FFF;
  text-align: center;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 50px;
  letter-spacing: 10px;
  margin-top: -60px;
  padding-left: 10px;
}
#title span {
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}