:root {
	--correct-color:rgb(83, 141, 78);
	--wrong-spot-color:rgb(181, 159, 59);
	--incorrect-color:rgb(58, 58, 60);
	--ignore-color:rgb(245, 245, 245);
	--input-color: gray;
	--off-white: #FCF7F8;
	--background: #191919;
	--text-color: white;
	--bar-color: #3891A6;
	--words-visibility: "transparent";
	--gray-color: #424242;

	touch-action: pan-x pan-y;
	height: 100%;
}

html, body {
	font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
	height: 100%;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	color: var(--text-color);
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: var(--background);
}

#container {
	top: -2.5rem;
	position: relative;
	height: 90%;
	width: min(450px, 100%);
	margin: 0;
	padding: 0;
}

/* GUESS AND ALL SUB DIVS */
/* CONATINS ALL INFO ON WORDS ENTERED & PATTERNS */
#known-answer-div {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	/* margin-top: -2rem; */
}

#guesses {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	/* margin-top: -1rem; */
}

.grid {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 95%;
	flex: 45%;
}

.row {
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(630px, 100%);
	max-width: 100%;
}

.row.normal {
	height: 3.5rem;
	margin-bottom: 1px;
}

.row.testing {
	height: 2rem;
	margin: 0;
}

.tile {
	position: relative;
	flex: 1;
	font-size: 1.5rem;
	font-weight: bold;
	border-radius: 0;
	border: none;
	height: 100%;
	padding: 0;
}

.row.normal > .tile {
	max-width: 3.5rem;
	margin: 0;
	margin-right: 1px;
}

.row.testing > .tile {
	font-size: 1rem;
	max-width: 2rem;
	margin: 0;
}

#next-previous-buttons {
	margin-top: .5rem;
	display: flex;
	column-gap: 1rem;
}

#next-previous-buttons button {
	text-decoration: underline;
	font-size: .95rem;
	position: relative;
	height: 3rem;
}

/* lines for arrows */
.filter::after, .undo::after {
	content: "";
	height: 7%;
	width: 20%;
	background: var(--text-color);
	position: absolute;
	bottom: 0;
}

.filter::after {
	right: 6%;
}

.undo::after {
	left: 6%;
}

/* triangle for arrows */
.filter::before, .undo::before {
	content: "";
	width: 0;
	height: 0;
	background: transparent;
	position: absolute;
	bottom: 0;
	border-top: solid 0.5em transparent;
	border-bottom: solid 0.5em transparent;
	bottom: -12%;
}

.filter::before {
	right: 5%;
	border-left: solid 0.5em var(--text-color);
}

.undo::before {
	left: 5%;
	border-right: solid 0.5em var(--text-color);
}

button {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--text-color);
	border: none;
	background-color: transparent;
}

select {
	border-radius: 0.125rem;
	color: var(--background);
	text-align: center;
}

#refresh {
	position: relative;
	top: 2.5em;
	right: 9em;
	/* height: 1em; */
	/* width: 2em; */
}

#reset-answer {
	position: relative;
	top: 1.75em;
	right: 9em;
	/* height: 1em; */
	/* width: 2em; */
}

.header-button {
	position: absolute;
	z-index: 100;
	font-size: 1.25rem;
	text-align: center;

	padding: 0;
	bottom: 0;
}

.info {
	left: .5rem;
}

.test {
	right: .5rem;
}

.header-button.settings {
	left: 3rem;
}

button:not(.tile):hover, select:hover {
	filter: brightness(90%);
}

button:hover, .tile:hover, .increment:hover {
	cursor: pointer;
}

#word-entered {
	background-color: transparent;
	caret-color: white;
	border: none;
	border-bottom: solid 2px var(--correct-color);
	border-radius: none;
	color: var(--text-color);
	height: 2rem;
	font-size: 1.2rem;
	width: min(95%, 12rem);
	text-align: center;
	margin: .5rem;
	padding: 0;
	font-weight: bold;
}

#word-entered::placeholder {
	color: var(--text-color);
	font-weight: normal;
}

#word-entered:focus::placeholder {
	color: transparent;
}

#word-known-answer {
	background-color: transparent;
	caret-color: white;
	border: none;
	border-bottom: solid 2px var(--correct-color);
	border-radius: none;
	color: var(--text-color);
	height: 2rem;
	font-size: 1.2rem;
	width: min(95%, 12rem);
	text-align: center;
	/* margin: .5rem; */
	padding: 0;
	font-weight: bold;
}

#word-known-answer::placeholder {
	color: var(--text-color);
	font-weight: normal;
}

#word-known-answer:focus::placeholder {
	color: transparent;
}

*:focus {
	outline: none;
}

/* HEADING & TITLE */
/* INCLUDES TITLE @ TOP OF PAGE AND LETTER COUNT SELECTOR */
#top-of-screen {
	font-variant-caps: small-caps;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin: 0.25rem;
	margin-top: 0.5rem;
}

#top-of-screen h1, h3 {
	margin: 0;
	padding: 0;
	font-size: 1.75rem;
}

#top-of-screen button {
	height: 2rem;
}

.screen {
	width: min(630px, 95%);
	margin: auto;
	position: absolute;
	overflow: hidden;
	overflow-y: scroll;
	height: 100%;
	text-align: center;
	background: var(--off-white);
	box-shadow: var(--gray-color) 0 0 0 1px;
	z-index: 100;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-left: .5rem;
	padding-right: .5rem;
	max-height: 0;
	color: var(--background);
}

.screen p:not(.description) {
	margin: .75rem;
}

.screen .close {
	color: var(--background);
}

.mini-header {
	font-size: 1.5rem;
	border-bottom: solid 1px black;
	width: 90%;
	text-align: center;
	margin-top: 1rem;
}

.description {
	margin-top: 0;
	font-size: .8rem;
	color: var(--incorrect-color);
}

.info .description {
	width: 85%;
}

.top-header {
	text-align: center;
	margin-top: 1rem;
	border-bottom: solid 1px black;
	width: 90%;
}

.mini {
	font-size: .875rem;
	text-align: left;
	border-bottom: solid 1px black;
}

.hide {
	animation: hide .4s forwards;
}

.display {
	animation: display .7s forwards;
}

.test.dummy {
   display: inline;
   color: var(--background);
}

.row.dummy {
	margin-top: .5rem;
}

.row.dummy > .tile {
	font-size: 1.5rem;
	max-width: 3.5rem;
	margin: 1px;
	aspect-ratio: 1;
}

.word-list.dummy {
	position: relative;
	width: 85%;
}

.examples {
	position: relative;
	width: 85%;
}

@keyframes hide {
	from {
		max-height: 200%;
	}

	to {
		max-height: 0;
	}
}

@keyframes display {
	from {
		max-height: 0;
	}

	to {
		max-height: 200%;
	}
}


/* ANSWERS */
/* CONTAINS ALL INFO SHOWN IN SUGGESTION BOX */
/* LIST OF BEST ANSWERS, NUMBER OF WORDS LEFT, REFRESH BUTTON */
#suggestions {
	position: relative;
	text-align: center;
	width: 100%;
	margin-top: 1rem;
	/* max-height: 450rem; */
	border: solid 2px var(--gray-color);
	padding-top: 1rem;
	background-color: rgb(39 39 39);
}

.possibilities.total {
	text-align: center;
	margin: 0;
}

.possibilities.separated {
	font-size: .75rem;
	text-align: center;
}

.showlist {
	position: relative;
	text-decoration: underline;
}

.showlist:hover {
	cursor: pointer;
}

.showlist div {
	display: inline-block;
	position: absolute;
	width: 100%;
	font-size: .75rem;
	top: 1rem;
	overflow-y: scroll;
	max-height: 350px;
	color: var(--background);
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.showlist div:not(.showlist div.visible) {
	height: 0;
	width: 0;
	overflow: hidden;
}

.visible {
	background: var(--off-white);
	color: var(--text-color);
	border: 1px solid black;
	z-index: 100;
}

.visible p {
	/* margin-top: .5rem;
	margin-bottom: .5rem; */
	margin: 0;
}

.label {
	display: inline;
	vertical-align: middle;
}

#mode {
	margin: .75rem;
}

h3.mini-title {
	font-size: 1rem;
	text-align: center;
	margin-bottom: 1rem;
	margin-top: 1.5rem;
	/* text-decoration: underline; */
}

#answers {
	position: relative;
}

.best-guesses {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.back {
	z-index: -1;
	color: transparent;
	background: transparent;
	position: absolute;
	height: 0;
	width: 0;
	overflow: hidden;
}

.front {
	z-index: 99;
	color: var(--text-color);
}

.normal .word-list {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.best-guesses.hard {
	top: 0;
}

.hard > h3 {
	border-bottom: solid 1px #FCF7F8;
	width: 90%;
	font-size: 1rem;
	margin-bottom: 0.5rem;
	font-style: italic;
}

.hard > h3:first-child {
	margin-top: .5rem;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 0;
}

ul li:not(.others) {
	max-width: 100%;
	min-height: 2rem;
	flex: 1;
}

li:not(.likely, .others) {
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: pre-wrap;
}

.others {
	height: unset;
	text-align: center;
	padding: .5rem;
}

.likely {
	padding: .5rem;
	text-align: center;
	padding-bottom: 0;
}

.others, .likely {
	display: block;
}

#nowords {
	margin: 1rem;
	font-style: italic;
}


.suggestion {
	display: inline;
	left: 1rem;
	position: absolute;
}

.unguessable {
	position: relative;
	/* font-style: italic; */
}

.unguessable:before {
	position: absolute;
	content: "";
	left: 0;
	top: 50%;
	right: 0;
	border-top: 1px solid;
	border-color: inherit;

	-webkit-transform:rotate(-5deg);
	-moz-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	-o-transform:rotate(-5deg);
	transform:rotate(-5deg);
}

.likely_suggestion {
	font-weight: bold;
}

.hard_suggestion {
	/* color: rgb(255 255 95); */
	color: yellow;
}

.ultra_suggestion {
	color: rgb(127 255 127);
}

.suggestion, .score, .losingscore, .final {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.score {
	display: inline;
	position: absolute;
	right: 1rem;
	font-weight: bold;
	color: rgb(101 189 94);
}

.losingscore {
	display: inline;
	position: absolute;
	right: 1rem;
	text-decoration: underline;
	font-weight: bold;
	color: rgb(230 50 50);
}

.losingscore:hover {
	cursor: pointer;
}

.losingscore div {
	display: inline-block;
	position: absolute;
	width: 60%;
	font-size: .75rem;
	top: -.5rem;
	left: 4.5rem;
	overflow-y: scroll;
	max-height: 4rem;
	color: var(--background);
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.losingscore div:not(.losingscore div.visible) {
	height: 0;
	width: 0;
	overflow: hidden;
}

.final {
	font-weight: bold;
}

/* BOT */
/* CONTAINS ALL INFO DISPLAYED IN WORDLE BOT */
/* BAR GRAPHS, AVERAGE, SUMMARY MESSAGE, & TEST SETTINGS */
#results {
	background: rgb(18, 18, 19);
	margin: auto;
	position: absolute;
	height: 100%;
	width: min(100%, 450px);
	color: white;
	font-weight: bold;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	column-gap: 2px;
	bottom: 0;
	justify-content: center;
	z-index: -1;
}

#results.testing {
	z-index: 99;
	color: black;
}

#suggestions.testing {
	margin-top: 2rem;
	height: 450px;
}

#test-settings {
	position: absolute;
	bottom: 7rem;
	width: max(280px, 75%);
	height: 50%;
	border: solid 1px black;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	row-gap: 1.5rem;
	background: var(--off-white);
	padding: .5rem;
}

button.bot {
	color: var(--background);
	text-decoration: underline;
	font-weight: bold;
	border: solid;
}

.disclaimer {
	font-size: .875rem;
	font-weight: normal;
}

#testword {
	text-align: center;
	width:7rem;
}

label {
	display: inline-block;
}

input[type=checkbox] {
	display: inline-block;
}

.close {
	position: absolute;
	top: 0rem;
	left: 0rem;
	color: var(--text-color);
	font-size: 1.25rem;
}

.close:after {
	content: "\2716";
	display: inline-block;
}

.current {
	margin: auto;
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	top: 0;
}

.average {
	position: absolute;
	top: -1.5rem;
	color: var(--off-white);
}

.bar {
	position: relative;
	background: var(--bar-color);
	color: var(--off-white);
	box-shadow: 0 0 0 2px black;
	border-bottom: none;
	text-align: center;
	display: flex;
	justify-content: center;
	flex: 1;
}

.num-guesses {
	position: absolute;
	bottom: 0;
}

.count {
	position: absolute;
	top: -1.2rem;
}

#summary {
	font-size: 1.25rem;
	position: absolute;
	text-align: center;
	width: 85%;
	margin-top: 2.5rem;
	color: var(--off-white);
}

#wrongs {
	font-size: 1rem;
	margin: 1rem;
}

/* sliders */

.switch-toggle {
	border-radius: 100vh;
	display: inline-block;
	margin-top: .5rem;
	margin-bottom: .5rem;
	/* float: left; */
	background: #404040;
}

.switch-toggle input {
	position: absolute;
	opacity: 0;
}

.switch-toggle input + label {
	border-radius: 100vh;
	display: inline-block;
	padding: 7px;
	vertical-align: middle;
	/* float: left; */
	color: #fff;
	cursor: pointer;
}

.switch-toggle input:checked + label {
	background: green;
}

.switch {
	position: relative;
	display: inline-block;
	height: 1.375rem;
	aspect-ratio: 1.765;
	margin-top: .5rem;
	margin-bottom: .5rem;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .2s;
	transition: .2s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 76.5%;
	aspect-ratio: 1;
	left: 6.67%;
	bottom: 13%;
	background-color: white;
	-webkit-transition: .2s;
	transition: .2s;
}

input:checked + .slider {
	background-color: var(--correct-color);
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--correct-color);
}

input:checked + .slider:before {
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}

/* Rounded sliders */
.slider.round {
	border-radius: 100vh;
}

.slider.round:before {
	border-radius: 50%;
}

/* G --> CORRECT */
/* Y --> WRONG SPOT */
/* B --> INCORRECT */
.G {
	background: var(--correct-color);
}

.B {
	background: var(--incorrect-color);
}

.Y {
	background: var(--wrong-spot-color);
}

.X {
	background: transparent;
	border: solid 1px lightgray;
}

.W-Peaks:before {
	content: "";
	display: inline-block;
	position: absolute;
	border-left: .5em solid transparent;
	border-right: .5em solid transparent;
	height: 0;
	width: 0;
}

.B.W-Peaks::before {
	border-top: .4em solid white;
	bottom: .15em;
}

.Y.W-Peaks::before {
	border-bottom: .4em solid white;
	top: .15em;
}

.tracker {
	height: 100%;
	margin-left: .5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.woodle-count {
	height: 40%;
	margin: 5%;
	color: var(--off-white);
	font-weight: bold;
}

.row.testing .woodle-count {
	font-size: .6125rem;
}

.links {
	text-align: center;
	font-weight: bold;
	margin-bottom: 0;
}

.github {
	height: 35px;
}

.links:last-child {
	margin-top: 0;
}

.links a {
	color: #76bfff;
}

.substitutes {
	margin-bottom: 1rem;
}

.substitutes .suggestion {
	position: relative;
	left: unset;
}

.click:hover {
	cursor: pointer;
	filter: brightness(90%);
	text-decoration: underline;
}

#hints {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

#hints.empty {
	height: 0;
}

.multi-answer {
	margin-bottom: 1rem;
	padding: .5rem;
}

.black > span {
	color: black;
}

.green > span {
	color: green;
}

.red > span {
	color: red;
}

.orange > span {
	color: orange;
}

.puple > span {
	color: purple;
}

.brown > span {
	color: brown;
}

.gray > span {
	color: gray;
}

.blue > span {
	color: blue;
}

.extra-settings {
	margin: 0;
	padding: 0;
}

/* Polygonle */
.polygonle-grid{
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(630px, 100%);
	max-width: 100%;
	gap: 2px;
	margin-bottom: 15px;
}

.polygonle-tile {
	position: relative;
	flex: 1;
	font-size: 1.5rem;
	font-weight: bold;
	border-radius: 0;
	border: none;
	height: 100%;
	padding: 15px 0px;
	aspect-ratio: 1;
	max-width: 3.5rem;

	padding: 0;
	background-color: rgb(58, 58, 60);
}

.polygonle-filter {
	margin-bottom: 15px;
	text-decoration: underline;
	font-size: .95rem;
	position: relative;
}