body {
	background-color: deepskyblue;
	font-family: sans-serif;
	padding: 0;
	margin: 0;
}

.window {
	background-color: #f8f7e0;
	padding: 1rem;
	border: 0.1rem solid black;
	border-radius: 0.5rem;
	box-sizing: border-box;
}

.tableHeader {
	font-size: 1.25rem;
	font-weight: bold;
	display: flex;
	justify-content: stretch;
	align-items: baseline;
	margin-bottom: 0;
}

.tableEmoji {
	font-size: 1.75rem;
	padding-right: 0.5rem;
	user-select: text;
}

.page {
	user-select: contain;
}

.page * {
	user-select: none;
}

.readable {
	width: 35rem;
}

ul {
	padding: 0;
}

li {
	list-style: none;
}

.buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: stretch;
	& > * {
		flex: 1 0 auto;
		margin: 0.2rem 0 0 0.3rem
	}
}

.button {
	outline: none;
	border: none;
	padding: 0.5rem;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
	color: inherit;
	font-family: inherit;
	background-color: lightgray;
	cursor: pointer;
	user-select: none;
	border-radius: 0.8rem 0.4rem;
	box-shadow: 0 0 black;
	transform: none;
	transition: background-color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;

	&:hover, &:focus {
		background-color: darkgray;
		box-shadow: -0.2rem 0.2rem black;
		transform: translate(0.2rem, -0.2rem);
	}

	&:active {
		box-shadow: 0 0 black;
		transform: none;
	}
}

footer {
	display: block;
	margin: 0.75rem 0 0 0;
	font-size: 0.75rem;
	user-select: none;
}

.resultText {
	flex: 1 1 auto;
	appearance: none;
	background-color: transparent;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	outline: 0;
	border: 0;
	padding: 0.2rem 0.5rem;
	cursor: pointer;
	text-align: left;
	word-wrap: normal;
	width: 100%;
	box-sizing: border-box;
	white-space: normal;
	user-select: text;
	transition: background-color 0.2s ease;
	border-radius: 0.3rem;
}

.resultText:hover {
	background-color: #BFBFBF60;
}

.resultText:active, .resultText:focus {
	background-color: #9F9FFF90;
}

footer {
	text-align: center;
}

@keyframes popup {
	from {
		transform: scale(0);
		opacity: 0;
	}

	10% {
		transform: none;
		opacity: 100%;
	}

	75% {
		transform: none;
		opacity: 100%;
	}

	to {
		transform: scale(0);
		opacity: 0;
	}
}