@font-face {
  font-family: 'ballin';
  src: url('m6x11.ttf');
  font-weight: 400;
  font-style: normal;
}

:root {
	--col-dark: #3F4A4C;
	--col-mid: #919191;
	--col-light: #ffffff;
}

body {
	background-color: var(--col-dark);
	overflow: hidden;
	margin: 0;
}

#container {
	width: -webkit-fill-available;
	width: -moz-available;
	width: fill-available;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
	
	font-family: "ballin";
	background-image: url(back.png);
    background-size: cover;
}

#logo {
	position: absolute;
	top: 2em;
	left: 50%;
	transform: translateX(-50%);
}

#main {
	display: flex;
    justify-content: center;
    align-items: center;
}

#main.hide-bg {
	background-image: none;
}

@property --rotX {syntax: "<angle>"; initial-value: 0deg; inherits: false;}
@property --rotY {syntax: "<angle>"; initial-value: 0deg; inherits: false;}

#card {
	
	--rotX: 0;
	--rotY: 0;
	width: 213px;
	height: 285px;
	padding: 20px;
	image-rendering: pixelated;
	
	filter: drop-shadow(8px 16px 0 rgba(0, 0, 0, 0.3));
	transition: scale 0.3s, --rotX 0.2s linear, --rotY 0.2s linear;
	transform: perspective(300px) rotateX(var(--rotX)) rotateY(var(--rotY));
}

#card.hide-shadow {
	filter: none;
}

#card:hover {
	scale: 1.1;
}

#description-container {
	position: relative;
	background-color: var(--col-dark);
	border: 4px solid var(--col-light);
	border-radius: 16px;
	box-shadow: 0 4px 0 0 var(--col-mid);
	
	color: white;
	text-align: center;
	font-size: 24pt;
	
	padding: 2px;
	
	min-width: 300px;
	max-width: 500px;
	margin-left: 0.8em;
}

#description-container::after {
	content: "jokers.raechel.dev;
	position: absolute;
	top: 0.5em;
	left: -0.5em;
	transform: rotate(90deg);
    transform-origin: top left;
	
	font-size: 12pt;
	opacity: 0.3;
	
	text-shadow: 2px -1px black;
}

#description-container #title {
	color: var(--col-light);
	margin-top: 3px;
	
	appearance: none;
    border: none;
    background-color: transparent;
    font: inherit;
    font-size: 36pt;
    text-align: center;
	text-shadow: 0 4px 0 var(--col-mid);
}

#description-container #description {
	background-color: var(--col-light);
	border-radius: 16px;
	color: var(--col-dark);
	box-shadow: 0 4px 0 0 var(--col-mid);
	text-shadow: 0 0.1em 0 var(--col-mid);
	
	margin: 0 6px 14px 6px;
	padding: 8px;
	white-space: pre-line;
}

#description-container #rarity {
	content: "Common";
	display: flex;
	align-items: center;
	justify-content: center;
	--col-rarity: #0093FF;
	
	background-color: var(--col-rarity);
	border-radius: 16px;
	color: var(--col-light);
	box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
	
	width: 200px;
	height: 28px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	
	padding: 8px;
	
	margin: 5px;
}

#rarity[data-rarity="uncommon"] {
	content: "Uncommon" !important;
	--col-rarity: #35BD86 !important;
}

#rarity[data-rarity="rare"] {
	content: "Rare" !important;
	--col-rarity: #F02A2B !important;
}

#rarity[data-rarity="legendary"] {
	content: "Legendary" !important;
	--col-rarity: #AB5BB5 !important;
}

#rarity[data-rarity="tarot"] {
	content: "Tarot" !important;
	--col-rarity: #7B559C !important;
}

#rarity[data-rarity="planet"] {
	content: "Planet" !important;
	--col-rarity: #00A8CA !important;
}

#rarity[data-rarity="spectral"] {
	content: "Spectral" !important;
	--col-rarity: #2E76FD !important;
}

#rarity select {
	appearance: none;
	font: inherit;
	background-color: transparent;
	border: none;
	color: inherit;
	text-align: inherit;
	width: 100%;
}

#rarity select:focus {
	border: none;
	outline: none;
}

#rarity select option {
	background-color: white !important;
	color: black;
	font-size: 12pt;
}

.formatted-info {color: var(--col-mid); font-size: 16pt; text-shadow: none;}
.formatted-detail {color: #FF8F00; text-shadow: 0 0.1em 0 #7f4f00;}
.formatted-chance {color: #35BD86; text-shadow: 0 0.1em 0 #1C6854;}
.formatted-pmult {color: #FF4C40; text-shadow: 0 0.1em 0 #7f2520;}
.formatted-xmult {color: var(--col-light); background-color: #FF4C40; text-shadow: none; padding: 4px 4px 2px 4px; border-radius: 8px;}
.formatted-chips {color: #0093FF; text-shadow: 0 0.1em 0 #00337f;}
.formatted-trt {color: #7B559C; text-shadow: 0 0.1em 0 #463050;}
.formatted-plnt {color: #00A8CA; text-shadow: 0 0.1em 0 #004C6F;}
.formatted-spc {color: #2E76FD; text-shadow: 0 0.1em 0 #1F4379;}

.formatted-cmn {color: #0093FF; text-shadow: 0 0.1em 0 #005F7F;}
.formatted-unc {color: #35BD86; text-shadow: 0 0.1em 0 #1A664C;}
.formatted-rare {color: #F02A2B; text-shadow: 0 0.1em 0 #771618;}
.formatted-leg {color: #AB5BB5; text-shadow: 0 0.1em 0 #66366C;}

.formatted-clbs {color: #0081E6; text-shadow: 0 0.1em 0 #004570;}
.formatted-clbs::before {content: "♣"; margin-right: 0.2em}
.formatted-dmnd {color: #E18400; text-shadow: 0 0.1em 0 #704700;}
.formatted-dmnd::before {content: "♦"; margin-right: 0.2em}
.formatted-spds {color: #3A17B2; text-shadow: 0 0.1em 0 #1C0F5C;}
.formatted-spds::before {content: "♠"; margin-right: 0.2em}
.formatted-hrts {color: #FA2315; text-shadow: 0 0.1em 0 #7E1C0F;}
.formatted-hrts::before {content: "♥"; margin-right: 0.2em}

.formatted-hide-detail .formatted-detail {color: inherit; text-shadow: inherit;}

#format-guide {
	background-color: rgba(255, 255, 255, 0.5);
	color: black;
	padding: 1em;
	margin-left: 2em;
	font-size: 12pt;
	
	width: 400px;
	border-radius: 12px;
}

#format-list {height: 0; overflow: hidden; transition: height 0.5s;}
#format-list.visible {height: var(--list-height);}