body {
  background-color: pink;
	background: repeating-radial-gradient(
		circle,
		purple,
		purple 10px,
		plum 10px, 
		plum 20px
	);
	background-attachment: fixed;

	margin: 0px;
}

.main {
  width: 880px;
  resize: horizontal;
	overflow: auto;
  
  box-shadow: 0px 0px 5px black;
  
  padding: 1em;
  margin: 0px auto;

  background-color: plum;
	background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
}

.footer {
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  text-align: center;
	z-index: 1;
  padding: 0.5em;
  margin: 0px;
  background: rgba(150, 50, 100, 0.95);
  border-top: solid 1 plum;
  box-shadow: 0px 2px 2px 10px rgba(150, 50, 100, 0.1), 0px 2px 2px 6px rgba(150, 50, 100, 0.2), 0px 2px 2px 4px rgba(150, 50, 100, 0.4);
}

button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: inherit;
  background-color: rgba(150, 50, 100, 0.99);;
  color : black;
  border: none;
  padding: 3px;
  transition: transform 0.3s;
}
button:hover {
  transform: scale(1.05);
}
button:active {
  transform: scale(1.05) translate(1px, 1px);
  color: grey;
}


h1 {
  text-transform: capize;
  font-variant: small-caps;
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
  text-shadow: 0px 0px 2px white;

  text-align: center;
}

h2 {
  text-transform: capitalize;
  font-variant: small-caps;
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  text-shadow: 0px 0px 2px white;
	text-align: center;
	padding: 5px;
	border-radius: 15px;

  margin-bottom: 12px;
}

h3 {
  margin: 0px;
  padding: 0px;

  text-align: center;

  font-family: sans-serif;
  font-size: 20px;
  font-weight: 700;
  font-variant-caps: small-caps;
  
}

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: inherit;

  margin-top: 3px;
  margin-bottom 3px;
}

.plain_border {
 border: solid plum; 
 background-color: rgba(221, 160, 221, 0.5); 
 display: table;
 padding: 15px;
 border-radius: 1em;
}


.stone {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 width: 3ch;
 height: 4ch;
 margin: 2px;
 padding: auto;
 color: black;
 font-weight: bold;
 text-align: center;
 text-shadow: 0px 0px 12px white, 0px 0px 8px white, 0px 0px 4px white;
 user-select: none;
 cursor: pointer;
 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}
.powerstone {
 background-color: red;
 color: darkred;
 border: solid 2px darkred;
 box-shadow: inset 0px 0px 7px 2px darkred, 0px 0px 2px black;
}
.spacestone {
 background-color: purple;
 color: #301934;
 border: solid 2px #301934;
 box-shadow: inset 0px 0px 3px 2px #301934, 0px 0px 2px black;
}
.timestone {
 background-color: orange;
 color: rgb(255,69,0);
 border: solid 2px rgb(255,69,0); /* darkorange */
 box-shadow: inset 0px 0px 7px 2px rgb(255,69,0), 0px 0px 2px black;
}
.mindstone {
 background-color: #007FFF; /* azure */
 color: darkblue;
 border: solid 2px darkblue;
 box-shadow: inset 0px 0px 7px 2px darkblue, 0px 0px 2px black;
}
.realitystone {
 background-color: yellow;
 color: #8B8000; /* darkyellow */
 border: solid 2px #8B8000;
 box-shadow: inset 0px 0px 7px 2px #8B8000, 0px 0px 2px black;
}
.soulstone {
 background-color: green;
 color: darkgreen;
 border: solid 2px darkgreen;
 box-shadow: inset 0px 0px 7px 2px darkgreen, 0px 0px 2px black;
}
.egostone {
 background-color: white;
 color: black;
 border: solid 2px darkgray;
 box-shadow: inset 0px 0px 7px 2px darkgray, 0px 0px 2px black;
}
.stone:hover {
 transform: scale(1.1);
}
.stone:active {
  transform: scale(1.1) translate(1px, 1px);
}
.stone.selected {
  box-shadow: 3px 2px 2px gold, -3px -2px 2px gold, 3px -2px 2px gold, -3px 2px 2px gold;
}



.card {
  display: inline-block;
  position: relative;
  height: fit-content;
  width: 200px;

  margin: 5px;
  padding: 5px;
  overflow: hidden;

  vertical-align: top;
  user-select: none;
  cursor: pointer;

  border-radius: 10px;
  box-shadow: 3px 2px 2px black;

  background: linear-gradient(
    45deg,
    #999 5%,
    #fff 10%,
    #ccc 30%,
    #ddd 50%,
    #ccc 70%,
    #fff 80%,
    #999 95%
  );
  
  transition: background-color 0.3s;
  transition: background 0.3s;
  transition: border-color 0.3s;
  transition: box-shadow 0.3s;
  transition: transform 0.3s;
  transition: color 0.3s;
}
.card:hover {
  transform: scale(1.05);
}
.card:active {
  transform: scale(1.05) translate(1px, 1px);
	background: linear-gradient(
    45deg,
    #ddd 5%,
    #ccc 10%,
    #fff 30%,
    #999 50%,
    #fff 70%,
    #ccc 80%,
    #ddd 95%
  );
}
.inactive {
  filter: blur(1px);
}
.card.selected {
	background: linear-gradient(
    -45deg,
    #D1B000 5%,
    #FFED8A 10%,
    #FFDE2E 30%,
    #FFD700 50%,
    #FFDE2E 70%,
    #FFED8A 80%,
    #D1B000 95%
  );
}


.cardup {
  color: black;
  margin: 0px;
  padding: 2px;
	text-shadow: 1px 1px 1px gray;
	height: 2.5em;
}
.cardtitle {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
}
.girlName {
  text-align: left;
  font-weight: bold;
  margin: 0px;
}
.girlrn {
  text-align: left;
  font-size: 80%;
	margin: 0px;
	font-style: italic;
}

.cost {
  float: right;
	margin-top:-2px;
}

.carddown {
  color: black;
  margin: 0px;
  padding: 0px;
}
.largeimage {
	width: 200px;
	height: 300px;
  margin: 0px;
  padding: 0px;
	display: block;
	box-sizing: border-box;
	border: inset 2px lightgray;
	border-radius: 3px;
}
.smallimage {
	width: 125px;
	height: 125px;
  margin: 5px auto;
  padding: 0px;
	display: block;
	box-sizing: border-box;
	border: inset 2px lightgray;
	border-radius: 3px;
}
.cardtext{
  background-color: rgba(250, 250, 250, 0.75);
  text-align: left;
  padding: 5px;
  font-family: sans-serif;
  font-size: 95%;
	border: inset 2px lightgray;
	border-radius: 3px;
}

.invisible {
	display: none;
}

.hiddenFromView {
	display: none;
}