@import "reset.css";

:root {
  /* rgb values */
  --color-davysgrey: 89, 89, 89; /* #595959 */
  --color-xanadu: 128, 143, 133; /* #808F85 */
  --color-darkpurple: 49, 8, 31; /* #31081F */
  --color-persianplum: 107, 15, 26; /* #6B0F1A */
  --color-alabaster: 220, 224, 217; /* #DCE0D9 */
  --color-shadowblue: 114, 134, 160; /* #7286A0 */
  --color-camel: 187, 148, 87; /* #bb9457 */
  --color-bananamania: 255, 230, 167; /* #ffe6a7 */
  --color-bistre: 67, 40, 24; /* #432818 */
  --color-wintersky: 250, 15, 121;

  --time: 0.707s;
}

* {
  box-sizing: border-box;
  background-repeat: no-repeat;
  position: relative;
  vertical-align: middle;
}

::before, ::after {
	box-sizing: border-box;
}

html {
  font-size: 10px;
  font-family: sans-serif;
}

body {
  background-color: rgb(var(--color-persianplum));
  padding: max(1.2rem, 3vmin);
}

main {
  min-width: 100%;
  background-color: rgb(var(--color-alabaster));
  border-radius: 1vmin;
  padding: max(1rem, 2vmin);
}

#wrapper-supreme {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 1fr;
  gap: 2rem;
  grid-auto-flow: dense;
  justify-content: center;
}

.card {
  aspect-ratio: 7 / 4;
  cursor: default;
  perspective: 100rem;
  display: flex;
}

.card-wrap {
  flex: 1;
  display: flex;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transition-duration: var(--time);
  -webkit-transition-duration: var(--time);
  -moz-transition-duration: var(--time);
}

.card.flip .card-wrap {
  transform: rotateX(180deg);
}

.side {
  min-width: 100%;
  box-shadow: 0px 0px 6px 2px rgb(var(--color-shadowblue));
  background-color: rgba(var(--color-bananamania), 0.8);
  border: 1px solid rgba(var(--color-camel), 0.8);
  color: rgb(var(--color-bistre));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.front {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: max(0.5rem, 1vmin);
}

.sequence, .char {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.sequence {
  font-size: 1.5rem;
}

.num-trad span:nth-child(3) { font-size: 1.2em; }

.bronze img {
  height: 5rem;
  display: block;
  filter: invert(13%) sepia(16%) saturate(1917%) hue-rotate(339deg) brightness(103%) contrast(90%);
}

.gua span {
  font-size: 5rem;
  display: block;
}

.back {
  font-size: 1rem;
  text-align: center;
  display: flex;
  transform: rotateX(180deg) translate(-100%, 0);
}

.symbolTextWrap { margin: auto; }

.symTxt {
	display: block;
	margin: 0.5rem;
}

.symTrad {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.symEng {
	overflow-wrap: anywhere;
	hyphens: auto;
}