:root{
  --bg: rgb(22, 20, 20);
  --fg: rgb(185, 0, 45);
  --border: rgb(32, 30, 30);
  --text: white;
  --active: rgb(152, 0, 0);
  --active-dark: rgb(122, 0, 0);
  --active-light: rgb(202, 0, 0);
  --active-text: white;

  --export-bg: rgb(240, 240, 240);
  --export-fg: rgb(255, 255, 255);
  --export-text: rgb(0, 0, 0);

  --export-border: rgb(250, 250, 250);

  --dim: rgb(0 0 0 / 0.7); /* 70% opacity black */
  --dark-white: rgb(230, 230, 230);
  --light-black: rgb(42, 40, 40);
}

@font-face {
  font-family: "CinzelDecorative"; 
  src: url("assets/fonts/CinzelDecorative-Black.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Improves performance by controlling font loading behavior */
}

@font-face {
  font-family: "Ubuntu"; 
  src: url("assets/fonts/Ubuntu-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Improves performance by controlling font loading behavior */
}

*{
  font-family: "Ubuntu", sans-serif;
  transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

h1 {
  font-family: "CinzelDecorative", sans-serif;
}

h1, h2, h3, h4, h5, h6{
  font-weight: normal;
}

[class^="fa"]{

  line-height: 1.25em;
  height: 1.25em;
  vertical-align: bottom;
  display: inline;
}

body{
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  height: 100%;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--active);
}

a:hover {
  color: var(--active-dark);
}
.gitLink {
  color: var(--bg);
}
.gitLink:hover {
  color: var(--light-black);
}  
nav{
  display: flex;
  position: sticky;
  margin: 20px;
  top: 0px;
  background-color: var(--border);
  padding: 10px;
  border-radius: 50px;
}

#section-nav {
  z-index: 100;
}

#section-title{
  flex-grow: 1;
  font-size: 2em;
  text-align: center;
  font-family: "CinzelDecorative", sans-serif;
}

/* button styling  in various sections */
/* default */
button {
  font-family: "Ubuntu", sans-serif;
  padding: 15px 10px;
  background-color: var(--active);
  border-radius: 2px;
  color: var(--active-text);
  user-select: none;
  cursor: pointer;
  border-style: solid;
  border-width: 5px;
  border-color: white;
  transition: background-color 0.1s;
  min-width: 150px;
  font-size: 15px;
}

button:hover {
  background-color: var(--active-dark);
}

/* big */
.big-button {
  padding: 20px 10px;
  font-size: 15px;
  width: 250px;
  margin-bottom: 10px;
}

/* nav (prev/next buttons)*/
nav button, nav a {
  font-family: "Ubuntu", sans-serif;
  padding: 10px;
  border-radius: 100px;
  background-color: var(--active);
  color: var(--active-text);
  user-select: none;
  cursor: pointer;
  border: 0;
  border-bottom: 5px solid var(--active-dark);
  border-left: 5px solid var(--active-dark);
  transition: border 0.1s;
}

tablinks{
  font-family: "Ubuntu", sans-serif;
  padding: 10px;
  border-radius: 0px;
  background-color: var(--active);
  color: var(--active-text);
  user-select: none;
  cursor: pointer;
  flex-grow:1;
  border: 0;
  border-bottom: 5px solid var(--active-dark);
  border-left: 5px solid var(--active-dark);
  transition: border 0.1s;
}


nav a:hover {
  color: white;
}

nav button:active, nav a:active{
  border-bottom: 2px solid var(--active-dark);
  border-left: 2px solid var(--active-dark);
}
/* end of button styling */

html .section{
  margin: 0 20px;
  display: none;
  background-color: var(--bg);
}

.section.selected{
  display: block;
}

.acc{
  font-size: 1.25em;
}

.acc-item{
  padding: 10px;
  user-select: none;
  color: var(--active-dark);
  background: var(--active-text);
  margin-bottom: 20px;
  border: 2px solid var(--active);
}

.acc-item .header{
  display: flex;
  padding: 10px;
}

.acc-item .title {
  color: var(--fg);
  cursor: pointer;
  font-size: 1.25em;
  flex-grow: 1;
}
.acc-item .title input {
  font-size: inherit; /* fixes sizing issues */
  color: var(--active);
}

.acc-icon {
  vertical-align: baseline;
  transition: transform 0.25s;
}

.acc-item:not(.hidden) .acc-icon{
  transform: rotate(180deg);
}

.acc-item .cont{
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px;
  transition: max-height 0.2s , padding 0.2s ;
}

.acc-item.hidden .cont{
  max-height: 0;
  overflow: hidden;
  padding: 0;
}

.acc-item .select-btn{
  margin-top: 10px;
}

.gr{
  display: grid;
}

.fl{
  display: flex;
}

.fl-center{
  display: flex;
align-items: center;
justify-content: center;
}

.fl-g{
  flex-grow: 1;
}

.comp{
  background-color: var(--fg);
  padding: 10px;
  border-radius: 10px;
}

.icon-img{
	max-width:30px;
	max-height:30px;
	margin-right: 10px;
  border-radius: 100px !important;
}

.race-desc{
  font-size: 15px;
  color: black;
}
.short-desc {
  font-size: 20px;
}

.grid-2-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.grid-2-col .race-img-container {
  height: 100%;
  display: flex;
  position: relative;
}
.grid-2-col .race-img-container .race-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: absolute;
  z-index: 0;
}

/* spellcard style */
.spellcard {
  width: 2.5in;
  min-width: 2.5in;
  height: 3.5in;
  background-color: var(--active);
  float: left;
  margin-block-end: 1px;
  margin-inline-end: 1px;
  margin-right: 1px;
  min-inline-size: 240px;
  min-width: 240px;
  position: relative;
  font-size: 10px;
  line-height: 14.2857px;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
  
.spellcard * {
  font-family: "Lato", Helvetica, Arial, sans-serif;
}  

.spellcard .front {
  color: rgb(0, 0, 0);
  padding: 10px;
  position: absolute;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
}

.spellcard .body {
  background-color: rgb(255, 255, 255);
  block-size: 301px;
  border-radius: 5px;
  border-end-end-radius: 5px;
  border-end-start-radius: 5px;
  border-start-end-radius: 5px;
  border-start-start-radius: 5px;
  height: 301px;
  overflow: hidden;
  width: 220px;
}

.spellcard .name {
  border-color: var(--active);
  border-bottom-style: solid;
  font-size: 14px;
  line-height: normal;
  margin: 0px;
  min-height: 20px;
  padding: 6px 5px;
  text-align: center;
  text-transform: uppercase;
}

.spellcard .status {
  border-bottom-color: var(--active);
  border-bottom-style: solid;
  list-style: none;
  padding: 0px;
  text-align: center;
  margin: 0px;
  box-sizing: border-box;
}

.spellcard .status li {
  float: left;
  font-size: 9px;
  height: 25px;
  line-height: 9px;
  padding: 2px 4px;
  box-sizing: border-box;
}

.spellcard .status li em {
  display: block;
  font-weight: bold;
  padding-bottom: 2px;
  text-transform: uppercase;
  width: 102px;
  -webkit-text-fill-color: var(--active);
}

.spellcard .second {
  border-left-color: var(--active);
  border-left-style: solid;
  inline-size: 110px;
  padding-block-end: 2px;
  vertical-align: top;
}

.spellcard .need {
  background-color: var(--active);
  display: block;
  font-size: 8px;
  font-style: italic;
  font-weight: normal;
  line-height: 100%;
  padding: 2px 4px 4px;
  -webkit-text-fill-color: rgb(255, 255, 255);
}

.spellcard .text {
  line-height: 9px;
  padding: 2px 4px;
  margin: 0px;
}

.spellcard .class {
  font-weight: normal;
  position: absolute;
  top: 315.146px;
  -webkit-text-fill-color: rgb(255, 255, 255);
}

.spellcard .type {
	font-weight: 400;
	right: 8px;
	position: absolute;
	top: 315.146px;
	-webkit-text-fill-color: rgb(255, 255, 255);
}

#character-sheet{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.fr-3{
  grid-template-columns: repeat(3, 1fr);
}

#character-sheet-parent{
  border:4px solid var(--border);
  border-radius: 2px;
  min-height: 50vh;
}

#character-sheet .comp{
  background-color: var(--fg);
  border-radius: 10px;
  border-bottom: 5px solid var(--border);
  border-left: 5px solid var(--border);
}

#character-sheet .sub-comp{
  background-color: var(--fg);
  border-radius: 10px;
  border-bottom: 5px solid var(--border);
  border-left: 5px solid var(--border);
}

#character-sheet .placeholder{
  border: 2px dotted var(--active);
  border-radius: 5px;
  background-color: color-mix(in hsl, var(--active), transparent);
}


#character-sheet .comp .header{
  display: flex;
}

#character-sheet .comp .handle{
  cursor: move; 
}

#character-sheet .comp .content div{
  padding: 5px;
}

input[type='text']{
  background: transparent;
  border: none;
  border-bottom: 1px solid white;
  cursor: text;
  color: var(--text);
  padding: 5px;
  display: block;
  transition: border 0.25s;
}

input[type='text']:focus{
    outline: 0;
    border-bottom: 1px solid var(--active);
}

#character-sheet-parent:hover, #character-sheet:hover, #character-sheet-parent *:not(.x, .x *):hover{
  cursor: grab !important;
}

.gridr-2-6{
grid-row: 1 / span 6; 
}

.ui-resizable-handle{
  min-width: 5px;
  min-height: 5px;
}

.ui-resizable-e, .ui-resizable-s {
  display: none;
}

#character-sheet-parent.export-format{
  background-color: var(--export-bg) !important;
}

#character-sheet-parent.export-format .comp, #character-sheet-parent.export-format .sub-comp{
  background-color: var(--export-fg) !important;
  color: var(--export-text) !important;
  border-color: var(--export-border) !important;
}

#character-sheet-parent.export-format{
  background-color: var(--export-fg) !important;
}

.gen-stats{
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}

.colorTheme {

  padding: 10px;
  border: 5px;
  background-color: rgb(200, 15, 60);
  border-left:5px solid rgb(185,0,45);
  border-bottom: 5px solid rgb(185,0,45);
  border-radius: 100px;
}

.githubbutton{
  background-color: rgb(255, 255, 255);
  border: 0;
  padding: 5px;
  margin-right: 4px;
  border-radius: 100px;
  min-width: 0;
}

/* change svg fill color */
/* we need to use filter instead of fill because we load it as an image */
.githubbutton img {
  filter: invert(10%) sepia(47%) saturate(6849%) hue-rotate(358deg) brightness(102%) contrast(119%);
}
.githubbutton img:hover {
  filter: invert(11%) sepia(42%) saturate(5907%) hue-rotate(354deg) brightness(98%) contrast(119%);
}

/* text for title on homepage and header on other pages */
.title-text {
  font-size: 3em;
  margin: 0.2em; /* less padding around title */
  margin-top: 1em;
}

.header-link {
  text-decoration: none; /* no underline on link for title */
  color: white;
}
.header-link:hover {
  color: var(--active);
}

.header-text {
  font-size: 2.5em;
  margin: 0.2em;
  margin-top:0.5em;
  padding-left: 20px;
}

/* SOME UTILITY CLASSES ITEM PLACEMENT */
/* utility class for centering items */
.center-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
}
.active-dark-border {
  border: 5px solid var(--active-dark);
}

.column { /*when using the center items class, create new div with column class to create individual columns that divide the overarching container*/
  flex: 1;
}
/* add left to column with values to right of it */
.left {
  border-right: 5px solid var(--active-dark);
}
/* to style a title inside a column div */
.column-title {
  font-size: 20px;
  border-bottom: 5px solid var(--active-dark);
  background-color: white;
  color: var(--bg);
  padding: 10px;
}
.column-title .active-text {
  color: var(--active);
  padding-left: 5px;
}
.column-contents {
  padding: 20px;
  padding-bottom: 0px;
}

/* align (vertical center) items */
.vertical-center-items {
  align-items: center;
}

/* create an empty div with this class to set a newline in centered container */
.newline {
  flex-basis: 100%;
  height: 0;
}

/* utility for footer at bottom of the page:
wrap the entire page contents in this vertical-flex-screen
then add an empty div with the fill class above footer*/
.vertical-flex-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height:100vh;
}
.fill {
  flex-grow: 1;
}

/* utility class for having some padding between items */
.pad-items {
  padding: 20px;
  padding-top: 0;
  gap: 2px;
}

/* utility class for a scrollable container with
  a gradient + always-visible elements at the bottom

  TO USE:
  create a parent container with flex style
    * class fl will add the flex style to the element,
      or you can add display: flex and flex-direction: column
    * container MUST have a fixed height
  add overflow-fade class on the scrollable container
  create a div to contain all elements you want to be
  visible at the bottom and apply overflow-show class
  to that div
*/
.overflow-fade {
  flex-grow: 1;
  overflow-y: auto;
}
.overflow-show {
  position: relative;
}
.overflow-show::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

/* styling for popup window */
#popup-window {
  /* darkens the rest of the screen */
  width: 100%;
  height: 100%;
  background-color: var(--dim);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150; /* make sure it's on top */
}
#popup-content {
  /* the actual popup window */
  border: 4px solid var(--active);
  background-color: white;
  color: var(--export-text);
  width: 75%;
  height: 50%;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
#popup-header {
  /* set header height */
  height: 10%;
  position: relative;
}
#popup-title {
  padding-left: 20px;
  padding-top: 10px;
  font-size: 2em;
  color: var(--active);
}
#popup-close {
  /* styling the close popup button */
  position: absolute;
  right: -4px; /* to cover the border */
  top: -4px;
  z-index: 999;
  background-color: var(--active);
  border: 0;
  border-radius: 0;
  color: white;
  width: 50px;
  min-width: 0;
  height: calc(100% + 4px); /* add 4px to make up for positioning adjustment */
  margin: 0;
  font-size: 20px;
  text-align: center;
  line-height: 0;
  padding: 0;
}
#popup-close:hover {
  background-color: var(--active-dark);
}
#popup-inner-content {
  flex-grow: 1;
  height: 90%;
}
#popup-inner-content > div {
  padding: 15px 25px;
  overflow-y: auto; /*allows for scroll */
  padding-top: 0;
  margin-top: 20px; /* use margin instead of padding so it stays during scroll */
  height: calc(100% - 35px); /* 10% for the header bar - 35px for padding */
  display: flex;
  flex-direction: column;
}
#popup-inner-content > div > button {
  width: 150px;
  min-width: fit-content;
}

.bg-active {
  background-color: var(--active);
}

.wrapper {
  padding-top: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.padded {
  padding: 5px;
}
#sections {
  background-color: var(--active);
  flex-grow: 1;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 0px solid #ccc;
  background-color: var(--active);
  display: flex;
  justify-content: space-around; /* Distributes space evenly around items */
  align-items: center; /* Aligns items vertically in the center (cross-axis) */
  background-color: var(--active);
}

/* Style the buttons inside the tab */
.tab button {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 20px 40px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--active-dark);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: var(--active-dark);
}

/* Style the tab content */
.tabcontent {
  display: none;
  flex-grow:1;
  padding: 6px 12px;
  border: 1px solid rgb(20, 20, 20);
  border-top: none;
}

/* Style the searchbars */
.searchbar-container {
  display: grid;
  padding-bottom: 20px;
}
/* due to css priorities, these need to be done by
id and not class */
#searchbar,
#searchbar-race,
#searchbar-background,
#searchbar-language,
#searchbar-spell,
.dropdown-item {
  border: 2px solid var(--active-text);
  background-color: var(--active);
  color: var(--active-text);
  padding: 5px;
}
.searchbar::placeholder {
  color: var(--dark-white);
}
.dropdown-item {
  border: 2px solid var(--active);
  border-top: 0;
  z-index: 20;
  background-color: white;
  color: var(--bg);
}
.dropdown-item:first-child {
  border-top: 2px solid var(--active);
}
.searchbar-dropdown-container {
  position: relative;
}
.searchbar-dropdown {
  display: none;
  position: absolute;
  top: 0;
  margin-top: auto;
  z-index: 10;
  width: 100%;
}
.dropdown-item:hover {
  background-color: var(--dark-white);
}

.textFormatter {
    padding: 6px 12px;
}

.table {
  border-collapse: collapse;
  width: 100%;
  display: flex;
  justify-content: space-around; 
  align-items: center;
}

.table-column {
  border: 10px solid var(--active);
  padding: 8px;
  flex-grow: 1;
}