index.css

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

input.hpInput {
  color: blue;
  margin-left: 10px;
}

.pageTabsArea {
  display: flex;
  justify-content: space-around;
  font-size: 25px;
}

.pageTabsArea .activeTab {
  border-style: solid solid none solid;
  border-width: 1px;
  text-align: center;
  flex-grow: 1;
  padding-bottom: 5px;
}

.pageTabsArea .inactiveTab {
  border-style: none none solid none;
  border-width: 1px;
  text-align: center;
  flex-grow: 1;
  background-color: lightgray;
  padding-bottom: 5px;
}

div.setupArea {
  display: flex;
  flex-direction: column;
}

div.healthArea {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

div.healthTracker.nemesis {
  background: url("./nemesis.jpg");
}

div.healthTracker.gravehold {
  background: url("./city.jpg");
  background-position: center;
  background-size: cover;
}

div.healthTracker {
  width: 300px;
  height: 125px;
  border: 2px solid;
  border-radius: 15px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-grow: 1;
  margin: 5px;
}

div.healthButton {
  height: 30px;
  width: 30px; 
  border-radius: 5px;
  border: 1px solid;
  background-color: lightgrey;
  display: flex;
  align-items: center;
  justify-content: center;
}

.healthNumber {
  font-size: 20pt;
  height: 30px;
  width: 50px; 
  background-color: lightgrey;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-align: center;
}

div.goodHealth {
  color: green;
}

div.okHealth {
  color: yellow;
}

div.badHealth {
  color: red
}

div.cardsArea {
  display: flex;
}

div.cardBack {
  background:
    radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
    radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
    radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
    radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
    radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
    radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
    radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
    radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
    linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
    linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
  background-color: #300;
  background-size: 100px 100px;

  /*background-clip: content-box;*/
  /*padding:3px;*/
  width: 100px;
  height: 150px;
  border-radius: 5px;
  border: 3px solid;
  margin-left: 5px;
  transition: left 2s;
  position: absolute;
}

div.deckHolder {
  /*height: 160px;
  display: flex;
  justify-content: center;*/
}

div.discardHolder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

div.shuffleHolder {
  background: lightgrey;

  background-clip: content-box;
  width: 100px;
  height: 150px;
  border-radius: 5px;
  border: 1px dashed;
  
  margin-left: 5px;
  margin-top: 2px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

div.cardFront {
  opacity: 1;
  /*background: lightgrey;*/

  background-clip: content-box;
  width: 100px;
  height: 150px;
  border-radius: 5px;
  border: 3px solid;
  margin-left: 5px;

  font-size: 22px;

  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* .cardFront.four {
  background-image: radial-gradient(circle, violet 50%, grey, black);
}

.cardFront.three {
  background-image: radial-gradient(circle, turquoise 50%, grey, black);
}

.cardFront.one {
  background-image: radial-gradient(circle, yellow 50%, grey, black);
}

.cardFront.two {
  background-image: radial-gradient(circle, orange 50%, grey, black);
}

.cardFront.threefour {
  background-image: radial-gradient(circle, turquoise 20%, violet, purple);
}

.cardFront.onetwo {
  background-image: radial-gradient(circle, yellow 50%,white 5%, orange);
} */

.cardFront.nemesis {
  /* background-image: radial-gradient(circle, red 20%, rgb(133, 40, 40) 70%, black); */
  background-image: radial-gradient(circle, pink, rgb(133, 40, 40) 70%, black);
  color: black;
}

.cardFront.one, 
.cardFront.two,
.cardFront.three,
.cardFront.four,
.cardFront.wild,
.cardFront.onetwo,
.cardFront.threefour
{
  background-image: radial-gradient(circle, white 40%, lightgray, black);
}

.cardFront.wild
{
  background-image: radial-gradient(circle, yellow 25%, rgb(202, 202, 68) 70%, black);
}

div.cardFront.hovering {
  background: grey;
  border-style: dashed;
}