/* BASIC STYLES HERE */
:root {
  --slasher-1: rgb(161, 252, 161);
  --slasher-2: green;
  --womper-1: rgb(255, 214, 138);
  --womper-2: orange;
  --stomper-1: pink;
  --stomper-2: hotpink;
  --intellectual-1: rgb(153, 111, 249);
  --intellectual-2: rgb(102, 37, 253);
}


body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
  /* display: flex;
  place-content: center;
  align-items: center; */
}

#pop-toast-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: end;
}

.card {
  border-style: double !important;
  border-width: 4px;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
  transition: all .2s ease;
}

.card:hover {
  cursor: pointer;
  filter: saturate(1.2) brightness(1.1);
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}

.stomper {
  background-color: var(--stomper-1);
  border-color: var(--stomper-2);
}

.womper {
  background-color: var(--womper-1);
  border-color: var(--womper-2);
}

.slasher {
  background-color: var(--slasher-1);
  border-color: var(--slasher-2);
}

.intellectual {
  background-color: var(--intellectual-1);
  border-color: var(--intellectual-2);
}


.active-card {
  border-width: 6px;
  border-style: double;
  border-radius: 12px;
  font-size: 22px;
}

.active-card img {
  border: 1px solid black;
  height: 250px;
  width: 250px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.158);
}

.slasher-tag {
  background-color: var(--slasher-2);
  color: var(--slasher-1);
  padding: .25em 1em;
  border-radius: 50px;
}

.stomper-tag {
  background-color: var(--stomper-2);
  color: var(--stomper-1);
  padding: .25em 1em;
  border-radius: 50px;
}

.intellectual-tag {
  background-color: var(--intellectual-2);
  color: var(--intellectual-1);
  padding: .25em 1em;
  border-radius: 50px;
}

.womper-tag {
  background-color: var(--womper-2);
  color: var(--womper-1);
  padding: .25em 1em;
  border-radius: 50px;
}