/* Base Colours */
:root {
  --main-bg-colour: #131312;
  --section-bg-colour: #292925;
  --sm-section-bg-colour: #413f41;
  --popup-bg-colour: #000000ec;
  --sm-popup-bg-colour: #31312d;

  --header-colour: #b16a96;
  --latest-header-colour: #8e69a7;
  --home-header-colour: black;
  --text-colour: #fffff9;
  --alt-text-colour: black;
  --alt-text-colour2: #e4e4d9;
  --border-colour: #131312;

  --drop-hover-bg-colour: #925fb8;
  --drop-bg-colour: #3b1259;

  --link-colour: cornflowerblue;
  --visit-colour: #0bd18f;
  --hover-colour: darkcyan;
  --missing-colour: #c44;

  --search-bg-colour: #cacac0;
  --search-result-bg-colour: #413f41;

  --button-bg-colour: #38383396;
  --button-hover-bg-colour: #555;

  --toc-header-bg-colour: #726f72;
  --toc-hover-colour: #afafa9;
  --toc-hover-bg-colour: #726f72;
  --toc-num-colour: #d8d8d1;
}

/* Gradients and Shadows */
:root {

  --scroll-indicator-gradient-colour: #00000079, transparent, transparent;
  --home-header-bg-gradient-colour: linear-gradient(120deg, #292925, #e2e606, #5e002f, #131312);
  --latest-more-bg-gradient-colour: linear-gradient(to bottom, rgba(41, 41, 37, 0), rgba(41, 41, 37, 1));
  
  --section-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);

}

/* Images/Symbols */
:root {
  --symbol-colour: brightness(43%) sepia(100%) saturate(185%) hue-rotate(270deg);
  --alt-symbol-colour: brightness(0%);
  --toc-symbol-colour: brightness(100%);
  --button-img-colour: brightness(40%) sepia(100%) saturate(185%) hue-rotate(270deg);
  --button-img-hover-colour: brightness(70%) sepia(100%) saturate(185%) hue-rotate(270deg);
}

/* Item Card Colours */
:root {
  --item-colour: var(--header-colour);
  --item-half-colour: #b16a9670;
  --item-quart-colour: #b16a9640;
  --item-symbol-colour: var(--symbol-colour);

  --missing-half-colour: #cc444470;
  --missing-symbol-colour: brightness(34%) sepia(100%) saturate(500%) hue-rotate(315deg);

/* Item Rarity Colours */
  --common-colour: #a3a3a3;
  --common-half-colour: #a3a3a370;
  --common-symbol-colour: brightness(67%);
  
  --uncommon-colour: #52c44e;
  --uncommon-half-colour: #52c44e70;
  --uncommon-symbol-colour: brightness(57%) sepia(100%) saturate(300%) hue-rotate(70deg);
  
  --rare-colour: #3190dd;
  --rare-half-colour: #3190dd70;
  --rare-symbol-colour: brightness(44%) sepia(100%) saturate(350%) hue-rotate(160deg);

  --vrare-colour: #bb55d4;
  --vrare-half-colour: #bb55d470;
  --vrare-symbol-colour: brightness(38%) sepia(100%) saturate(450%) hue-rotate(242deg);

  --legend-colour: #c49a28;
  --legend-half-colour: #c49a2870;
  --legend-symbol-colour: brightness(52%) sepia(100%) saturate(350%) hue-rotate(8deg);

  --artifact-colour: #b84f3c;
  --artifact-half-colour: #b84f3c70;
  --artifact-symbol-colour: brightness(34%) sepia(400%) saturate(400%) hue-rotate(320deg);

  --precious-colour: #62b6dd;
  --precious-half-colour: #62b6dd70;
  --precious-symbol-colour: brightness(57%) sepia(100%) saturate(200%) hue-rotate(152deg);

  --mythic-colour: #d33c55;
  --mythic-half-colour: #d33c5570;
  --mythic-symbol-colour: brightness(29%) sepia(400%) saturate(950%) hue-rotate(320deg);

/* Spells */
  --abj-colour: #45ddd5;
  --abj-half-colour: #45ddd570;
  --abj-symbol-colour: brightness(60%) sepia(100%) saturate(260%) hue-rotate(125deg);

  --con-colour: #eccf29;
  --con-half-colour: #eccf2970;
  --con-symbol-colour: brightness(67%) sepia(100%) saturate(350%) hue-rotate(5deg);

  --div-colour: var(--text-colour);
  --div-half-colour:  #fffff970;
  --div-symbol-colour: brightness(100%);

  --enc-colour: #df64c4;
  --enc-half-colour: #df64c470;
  --enc-symbol-colour: brightness(45%) sepia(100%) saturate(350%) hue-rotate(260deg);

  --evo-colour: #ce2020;
  --evo-half-colour: #ce202070;
  --evo-symbol-colour: brightness(20%) sepia(400%) saturate(1650%) hue-rotate(340deg);

  --ill-colour: #e0aaff;
  --ill-half-colour: #e0aaff70;
  --ill-symbol-colour: brightness(75%) sepia(100%) saturate(250%) hue-rotate(240deg);

  --nec-colour: #47864c;
  --nec-half-colour: #47864c70;
  --nec-symbol-colour: brightness(38%) sepia(100%) saturate(200%) hue-rotate(70deg);

  --tra-colour: #ad7e36;
  --tra-half-colour: #ad7d3670;
  --tra-symbol-colour: brightness(45%) sepia(100%) saturate(250%) hue-rotate(350deg);

  /* Statblock Creatures */

  --abe-colour: #7c67d8;
  --abe-half-colour: #7c67d870;
  --abe-quart-colour: #7c67d840;
  --abe-symbol-colour: brightness(38%) sepia(100%) saturate(400%) hue-rotate(208deg);
  
  --bea-colour: #3b9b43;
  --bea-half-colour: #3b9b4370;
  --bea-quart-colour: #3b9b4340;
  --bea-symbol-colour: brightness(42%) sepia(100%) saturate(300%) hue-rotate(70deg);
  
  --cel-colour: #f2f896;
  --cel-half-colour: #f2f89670;
  --cel-quart-colour: #f2f89640;
  --cel-symbol-colour: brightness(92%) sepia(100%) saturate(300%) hue-rotate(0deg);
  
  --cons-colour: #aa9371;
  --cons-half-colour: #aa937170;
  --cons-quart-colour: #aa937140;
  --cons-symbol-colour: brightness(51%) sepia(100%) saturate(110%) hue-rotate(350deg);
  
  --dra-colour: #bd3737;
  --dra-half-colour: #bd373770;
  --dra-quart-colour: #bd373740;
  --dra-symbol-colour: brightness(22%) sepia(400%) saturate(1350%) hue-rotate(340deg);
  
  --ele-colour: #c2c2bc;
  --ele-half-colour: #c2c2bc70;
  --ele-quart-colour: #c2c2bc40;
  --ele-symbol-colour: brightness(75%);
  
  --fey-colour: #32bb54;
  --fey-half-colour: #32bb5470;
  --fey-quart-colour: #32bb5440;
  --fey-symbol-colour: brightness(50%) sepia(100%) saturate(290%) hue-rotate(80deg);
  
  --fie-colour: #df2828;
  --fie-half-colour: #df282870;
  --fie-quart-colour: #df282840;
  --fie-symbol-colour: brightness(23%) sepia(400%) saturate(1650%) hue-rotate(340deg);
  
  --gia-colour: #bb5594;
  --gia-half-colour: #bb559470;
  --gia-quart-colour: #bb559440;
  --gia-symbol-colour: brightness(37%) sepia(100%) saturate(330%) hue-rotate(270deg);
  
  --mon-colour: #975248;
  --mon-half-colour: #97524870;
  --mon-quart-colour: #97524840;
  --mon-symbol-colour: brightness(32%) sepia(100%) saturate(260%) hue-rotate(325deg);

  --ooz-colour: #aae44d;
  --ooz-half-colour: #aae44d70;
  --ooz-quart-colour: #aae44d40;
  --ooz-symbol-colour: brightness(77%) sepia(100%) saturate(350%) hue-rotate(20deg);
  
  --pla-colour: #29851d;
  --pla-half-colour: #29851d70;
  --pla-quart-colour: #29851d40;
  --pla-symbol-colour: brightness(35%) sepia(100%) saturate(350%) hue-rotate(70deg);
  
  --und-colour: #5aca9f;
  --und-half-colour: #5aca9f70;
  --und-quart-colour: #5aca9f40;
  --und-symbol-colour: brightness(60%) sepia(100%) saturate(170%) hue-rotate(100deg);
  

}