:root {
  /* Global Variables */
  /* The following variables are utilised for easy theming */

  /* Heads Up: The weird structure of these variables are to make dynamic theming via script easier. */
  /*           We split the rgb from alpha so that I can update the rgb without affecting the alpha. */

  /* Also: Many elements will have a "top" variant. This is for elements on top of other elements,   */
  /*       which is useful for improving contrast between those elements.                            */


  /* Core Theming */
  /* The following variables are used to theme the main elements that make up pages */

  /* Text */
  --text-rgb: 239, 232, 234;
  --text-color: rgba(var(--text-rgb), 1.0);

  --active-text-rgb: var(--panel-rgb);
  --active-text-color: rgba(var(--active-text-rgb), 1.0);

  /* Hyperlinks */
  --hyperlink-rgb: 239, 232, 234;
  --hyperlink-color: rgba(var(--hyperlink-rgb), 1.0);

  --hyperlink-visited-rgb: 239, 232, 234;
  --hyperlink-visited-color: rgba(var(--hyperlink-visited-rgb), 1.0);

  /* Panels */
  /* Panels are what contain the actual content of pages, and are the core of the site's layout */
  /* Furthermore, panel colors are also used for other elements, such as buttons. */

  /* Panel ~ Blur Filter Strength */
  --blur-strength: max(0.5lvw, 0.5lvh);

  /* Panel ~ Base Panel */
  --panel-rgb: 60, 21, 34;
  --panel-color: rgba(var(--panel-rgb), 0.8);
  
  /* Panel ~ Top Panel */
  /* The top variant is for panels on top of other panels */
  --top-panel-rgb: 60, 12, 31;
  --top-panel-color: rgba(var(--top-panel-rgb), 0.8);

  /* Panel ~ Active Panel */
  /* The active variant is used to shadow that something has been activated. */
  /* This is predominantly used by buttons. */
  --active-panel-rgb: var(--text-rgb); /* Copy Text Color For Now */
  --active-panel-color: rgba(var(--active-panel-rgb), 0.8);


  /* Box Shadows */
  /* Parameters are in the following order: H-Offset, V-Offset, Blur, Spread, Color */

  /* Box Shadow ~ Base Color */
  --drop-shadow-rgb: 27, 23, 42;
  
  /* Box Shadow ~ Base Variants */
  --drop-shadow:        0px 6px 8px 0px rgba(var(--drop-shadow-rgb), 0.25);
  --drop-shadow-hover:  0px 2px 6px 0px rgba(var(--drop-shadow-rgb), 0.3);
  --drop-shadow-active: 0px 0px 2px 0px rgba(var(--drop-shadow-rgb), 0.35);
  
  /* Box Shadow ~ Top Variants */
  --top-drop-shadow:        0px 6px 8px 0px rgba(var(--drop-shadow-rgb), 0.25);
  --top-drop-shadow-hover:  0px 2px 6px 0px rgba(var(--drop-shadow-rgb), 0.3);
  --top-drop-shadow-active: 0px 0px 2px 0px rgba(var(--drop-shadow-rgb), 0.35);


  /* Profile Card Placeholder Colors */
  /* Making this transparent helps with edges, though it ideally should become transparent when the javascript runs */
  /* TODO: Change this so that it only becomes transparent once the JS for the card effect runs. */
  --profile-card-placeholder-color: #ff005d00;

  /* Font */
  font-family: "Bai Jamjuree", sans-serif;
  color: var(--text-color);
  font-weight: 500;

  /* Font Sizing */
  --p-size: 1rem;         /* 1rem     / 16px */
  --label-size: 1.125rem; /* 1.125rem / 18px */

  --h1-size: 1.5rem;      /* 1.5rem   / 24px */
  --h2-size: 1.375rem;    /* 1.375rem / 22px */
  --h3-size: 1.25rem;     /* 1.25rem  / 20px */
  --h4-size: 1.125rem;    /* 1.125rem / 18px */

  --icon-size: 1.375rem;   /* 1.375rem/ 22px */
}



/* Common Element Theming */
hr { 
  /* color: rgba(var(--text-rgb), 0.2); */
  border-color: rgba(var(--text-rgb), 0.2);
}

p { font-size: var(--p-size); }

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

ul { font-size: var(--p-size); }

a:link { color: var(--hyperlink-color); }
a:visited { color: var(--hyperlink-visited-color); }

.icon {font-size: var(--icon-size); }


/* Images */
/* Defaults assume that they are on top of a panel. Can be overriden with the box-shadow class */
img {
	/* Appearence */
  width: 100%;
  height: auto;
	border-radius: 16px;
  display: block;
	/* box-shadow: var(--top-drop-shadow); */
}

picture {
  width: 100%;
  height: auto;
}


/* Figures */
/* Figures are basically a nice way of presenting images, with captions if wanted */
figure {
	/* Appearence */
	width: 80%;

	/* Centering */
	display: block;
  margin: auto;
  /* background-color: red; */
}

figcaption {
  margin-top: 4px;
	font-style: italic;
}

.figure-row {
  display: flex;
  flex-direction: row;
  gap: 4px;

  align-items: start;

  height: auto;
  width: 100%;
}

.figure-row figure {
  margin: 0;
  height: 100%;
}


/* Cards */
.card {
  border-radius: 16px;
  box-shadow: var(--drop-shadow);
  
  width: auto;
  height: auto;
  flex-shrink: 0;

  user-select: none;

  transform-style: preserve-3d;
  perspective: 1250px;

  /*background-color: var(--profile-card-placeholder-color);*/

  z-index: 1;

  /* Animation */
  transition: translate 0.1s;
}

.card:hover {
  box-shadow: 0px 12px 24px 0px rgba(var(--drop-shadow-rgb), 0.25);
  z-index: 10; /* bring to front */
  transition: z-index 0s; /* instant z-index change */
}

.card:active {
  translate: 0px 4px;
  box-shadow: var(--drop-shadow-active);
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  outline: 1px solid transparent; /* Fixes jagged edges on Firefox */
}

.card-back {
  rotate: y 180deg;
}


/* Panels */
.panel {
  background-color: var(--panel-color);
  box-shadow: var(--drop-shadow);
  border-radius: 16px;
  padding: 28px 28px;
  /* backdrop-filter: blur(var(--blur-strength)); */
}

.panel *:first-child {
  margin-top: 0em;
}

.panel *:last-child {
  margin-bottom: 0em;
}

.panel.top {
  background-color: var(--top-panel-color);
  box-shadow: var(--top-drop-shadow);
	/* backdrop-filter: none; */
}



/* Slider */
input[type="range"] {
	width: 100%;
  height: 32px;
  box-sizing: border-box;

  /* Remove the Default Visuals */
  -webkit-appearance: none;
  appearance: none;
  
  border-radius: 8px;
  background-color: var(--top-panel-color);
  accent-color: var(--text-color);
  outline: none;
  overflow: hidden;
  margin: 0px;
  
  box-shadow: var(--top-drop-shadow);
}

/* Slider Thumb */
/* Mozilla */
input[type="range"]::-moz-range-thumb {
  background-color: rgba(var(--active-panel-rgb), 1.0);
  height: 100%;
  width: 16px;
  border: none;
  border-radius: 8px;

	/* Box shadow trick to get a better fill for the slider */
	box-shadow: -408px 0 0 400px var(--active-panel-color);

	/* Animation */
	transition: background-color 0.1s;
}

input[type="range"]::-moz-range-thumb:hover {
  background-color: rgba(var(--active-panel-rgb), 0.9);
}

/* Webkit */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: rgba(var(--active-panel-rgb), 1.0);
  height: 100%;
  width: 16px;
  border: none;
  border-radius: 8px;

	/* Box shadow trick to get a better fill for the slider */
	box-shadow: -408px 0 0 400px var(--active-panel-color);

	/* Animation */
	transition: opacity 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background-color: rgba(var(--active-panel-rgb), 0.9);
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 100%;
}


/* Slider w/ Details */
.detailed-slider {
	display: flex;
	flex-direction: row;
	gap: 4px;
}

.detailed-slider input[type="range"] {
	flex-grow: 1;
}

.detailed-slider-readout {
	/* Dimensions */
	width: 2rem;
	
	/* Appearence */
	background-color: var(--top-panel-color);
  box-shadow: var(--top-drop-shadow);
  border-radius: 8px;
  padding: 0px 8px;
	flex-grow: 0;
	flex-shrink: 0;

	/* Text */
	font-size: var(--p-size);
	display: flex;
	flex-direction: row;
	align-items: center; /* Center vertically */
	justify-content: center; /* Cetner horizontally */
}



/* Buttons */
/* These aren't actually buttons though, they're anchors (links) */

/* Base Styling */
.button {
	/* Basic Dimensions */
	height: 3.5rem;
	box-sizing: border-box;

	/* Contents */
	padding: 8px 24px; /* Vertical, Horizontal */
	display: flex;
	align-items: center; /* Center vertically */
	user-select: none;
	gap: 8px;

	/* Appearence */
  color: var(--text-color);
	background-color: var(--panel-color);
	box-shadow: var(--drop-shadow);
	/* backdrop-filter: blur(var(--blur-strength)); */
	border: none;
	border-radius: 16px;
	
	/* Text */
	font-size: var(--label-size);
	text-decoration: none; /* Hides the links underline */
	color: var(--text-color); /* Also hides the links coloring */
	
	/* Animation */
  will-change: transform, box-shadow, opacity;
  transform: translateZ(0);
	transition: transform 0.1s, box-shadow 0.1s, opacity 0.1s;
}
.button:link { color: var(--text-color); }
.button:visited { color: var(--text-color); }
  
/* Styling for various states */
.button:hover {
	transform: translateY(2px);
	box-shadow: var(--drop-shadow-hover);
	opacity: 0.8;
}
  
.button:active {
  transform: translateY(4px);
  box-shadow: var(--drop-shadow-active);
  opacity: 0.6;
}

.button.top {
  background-color: var(--top-panel-color);
  box-shadow: var(--top-drop-shadow);
	/* backdrop-filter: none; */
}
.button.top:hover { box-shadow: var(--top-drop-shadow-hover); }
.button.top:active { box-shadow: var(--top-drop-shadow-active); }

.button.active {
  color: var(--active-text-color);
  background-color: var(--active-panel-color);
}


/* Image Button */
.image-button {
  /* Basic Dimensions */
	height: auto;
	box-sizing: border-box;

	/* Contents */
	padding: 0px;
	display: flex;
  flex-direction: column;
	user-select: none;

	/* Appearence */
  color: var(--text-color);
	background-color: var(--panel-color);
	box-shadow: var(--drop-shadow);
	/* backdrop-filter: blur(var(--blur-strength)); */
	border: none;
	border-radius: 16px;
  overflow: hidden;
	
	/* Text */
	font-size: var(--label-size);
	text-decoration: none; /* Hides the links underline */
	color: var(--text-color); /* Also hides the links coloring */
	
	/* Animation */
	transition: transform 0.1s, box-shadow 0.1s, opacity 0.1s;
}
.image-button:link { color: var(--text-color); }
.image-button:visited { color: var(--text-color); }

.image-button img {
  border-radius: 0;
}

.image-button div {
  position: absolute;
  bottom: 0; left: 0;
  background-color: var(--panel-color);

  height: 4rem;
  width: 100%;
  
  box-sizing: border-box;
  padding: 8px 24px;
  
	display: flex;
	align-items: center; /* Center vertically */
	gap: 8px;

  /* Text */
	font-size: var(--label-size);
	text-decoration: none; /* Hides the links underline */
	color: var(--text-color); /* Also hides the links coloring */

  user-select: none;
}

/* Styling for various states */
.image-button:hover {
	transform: translateY(2px);
	box-shadow: var(--drop-shadow-hover);
	opacity: 0.8;
}
  
.image-button:active {
  transform: translateY(4px);
  box-shadow: var(--drop-shadow-active);
  opacity: 0.6;
}


/* Actual Button Styling Extras */
/* For some reason, the font doesn't apply to an actual button, so we manually do it here */
button {
	font-family: "Bai Jamjuree", sans-serif;
	color: var(--text-color);
	font-weight: 500;
}

.button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}


/* Tags */
.tags-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;

  margin-bottom: 4px;

  width: 100%;
}

.tag {
  text-transform: capitalize;
  font-size: var(--p-size);
  padding: 8px 12px;

  border-radius: 8px;
  height: fit-content;
  width: fit-content;

  /* Temp till tags actually work */
  pointer-events: none;
}

.series-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;

  margin-bottom: 4px;

  width: 100%;
}

.series-tag {
  text-transform: capitalize;
  font-size: var(--p-size);
  padding: 0px 0px;

  display: flex;
  flex-direction: row;
  gap: 0px;

  border-radius: 8px;
  height: fit-content;
  width: fit-content;
  overflow: hidden;

  /* Temp till tags actually do something other than look pretty */
  pointer-events: none;
}

.series-name {
  width: fit-content;
  height: 100%;
  padding: 8px 12px;
}

.series-index {
  width: fit-content;
  height: 100%;
  padding: 8px 12px;

  background-color: rgba(var(--text-rgb), 0.8);
  color: rgba(var(--panel-rgb), 1.0);
}


/* Tables */
th, td {
  vertical-align: top;
  text-align: left;
}


/* Horizontal Navigation Bar */
/* Is what it says on the tin, various classes for building a horizontal nav bar wherever needed */
.h-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
  margin-top: 8px;
}

.h-nav.remove-margin {
  margin-top: 0px;
}

.h-nav-filler {
  /* Appearance */
  background-color: var(--panel-color);
  box-shadow: var(--drop-shadow); /* h-offset, v-offset, blur, spread, color */
  border-radius: 16px;
  padding: 8px 24px; /* Vertical padding, then horizontal padding */
  height: 3.5rem; /* Add on the vertical padding to get the total height */
  width: 100%;
  box-sizing: border-box;
  overflow: scroll;
  /* backdrop-filter: blur(var(--blur-strength)); */

  /* Text */
  font-family: "Bai Jamjuree", sans-serif;
  font-size: var(--label-size);
  display: flex; /* Needed to center the text vertically*/
  align-items: center;
  white-space: pre;
}

.h-nav-button {
  width: 7.25rem;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
}

.h-nav-button.fit-contents {
  width: auto;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
}

.h-nav-filler.top {
  background-color: var(--top-panel-color);
  box-shadow: var(--top-drop-shadow);
  /* backdrop-filter: none; */
}

@media only screen and (max-width: 528px) {
  .h-nav-button {
    width: 3.5rem;
    gap: 0px;
  }

  .h-nav-label {
    width: 48px;
    display: none;
  }

  .h-nav-button.fit-contents {
    width: 3.5rem;
  }
}


/* Modifiers */

/* Box Shadow Overrides */
.drop-shadow { box-shadow: var(--drop-shadow); }
.top-drop-shadow { box-shadow: var(--top-drop-shadow); }

/* Disable Element */
.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Hide Element based on Layout */
@media only screen and (max-width: 960px) { .hide-square { display: none; } }
@media only screen and (max-width: 864px) { .hide-thin { display: none; } }
@media only screen and (max-width: 696px) { .hide-narrow { display: none; } }
@media only screen and (max-width: 528px) { .hide-tablet { display: none; } }
@media only screen and (max-width: 432px) { .hide-mobile { display: none; } }