:root {
  --card-small-width: 200px;
  --card-large-width: 360px;
  --card-small-height: calc(var(--card-small-width) * 475 / 275);
  --card-large-height: calc(var(--card-large-width) * 35 / 25);
  --card-number: 5;
  --distribution-factor: 3;
  --card-radius: calc(var(--distribution-factor) * var(--card-small-height));
  --gold-bright: #dfbd69;
  --gold-dark: #926f34;
  --purple-bright: #652691;
  --purple-dark: #311545;
  --green: #439164;
  --brown: #453212;
  --blue: #346191;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  padding: 1rem;
  background-color: #111;
  font-family: "Neco", serif;
  display: grid;
  grid-template-rows: 60vh 40vh;
  justify-items: center;
  grid-template-areas: "auswahl" "hand";
  gap: 1rem;
}

header {
  position: absolute;
  left: 0;
  color: #333;
}
header h1 {
  font-size: 4rem;
  padding-left: 1rem;
}
header h2 {
  font-size: 1.5rem;
  font-weight: 500;
  padding-left: 1rem;
}

main {
  grid-area: auswahl;
}

.card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.invert {
  filter: invert(100%);
}

aside.card-group {
  grid-area: hand;
  /* margin-top: -60px; */
  display: flex;
  align-items: flex-end;
}
aside.card-group .card {
  width: var(--card-small-width);
  height: var(--card-small-height);
  background-color: #181818;
  background-image: linear-gradient(180deg, #000, #222);
  border: 0.33rem solid var(--gold-dark);
  border-radius: 1rem;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 2fr 1fr 3rem;
}
aside.card-group .card h2 {
  color: var(--gold-bright);
  font-family: "Sharpie", sans-serif;
  font-size: 1.33rem;
  padding: 0.2rem;
  text-align: center;
  text-transform: capitalize;
}
aside.card-group .card p {
  font-size: 14.2857142857px;
  padding: 0.5rem;
  color: #aaa;
  font-weight: 500;
  text-align: center;
  align-self: center;
}
aside.card-group .card .stats {
  padding: 0 0.5rem;
  font-size: 2rem;
  display: flex;
  justify-content: space-between;
  color: #ccc;
}
aside.card-group .card .stats .fa-person {
  color: hsl(175deg, 70%, 30%);
}
aside.card-group .card .stats .fa-brain {
  color: hsl(199deg, 90%, 30%);
}
aside.card-group .card .stats .fa-heart {
  color: hsl(4deg, 70%, 35%);
}
aside.card-group .card .stats .fa-tooth {
  color: #f3e5f5;
}
aside.card-group .card .stats .fa-hourglass {
  color: #ffa726;
}
aside.card-group .card .stats i {
  font-size: 1.67rem;
  margin-left: -0.25rem;
}

aside {
  position: relative;
}
aside .card {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--card-small-width) / 2);
  transform-origin: bottom center;
}
aside .card:nth-of-type(1) {
  z-index: var(--card-number)-11;
  transform: translateX(calc(-1 * var(--card-radius) * 0.1736481777)) translateY(calc(var(--card-radius) * 0.015192247)) rotate(-10deg);
}
aside .card:nth-of-type(1):hover {
  transform: translateX(calc(-1 * var(--card-radius) * 0.1736481777)) translateY(calc(var(--card-radius) * 0.015192247)) rotate(-10deg) scale(1.33);
}
aside .card:nth-of-type(2) {
  z-index: var(--card-number)-21;
  transform: translateX(calc(-1 * var(--card-radius) * 0.0871557427)) translateY(calc(var(--card-radius) * 0.0038053019)) rotate(-5deg);
}
aside .card:nth-of-type(2):hover {
  transform: translateX(calc(-1 * var(--card-radius) * 0.0871557427)) translateY(calc(var(--card-radius) * 0.0038053019)) rotate(-5deg) scale(1.33);
}
aside .card:nth-of-type(3) {
  z-index: var(--card-number)-31;
}
aside .card:nth-of-type(3):hover {
  transform: scale(1.33);
}
aside .card:nth-of-type(4) {
  z-index: var(--card-number)-41;
  transform: translateX(calc(var(--card-radius) * 0.0871557427)) translateY(calc(var(--card-radius) * 0.0038053019)) rotate(5deg);
}
aside .card:nth-of-type(4):hover {
  transform: translateX(calc(var(--card-radius) * 0.0871557427)) translateY(calc(var(--card-radius) * 0.0038053019)) rotate(5deg) scale(1.33);
}
aside .card:nth-of-type(5) {
  z-index: var(--card-number)-51;
  transform: translateX(calc(var(--card-radius) * 0.1736481777)) translateY(calc(var(--card-radius) * 0.015192247)) rotate(10deg);
}
aside .card:nth-of-type(5):hover {
  transform: translateX(calc(var(--card-radius) * 0.1736481777)) translateY(calc(var(--card-radius) * 0.015192247)) rotate(10deg) scale(1.33);
}
aside .card:hover {
  z-index: calc(var(--card-number) + 1);
  cursor: pointer;
}

/* 
*/
main .card {
  /* Tarot card ratio; 275 x 475 */
  /* Poker card ratio: 250 x 350 */
  width: var(--card-large-width);
  height: var(--card-large-height);
  background-color: #181818;
  border: 0.4rem solid var(--gold-dark);
  border-radius: 1rem;
  overflow: hidden;
}
main .card h2 {
  /* background-color: var(--purple-brigth); */
  color: var(--gold-bright);
  /* border-top-left-radius: 1rem; */
  /* border-top-right-radius: 1rem; */
  font-family: "Sharpie", sans-serif;
  font-size: 1.33rem;
  padding: 0.33rem;
  text-align: center;
  text-transform: capitalize;
}

main .card {
  filter: opacity(50%);
}/*# sourceMappingURL=style.css.map */