@charset "utf-8";
/* CSS Document */

:root {
  --text-color: white;	
  --bgr-color: #262626;
  --theme-color: #4a476f;
  --theme-color-light: #6f6ba6;
  --h2-bgr-color: #151515;
  --quote-bgr-color: #424242;
  --hdr-border-color: #514e73;
  --variants-bgr-color: #373239;
}

@media (prefers-color-scheme: dark) { 
	:root {
	  --text-color: white;	
	  --bgr-color: #262626;
	  --h2-bgr-color: #151515;
	  --quote-bgr-color: #424242;
	  --variants-bgr-color: #373239;
	}
}

@media (prefers-color-scheme: light) { 
	:root {
	  --text-color: #222;	
	  --bgr-color: whitesmoke;
	  --theme-color-light: #4a476f;
	  --h2-bgr-color: #dbdbdb;
	  --quote-bgr-color: #e1e1e1;
	  --variants-bgr-color: #eee;
	}
}

body {
	background-color: var(--bgr-color);
	margin: 0;
	padding: 0;
	color: var(--text-color);
	font-family: tahoma, helvetica, sans-serif;
	display: grid;
	grid-template-rows: auto auto 1fr;
	min-height: 100vh;
	line-height: 1.8;
}

blockquote {
	margin-inline: 0em;
	position: relative;
	margin-bottom: 1em;
	font-size: 2em;
}

blockquote p {
  padding: .5em;
  background: var(--quote-bgr-color);
  border-radius: .5em;
  font-style: italic;
}

blockquote p::before {
  content: '\201C';
}

blockquote p::after {
  content: '\201D';
}

blockquote footer {
	font-size: smaller;
	text-align: right;
}
header {
	background-color: var(--theme-color);
	border-bottom: 1px solid var(--hdr-border-color);
	display: flex;
	justify-content: center;
	position: sticky;
	top: 0;
	z-index: 1;
}

header img {
	padding: 1em 1em 1.5em;
	max-width: calc(100vw - 2em);
}

@media (max-width:45em) {
	header img {
		padding: .2em 0 .5em;	
	}	
}

main {
  padding-inline: 1em;
  max-width: 55em;
  margin: 0 auto 4em;
  display: grid;
  gap: 1rem;
}

.variants {
  margin-inline: 1em;
  background: var(--variants-bgr-color);
  padding: 0 1em;
  border-radius: 0 0 1em 1em;
}
.variants p {
  margin-bottom: 3em;
  letter-spacing: .02em;
}

.variants p:last-of-type {
  margin-bottom: 1em;
}

.variants > ul {
  margin-bottom: 3em;
  padding-left: 1em;
}

.variants > ul > li {
  list-style: none;
}

.variants > ul ul {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.variants > ul  ul > li {
  list-style: square;
}

body > footer {
  height: 1em;
  background-color: var(--theme-color);
  align-self: end;
}

@media (max-width:45em) {
	blockquote {
		font-size: 1.5em;
	}		
}

details {
  overflow: hidden; 
}

summary {
  display: block;
}

summary::-webkit-details-marker {
  display: none;
}

summary span {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5rem;
  font-size: 1.6rem;
  color: var(--theme-color-light);
  background-color: var(--h2-bgr-color);
  padding: 1rem;
  border-radius: 1rem;
  margin-block: 0;
  font-weight: bold;
}

summary span:hover {
  cursor: pointer;
}

summary span::before {
  content: '';
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  transition: rotate 200ms 400ms ease-out;
  background-color: var(--theme-color-light);
  height: .8em;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  width: .6em;
}

div.variants {
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease-out;
}

details[open] + div.variants {
  max-height: 1500px; 
  transition: max-height 400ms ease-out;
}

details[open] span::before {
  rotate: 90deg;
  transition: rotate 200ms ease-out;
}

suit {
  font-weight: bold;
  background-color: #c6c6c6;
  padding: 0 .1em;
  border-radius: .3em;
  display: inline-flex;
  align-items: center;
  height: 1.4em;
  position: relative;
  font-size: 1.1em;
  min-width: 1.1em;
  justify-content: center;
}

.hearts,
.diamonds {
  color: #b00;
}

.clubs,
.spades {
  color: black;
}

/*.hearts::before, .clubs::before, .diamonds::before, .spades::before, .all::before, .all::after {
  font-size: 1.4em;
  line-height: 0;
  margin-top: -.2em;
}*/

.spades::before {
  content: '\2660';
  color: black;
}

.clubs::before{
	content:'\2663';
	color: black;
}

.hearts::before{
	content:'\2665';
	color: #b00;
}

.diamonds::before{
	content:'\2666';
	color: #b00;
}

.all::before {
  content: '\2660 \2663';
  color: black;
}

.all::after {
  content: '\2665 \2666';
  color: #b00;
}
.all-suits suit {
  border-radius: 0;
}
.all-suits {
  display: inline-flex;
  border-radius: .3em;
  overflow: hidden;
}