:root {
	--accent: #52a2c8;
	--secondaryAccent: #52c4c8;
	--gradient: linear-gradient(to bottom, #52a2c8, #77c2c7);
	--flame: coral;
	--background: #f3f3f7;
	--cell: white;
	--cellSelect: rgb(249, 249, 249);
	--label: black;
	--secondaryLabel: rgba(94, 94, 94, 0.65);
	--border: lightgray;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--cardHeight: 350px;
}

.invertible.head {
	filter: invert(1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: black;
		--cell: rgb(32, 33, 33);
		--cellSelect: rgb(29, 30, 30);
		--label: white;
		--secondaryLabel: rgba(206, 206, 206, 0.65);
		--border: rgb(46, 46, 46);
	}

	.invertible {
		filter: invert(1);
	}

	.invertible.head {
		filter: invert(0);
	}
}

@media screen and (max-width: 550px) {
	:root {
		--cardHeight: 250px;
	}
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: var(--label);
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	font-family: var(--font);
	background: var(--background);
}

.transitionContainer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: var(--background);
	padding: 8px;
	box-sizing: border-box;
}

.vstack {
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
}

.hstack {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
		 -moz-user-select: none; /* Firefox */
		  -ms-user-select: none; /* Internet Explorer/Edge */
			  user-select: none; /* Non-prefixed version, currently
									supported by Chrome and Opera */
  }

  .border {
	border: solid 0.5px var(--border);
}

.silentButton {
	color: var(--secondaryLabel);
	display: flex;
	justify-content: center;
	align-items: center;
	transition-duration: 200ms;
	-webkit-tap-highlight-color: transparent;
}

.silentButton:hover {
	color: var(--accent);
}

.silentButton:active {
	outline: none;
	background-color: transparent;
}

.silentButton:disabled {
	filter: grayscale(1) brightness(0.3);
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

button {
	background-color: transparent;
	border: none;
	padding: 0;
	margin: 0;
	outline: none;
	cursor: pointer;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}

p, h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

.card.framside {
	transform: rotateY(0deg);
}

.card.bakside {
	transform: rotateY(180deg);
}

.card > * {
	transition-duration: 250ms;
	opacity: 1;
}

.card.transition > * {
	opacity: 0;
}