/*
for a color theme...
  FCE762 - nice yellow color
  FECC6E - warm orange
  FFB17A - sunset red
  4F4789 - weird violet
  201335 - dark purple
i think itd be best to alternate because this is actually a gradient.
*/



/*/ General */

/** "article*/
.generator-container {
  display: grid;
  grid-template-rows: 50px 50px;
}

.gen {
  background-color: rgba(120, 137, 255, var(--opacity));

  /*//border: 1px solid black;*/

  width: 900px;
  height: 50px;
  
  display: grid;
  grid-template-columns: 320px 1fr 150px;
  align-items: center;
}

/** all Even gens have a design color*/
.second-gen,.fourth-gen,.sixth-gen,.eight-gen,.tenth-gen { 
  background-color: rgba(255, 234, 96, 0.32);
}

.gen .name {
  background-color: rgba(135, 206, 250, var(--opacity));

  position: relative;
}

/** setting the "1st gen.." description for generators*/
.gen .no {
  background-color: rgba(14, 184, 2, var(--opacity));

  position: absolute;
  right: 278px;
}
.gen .term {
  background-color: rgba(24, 210, 186, var(--opacity));

  position: relative;
  left: 45px;
}


.gen .mult {
  color: hsl(0, 0%, 80%);

  font-size: 13px;
  
  position: absolute;
  bottom: 0;
}

.gen .quantity {
  position: relative;
}

/*/ END - General */





/*/ Buttons */

/** default state*/
.gen-buy {
  background-color: black;
  color: white;

  height: 40px;
  width: 150px;

  border: 1px solid rgb(160, 19, 0);
  border-radius: 7px;

  box-shadow: inset 0 0 5px rgb(160, 19, 0);

  transition-delay: 0.03ms;
  transition: box-shadow 0.1s, color 0.1s;
}
.is-buyable {
  border: 1px solid rgb(0, 202, 27);

  box-shadow: inset 0 0 7px rgb(0, 202, 27);
}

/** when hovered*/
.gen-buy:hover {
  color: hsl(0, 5%, 50%);

  box-shadow: inset 0 0 8px rgb(160, 19, 0);
}
.is-buyable:hover {
  color: hsl(120, 5%, 50%);

  box-shadow: inset 0 0 11px rgb(0, 202, 27);
}

/** when clicked*/
.gen-buy:active {
  color: hsl(0, 5%, 42%);

  box-shadow: inset 0 0 11px rgb(160, 19, 0);
}
.is-buyable:active {
  color: hsl(120, 5%, 42%);

  box-shadow: inset 0 0 15px rgb(0, 202, 27);
}

/*/ END - Buttons */





/*/ Tooltips (for dim purchased amount) */

/** defines where tooltip should show up when hovered*/
.button-container {
  background-color: rgba(0, 0, 255, 0.);

  position: relative;
  right: 4px;
}

.button-container .tooltip-body {
  background-color: rgb(255, 255, 255);
  color: black;

  font-size: 15px; 
  font-family: Arial, sans-serif;

  padding: 0 15px 0 15px;
  border-radius: 3px;

  display: flex;
  align-items: center;

  position: absolute;
  right: 160px;
  top: 5px;
  height: 30px;
  text-shadow: 0 0 0 rgb(0, 0, 0, 0);

  pointer-events: none;

  opacity: 0;
  transition: opacity 0.15s;
}

.button-container .tooltip-tail {
  height: 0;
  width: 0;

  border-left: 6px solid rgb(255, 255, 255);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;

  position: absolute;
  right: 155px;
  top: 14px;

  text-shadow: 0 0 0 rgb(0, 0, 0, 0);

  pointer-events: none;

  opacity: 0;
  transition: opacity 0.15s;
}

/** when hovered*/
.button-container:hover .tooltip-body,
.button-container:hover .tooltip-tail {
  opacity: 1;
}

/*/ END - Tooltips (for dim purchased amount) */