@font-face {
    font-family: 'DAI';
    src: url("media/fonts/Memento SmallCaps Regular.ttf") format("truetype");
}

:root {
  --bg1: url('media/missions/elven_ruins.png');
  --bg2: url('media/missions/fereldan_castle.png');
  --bg3: url('media/missions/orlesian_chateau.png');
  --bg4: url('media/missions/tevinter_ruins.png');
  --bg5: url('https://i.ytimg.com/vi/_-2d7_Zg9bA/maxresdefault.jpg');
  --bg6: url('https://c.wallhere.com/photos/83/ed/Dragon_Age_artwork_Bioware_RPG_video_games_Dragon_Age_Inquisition_Dragon_Age_Inquisition-216649.jpg!d');
  
  --main: rgb(71, 159, 82);
  --contrast: rgb(38, 59, 41);
  --selected: rgba(0, 131, 255, 1.0);
  
  --ability: rgb(235, 163, 51);
  --ability_op: rgba(235, 163, 51, 0.6);
  --ability_desc: rgb(150, 150, 150);
  --ability_stats: rgba(212, 204, 130);
  
  --profile_w: 120px;
  --profile_ho: 200px;
  --profile_h: calc(var(--profile_w) * 1.65);
  
  --mage: rgb(0, 0, 255);
  --rogue: rgb(255, 190, 0);
  --warrior: rgb(150, 0, 0);
  
  /* Characters */
  --alchemist: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Alchemist-Card.png');
  --arcane_warrior: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Arcane_Warrior-Card.png');
  --archer: url('https://static.wikia.nocookie.net/dragonage/images/3/33/The_Archer.jpg');
  --assassin: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Assassin-Card.png');
  --avvar: url('https://static.wikia.nocookie.net/dragonage/images/8/80/Amund_tarot_card.png');
  --duelist: url('https://static.wikia.nocookie.net/dragonage/images/5/5c/Duelist_Tarot_Card_2.png');
  --elementalist: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Elementalist-Card.png');
  --hunter: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Hunter-Card.png');
  --katari: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Katari-Card.png');
  --keeper: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Keeper-Card.png');
  --legionnaire: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Legionnaire-Card.png');
  --necromancer: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Necromancer-Card.png');
  --reaver: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Reaver-Card.png');
  --saarebas: url('https://static.wikia.nocookie.net/dragonage/images/0/08/Hissera_tarot_card.png');
  --silent_sister: url('https://static.wikia.nocookie.net/dragonage/images/9/9c/Pala_tarot_card.jpg');
  --templar: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Templar-Card.png');
  --virtuoso: url('https://static.wikia.nocookie.net/dragonage/images/9/94/Virtuoso_Tarot_Card_2.png');
  
  /* Abilities */
  --barrier: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/barrier.png');
  --chain_lightning: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Chain_Lightning.png');
  --clean_burn: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Clean_Burn.png');
  --conductive_current: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Conductive_Current.png');
  --cycle_of_life: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/The_Last_Sacrifice.png');
  --dispel: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Dispel.png');
  --disruption_field: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Disruption_Field.png');
  --distrubance_of_spirit: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Makers_Will.png');
  --energy_bombardment: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Energy_Barrage.png');
  --encircling_veil: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Encircling_Veil.png');
  --fade_cloak: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Fade_Cloak.png');
  --fade_step: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Fade_Step.png');
  --gathering_storm: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Gathering_Storm.png');
  --guardian_spirit: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Guardian_Spirit.png');
  --knight_protector: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Knight-Protector.png');
  --lightning_bolt: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Lightning_Bolt.png');
  --mana_surge: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Mana_Surge.png');
  --mind_blast: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Mind_Blast.png');
  --natures_shield: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/There_is_no_Darkness.png');
  --peaceful_aura: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Peaceful_aura.png');
  --primal_spirit: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Storm.png');
  --protection: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Spirit.png');
  --proud: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Proud.png');
  --reinforced_barrier: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Reinforced_Barrier.png');
  --rejuvenating_barrier: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Rejuvenating_Barrier.png');
  --restorative_veil: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Restorative_Veil.png');
  --smothering_veil: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Smothering_Veil.png');
  --static_cage: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Static_Cage.png');
  --static_charge: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Static_Charge.png');
  --stormbringer: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Stormbringer.png');
  --strength_of_spirits: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Strength_Of_Spirits.png');
  --twisting_veil: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Twisting_Veil.png');
  --veiled_riposte: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Veiled_Riposte.png');
  --veilstrike: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Veilsrike.png');
  --winter_stillness: url('https://dragonageinquisition.wiki.fextralife.com/file/Dragon-Age-3/Winter_Stillness.png');
}

body {
  margin: 0px;
  padding: 0px;

  background: black;
  color: white;
  
  background-image: var(--bg5);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  background-color: rgba(0, 0, 0, 0.6);
  background-blend-mode: darken;
}

.backgrounds {
  position: fixed;
  right: -1px;
  bottom: -90px;
  transition: bottom .25s ease-in-out;
  
  background: rgba(0,0,0,0.6);
  
  border: 1px solid var(--contrast);
  border-radius: 25px 0px 0px 0px;
  
  width: 235px;
  height: 100px;
  padding-top: 25px;
  padding-left: 10px;
  
  div {
    display: inline-block;
    width: 64px;
    height: 36px;
    background-image: var(--bg);
    background-size: cover;
    
    margin: 4px;
    border-radius: 5px;
  }
  
  div:hover {
    margin: 0px; /* Provides 4px additional on each side */
    border: 1px solid var(--main); /* Uses 1px on each side leaving 3px space (add 6px to original width and height) */
    
    width: 70px;
    height: 42px;
    
    cursor: pointer;
  }
}

.backgrounds:hover {
  bottom: 0px;
}

.skilltree {
  display: inline-block;
  vertical-align: top;
  
  background: rgba(0, 0, 0, 0.6);
  
  width: 480px;
  height: 750px;
  /* height: 760px;     /* No long define for dynamic skill tree height */
  
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  
  position: relative;
  
  margin-left: 50px;
  margin-right: 50px;
}

.inactive {
  display: none;
}

.toggle_primary, .toggle_secondary {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  
  width: 239px;
  height: 40px;
  
  line-height: 40px;
  font-family: 'DAI';
  font-size: 16pt;
  text-align: center;
  color: rgba(255, 255, 255, 1.0);
  
  cursor: pointer;
  
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.toggle_primary:hover, .toggle_secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid var(--selected);
}

.toggle_primary {
  left: 0px;
  
  border-color: white;
  border-radius: 0px 0px 0px 10px;
}

.toggle_secondary {
  right: 0px;
  
  color: rgba(255, 255, 255, 0.3);
  border-radius: 0px 0px 10px 0px;
}

.tier_icon {
  width: 100px;
  height: 100px;
  
  position: absolute;
  margin-top: 10px;
  margin-left: 10px;
  
  background-image: var(--skill);
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
}

.tier {
  text-align: center;
}

.skill {
  display: inline-block;
  width: 65px;
  height: 65px;
  margin-left: 15px;
  margin-right: 15px;
  
  position: relative;
  
  background-image: var(--skill);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  
  opacity: 0.4;
}

.skill:hover {
  cursor: pointer;
  opacity: 1.0;
  
  .subskill {
    opacity: 0.4;
  }
  
  .subskill:hover {
    opacity: 1.0;
  }
}

.subskill {
  position: absolute;
  bottom: -12px;
  right: -12px;
  
  width: 32px;
  height: 32px;
  
  background-image: var(--skill);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.selected {
  opacity: 1.0;
  filter: drop-shadow(0px 0px 8px var(--selected));
}

.tooltip {
  display: inline-block;
  vertical-align: top;
  
  background: rgba(0, 0, 0, 0.6);
  
  width: 480px;
  height: 750px;
  
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  
  position: relative;
  
  margin-left: 50px;
  margin-right: 50px;
}

.tooltip_character {
  position: absolute;
  top: 20px;
  right: 20px;
  
  width: 200px;
  height: 200px;
  
  text-align: center;

  background-image: var(--character);
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
}

.tooltip_icon {
  width: 100px;
  height: 100px;
  
  margin: 50px;
  
  background-image: var(--skill);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.tooltip_ability {
  color: var(--ability);
  
  font-family: 'DAI';
  font-size: 20pt;
  font-weight: bold;
  
  margin-left: 20px;
  
  filter: drop-shadow(0px 0px 8px var(--ability_op));
}

.tooltip_description {
  color: var(--ability_desc);
  
  font-family: 'DAI';
  font-size: 14pt;
  
  margin: 20px;
}

.tooltip_stats {
  color: var(--ability_stats);
  
  font-family: 'DAI';
  font-size: 14pt;
  
  margin: 20px;
  
  filter: drop-shadow(0px 0px 2px var(--ability_desc));
}



@media (orientation: portrait) {
  .tooltip {
    display: none;
  }
}








.characters {
  width: 100vw;
  margin: auto;
  
  padding-top: 15px;
  padding-bottom: 15px;
  
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  
  scrollbar-color: var(--main) var(--contrast);
  scrollbar-width: thin;
  
  text-align: center;
}

.profile {
  background-image: var(--character);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  width: 120px;
  height: 200px;
  
  display: inline-block;
  
  border-radius: 8px;
  border: 3px solid rgb(220,220,220);
}

.selector {
  margin: 5px;
  
  opacity: 0.6;
  
  cursor: pointer;
}

.selector:hover {
  margin: 0px;
  
  opacity: 1.0;
  transition: opacity .25s ease-in-out;
  
  width: calc(var(--profile_w) + 10px);
  height: calc(var(--profile_h) + 10px);
}

.tier {
  padding: 15px;
}

.ttier:first-child {
  height: 100px;

  .ability {
    height: 100%;
    color: white;
  }
}

.ability {
  display: inline-block;
  
  width: calc(var(--ability_s) + 50px);
  height: var(--ability_s);
  margin: var(--ability_m);
  
  width: calc(75px + 50px);
  height: 75px;
  margin: 0px;
  
  background-image: var(--ability);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  
  position: relative;
  
  opacity: 0.6;
}

.ability:hover {
  opacity: 1.0;
  transition: opacity .25s ease-in-out;
  
  cursor: pointer;
}

.selected {
  opacity: 1.0;
}

.subability {
  width: calc(var(--ability_s) / 2);
  height: calc(var(--ability_s) / 2);
  
  width: 38px;
  height: 38px;
  
  background-image: var(--ability);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  position: absolute;
  bottom: -12px;
  right: 10px;
  
  z-index: 10;
}