body {
	/* background-color: #260a18; */
	background-color: #1c1024;
	color: #9c9c9c;
	font-size: 14px;
	position: relative;
	left: calc((100vw - 100%) / 2);
	overflow-x: hidden;
}

#mainwrap {
	min-width: 400px;
	margin: 50px 15% 150px 15%;
	background: #0f0b12;
	padding: 20px 30px 20px 30px;
	box-shadow: #00000075 0px 5px 5px;
	position: relative;
	z-index: 1;
}

#find-container {
	margin: 0px auto;
	min-width: 600px;
	max-width: 1200px;
	padding: 0px 40px;
}

#hof-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

#form {
	margin: 70px auto 15px auto;
}

.main-header {
	color: #8c86ad;
	position: sticky;
	left: 0;
	right: 0;
	top: 0;
	margin-inline: auto;
	width: fit-content;
	z-index: 0;
	text-align: center;
}

.main-header h2 {
	margin-top: 0px;
	text-shadow: #000 3px 3px 3px;
	padding-top: 30px;
	font-size: 3.5em;
	font-weight: bolder;
}

.main-header p {
	font-size: 1.5em;
	margin-top: 20px;
}

#footer {
}

#footer-collapse {
	margin: 0px 10% 0px 10%;
}

#footer p {
	font-size: 1.2em;
	color: #686767;
	text-align: center;
}

#footer a {
	color: #424880;
}

#toggle-about {
	position: absolute;
	top: 30px;
	left: 30px;
	background: unset;
	font-size: 2em;
	border: unset;
	color: #8c86ad;
}

#phrase {
	color: #aa76c2;
}

#count {
	max-width: 180px;
}

#button-submit {
	font-size: 1.5em;
	padding: 0px 25px;
	min-width: 180px;
	color: #d2d2d2;
}

.form-row {
	display: flex;
	flex-direction: row;
	gap: 15px;
	margin-top: 15px;
	height: 40px;
}

.form-row.main-row {
	height: 65px;
	margin-top: 0px
}

#waiting-container {
	flex-grow: 1;
}

#error-container {
	margin: 15px auto;
}

#results-container {
	margin: 15px auto;
	display: grid;
	gap: 20px 29px;
	grid-template-columns: auto auto auto;
}

#pool-collapse {
	margin-top: 10px;
}

#pool-container {
	margin: 25px auto 15px auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 15px;
}

.anagram-div {
	min-width: 200px;
	max-width: 400px;
	background-color: #1a151f;
	box-shadow: #0000003d 0px 5px 5px;
	display: block;
	margin: 30px 30px 0px 30px;
	padding-bottom: 10px;
	text-align: center;
	text-shadow: 0px 2px 4px #000000cc;
}

.pool-info {
	color: #694b8d;
	font-size: 1.5em;
	font-weight: bold;
	background: #1f1224;
	padding: 5px 15px;
	border-radius: 4px;
}

.pool-info-phrase {
	color: #6e76a4;
}

.phrase {
	padding: 15px 30px 10px 30px;
	background: linear-gradient(45deg, #30212a, #1d1d2c);
	color: rgb(177, 115, 145);
	font-size: 1.5em;
	box-shadow: #00000036 0px 3px 5px;
	overflow: hidden;
}

.anagrams {
	color: rgb(131, 121, 99);
	font-size: 1.3em;
	line-height: 1em;
	margin: 20px 0px 0px 0px;
	padding: 0px 40px 0px 40px;
}

.form-control {
	background-color: #181717;
	background-image: none;
	border: 1px solid #5e3f6d;
	font-size: 1.5em;
	height: unset;
	padding: 5px 20px;
	color: #9a9797;
}

.form-control::placeholder {
	color: #999;
	opacity: 0.3;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
}

.btn-default {
	color: #9dbbca;
	background-color: #2f1636;
	border-color: #000;
	font-size: 1.2em;
	padding: 7px 18px;
}

.btn-toggled {
	background-color: #5c1d6d;
}

.btn-default:hover {
	background-color: #48435f;
	color: #9dbbca;
	background-color: #8a5f96;
	border-color: #26162c;
}

.btn-primary {
	background-color: #733b94;
}

.error {
	color: #cd5858;
	font-size: 1.5em;
	background: #1c1c1e;
	padding: 20px;
	border-radius: 4px;
	border-width: 10px;
	border-style: none none none solid;
}

.warning {
	color: #5493b9;
	font-size: 1.5em;
	background: #1c1c1e;;
	padding: 20px;
	border-radius: 4px;
	border-width: 10px;
	border-style: none none none solid;
}

.waiting {
	color: #bc7bd4;
	background: #43173c;
	font-size: 1.2em;
	border-radius: 4px;
	text-align: center;
	height: 100%;
	padding: 8px;
	position: relative;
}

.waiting-negative {
	background: #481f2e;
	color: #d47b91;
}

.dismiss-message  {
	position: absolute;
	margin-right: 8px;
	right: 1px;
	top: 7px;
	font-size: 1.25em;
}

.anagram-result {
	position: relative;
	color: #abb0e8;
	font-size: 1.5em;
	background: linear-gradient(90deg, #342941, #301b3b);
	padding: 10px 20px 10px 20px;
	border-radius: 4px;
	box-shadow: #000 0px 2px 4px;
	text-align: center;
	text-shadow: #000 2px 2px 3px;
	align-content: center;
	transition: transform 0.13s;
	transition-timing-function: ease-out;
}

.anagram-result span {
	pointer-events:	none;
}

.anagram-result:hover {
	transform: translateY(-2px);
}

.word-result {
	position: relative;
	color: #abb0e8;
	font-size: 1.3em;
	background: linear-gradient(90deg, #251c2f, #2f1b39);
	padding: 3px 15px;
	border-radius: 4px;
	text-align: center;
	flex-grow: 0.25;
	transition: transform 0.13s;
	transition-timing-function: ease-out;
}

.word-result:hover {
	transform: translateY(-2px);
}

#word-count-slider {
	flex-grow: 1;
}

#word-count-label {
	font-size: 1.3em;
	text-wrap: nowrap;
	vertical-align: middle;
	margin: auto;
}

.anagram-score {
	font-size: 0.75em;
	opacity: 0.3;
	position: absolute;
	justify-self: right;
	right: 5px;
	bottom: 0px;
}

.faved {
	background: linear-gradient(90deg, #4f3259, #424e72);
}

.single-word {
	background: linear-gradient(90deg, #5a4e38, #9a653e);
	color: #e8ecbf;
}

.word-result-selected {
	background: linear-gradient(90deg, #5a4e38, #9a653e);
	color: #e8ecbf;
}

.faved-star {
	position: absolute;
	top: -10px;
	right: -11px;
	color: #ffc469;
	font-size: 1.2em;
	text-shadow: #0000004b 2px 2px 2px;
}

.save-anagram {
	border-radius: 4px;
	text-align: center;
	font-size: 1em;
	color: #3b3950;
	width: 32px;
	height: 32px;
	line-height: 1.6em;
	transition: background-color, color 0.3s;
	position: absolute;
	right: -14px;
	top: -13px;
}

.save-anagram:hover {
	background-color: #6f571f;
	color: #ffdc96;
}

.section {
	margin-top: 30px;
	border-color: #2a2d4c;
	border: #34364d 1px solid;
}

.vertical-spacer {
	margin: 30px 0px;
}

.slider {
	-webkit-appearance: none;
	height: 6px;
	border-radius: 8px;
	background: #2a1f37;
	outline: none;
	transition: background .2s;
	margin: auto 20px;
	min-width: 50px
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 26px;
	height: 26px;
	background: #71355f;
	border-radius: 50%;
	cursor: pointer;
	border-color: black;
}

.slider::-moz-range-thumb {
	appearance: none;
	width: 26px;
	height: 26px;
	background: #71355f;
	border-radius: 50%;
	cursor: pointer;
	border-color: black;
}

.slider:hover {
	background: #553c72;
}

.slider-value {
	width: 45px;
	font-size: 1.75em;
	text-wrap: nowrap;
	margin: auto 15px auto 0px;
	text-align: center;
	color: #a36cab;
	line-height: 0.3;
	font-weight: bold;
}

.slider-icon {
	font-size: 2em;
	padding: 0px 0px 0px 10px;
	line-height: unset;
	color: #a36cab;
}

.slider-container {
	display: flex;
	flex-grow: 1;
}

#clipboard-popup {
	position: absolute;
	background-color: #1f4847;
	color: #6ed0ce;
	font-size: 1.3em;
	padding: 10px 20px;
	border-radius: 4px;
	pointer-events: none;
	z-index: 9;
	animation-name: keyframes-popup;
	animation-iteration-count: 1;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(.17, .67, .32, 1.55)
}

#luna {
	position: fixed;
	bottom: -50px;
	right: 10px;
	z-index: -1;
}

#luna img {
	height: 400px;
	pointer-events: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	opacity: 0.75;
}

.debug-info {
	color: #464663;
}

.channel-emote-tiny {
	max-height: 40px;
	max-width: 40px;
	margin: 0px 10px;
}

.dialog {
	background-color: #251524;
	border-radius: 5px;
	position: fixed;
	margin: auto;
	z-index: 10;
	left: 50%;
	top: 35%;
	transform: translate(-50%, -50%);
	box-shadow: #000 5px 0px 30px;
	border: #1a191c 1px solid;
	display: flex;
	flex-direction: column;
	max-width: 900px;
	min-width: 450px;
}

.dialog-header {
	width: 100%;
	height: 60px;
	text-align: center;
	background-color: #41273e;
	font-size: 2em;
	display: flex;
	align-items: center;
	border-radius: 5px 5px 0px 0px;
	color: #c183a0;
	box-shadow: #0000006b 0px 3px 5px;
	text-shadow: #000 2px 2px 4px;
}

.dialog-header p {
	margin: auto;
	vertical-align: middle;
}

.dialog-button-container {
	width: 100%;
	height: 50px;
	display: flex;
	gap: 20px;
	margin: 0px 0px 10px 0px;
	padding: 0px 2%;
	max-width: 500px;
	align-self: center;
}

.dialog-button {
	font-size: 1.4em;
	width: 100px;
	flex-grow: 1;
	margin: auto;
	padding: 10px 20px;
	transition: all .17s
}

.dialog-content {
	font-size: 2em;
	display: flex;
	flex-direction:column;
	align-items: center;
	padding: 40px 40px;
	margin: auto 0px;
	min-width: 600px;
}

.dialog-content span {
	text-align: center;
	padding: 5px 0px;
	text-shadow:#000 2px 2px 4px;
}

.orderable-phrase {
	list-style: none;
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}

.orderable-word {
	display: inline-block;
	margin: 0px 0px 0px 6px;
	text-shadow:#000 2px 2px 4px;
	border-radius: 4px;
	cursor: grab;
	transition: background .2s;
}

.orderable-word:hover {
	background: #6a396f;
	color: #cda8d8;
}

.btn-success {
	background-color: #46335c;
	border-color: #7a4ba1;
	color: #cb91d4;
}
.btn-success:hover {
	background-color: #643971;
	border-color: #b585dc;
	color: #c4bbe6;
}
.btn-success:active {
	background-color: #ae70c1;
	border-color: #b585dc;
	color: #421932;
	outline: 0;
	background-image: none;
	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.btn-danger {
	background-color: #422134;
	border-color: #1d0000;
	color: #ba6092;
}
.btn-danger:hover {
	background-color: #542436;
	border-color: #4f4f4f;
	color:#c9699b;
}
.btn-danger:active {
	background-color: #993c5e;
	border-color: #4f4f4f;
	color:#2c0d1d;
	outline: 0;
	background-image: none;
	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

#dialog-overlay {
	width: 100vw;
	height: 100vh;
	background-color: #0000005c;
	position: fixed;
	z-index: 9;
	top: 0;
	left: 0;
	backdrop-filter: blur(1px);
}

.noscroll {
	overflow: hidden;
}

.page-container {
	margin: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;
	justify-content: center;
	padding: 20px 0px;
}

.page-button  {
	padding: 10px 0px;
	border-radius: 4px;
	color: #765276;
	background-color: #1a0f1e;
	width: 65px;
	min-width: 30px;
	font-weight: bold;
}
.page-button:hover {
	background-color: #3e2047;
}

.page-selected {
	background-color: #321f38;
	color: #d09ecf;
}

.page-selected:hover {
	background-color: #7b5187;
}

.page-nav {
	background-color:#1f1421;
}

.page-overflow {
	padding: 5px 0px;
	border-radius: 4px;
	background-color: #1b171c00;
	width: 12px;
	text-align: center;
	font-size: 1.25em;
	color: #573c57
}

#search-word-pool {
	max-width: 350px;
}

#first-letter-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex-grow: 1;
	gap: 10px 7px;
}

.letter-filter {
	padding: 6px 0px;
	/* background-color: #2c1d2a; */
	background: linear-gradient(90deg, #251c2f, #2f1b39);
	color: #6d576e;
	border-radius: 4px;
	font-weight: bolder;
	font-size: 1.25em;
	text-align: center;
	width: 40px;
	height: 40px;
	border: 1px solid black;
}

.letter-filter:hover {
	background-color: #52304d;
	color: #7b387e;
}

.letter-removed {
	background: linear-gradient(90deg, #200307, #2f1b39);
	color: #6e5765;
}

/* .letter-active {
	background: linear-gradient(90deg, #5a4e38, #9a653e);
	color: #e8ecbf;
} */

.letter-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px 6px;
}

.letter-strike {
	color: #7d4451;
	text-decoration-thickness: 2px;
}

#animation-viewer {
	position: relative;
}

.anim-container {
	position: relative;
	top: 0px;
	left: 0px;
	font-size : 3em;
}

.letter-anim-source {
	animation: move 5s ease-in-out infinite;
}

.letter-anim-dest {
	animation: move 5s ease-in-out infinite;
}

@keyframes keyframes-popup {
	0% {
		transform: scale(1, 1);
		transform: translateY(0px);
		opacity: 1;
	}

	20% {
		opacity: 1;
	}

	100% {
		transform: scale(1.2, 1.2);
		transform: translateY(-20px);
		opacity: 0;
	}
}

@media (max-width: 1200px) {
	#mainwrap {
		margin: 50px 0px 0px 0px;
	}

	#results-container {
		grid-template-columns: auto auto;
	}
}