:root {
	--background-color: rgb(255, 255, 255);
	--background-color-transparent: rgba(255, 255, 255,0);
	--button-color: rgb(211, 214, 218);
	--border: rgb(211, 214, 218);
	--border-highlight: rgb(135, 138, 140);
	--text-color: rgb(26, 26, 27);;
	--filled-text-color: rgb(255, 255, 255);
	--bar-color: rgb(120, 124, 126);

	--correct-color: rgb(106, 170, 100);
	--misplaced-color: rgb(201, 180, 88);
	--wrong-color: rgb(120, 124, 126);
	font-family: 'Lato', sans-serif;

	font-size: .6vw;

}
@media (max-width: 600px) {
	:root {
		font-size: 1.7vw;
	}
}


@media (prefers-color-scheme: dark) {
	:root {
		--background-color: rgb(18, 18, 19);
		--background-color-transparent: rgba(18, 18, 19,0);
		--button-color: rgb(129, 131, 132);
		--border: rgb(58, 58, 60);
		--border-highlight: rgb(86, 87, 88);
		--bar-color: rgb(58, 58, 60);
		--text-color: rgb(215, 218, 220);
		--filled-text-color: rgb(215, 218, 220);


		--correct-color: rgb(83, 141, 78);
		--misplaced-color: rgb(181, 159, 59);
		--wrong-color: rgb(58, 58, 60);
	}
}


* {
	margin: 0;
	padding: 0;
}

body {
	padding-top: 1vw;
	background: var(--background-color);
}
.word-row,.keyboard-row {
	display: flex;
	justify-content: center;
	width: 100%;
}

.letter-box {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 4rem;
	font-weight: bold;
	width: max(7vh,5vw);
	height: max(7vh,5vw);
	/*background: black;*/
	border: 4px var(--border) solid;
	margin: 3.5px;
	border-radius: 1px;
	color: var(--text-color);
}
.word-guess {
	width: 90vw;
	margin: 150px auto;
	margin-top: 3rem;
}
@media (max-width: 600px) {
	.word-guess {
		margin-top: 5vh;
	}
}


.keyboard {
	margin: 5vh auto;
	margin-bottom: 2vh;
	width: 95vw;
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	touch-action: manipulation;
}
.keyboard-button,.keyboard-button-2 {
	margin: 5px;
	width: 3vw;
	height: 4vw;
	border-radius: 10%;
	background: var(--button-color);
	border:none;
	color: var(--text-color);
	fill: var(--text-color);
	transition: .1s;
	font-weight:bold;
	font-size: 2.3rem;
}
.keyboard-button-2 {
	width: 5vw;
	height: 4vw;
	font-size: 1.75rem;
}
@media (max-width: 600px) {
	.keyboard-button {
		margin: 3px;
		width: 8vw;
		height: 12vw;
	}
	.keyboard-button-2 {
		margin: 3px;
		width: 13vw;
		height: 12vw;
	}
}
.backspace {
	font-size: 1.5rem;
}

.keyboard-button:active,.keyboard-button-2:active {
	transform: scale(.95);
}

@keyframes flip {
	0% {
		background: none;
		border: 3px var(--border) solid;
		transform: scaleY(1);
	}
	50% {
		background: none;
		border: 3px var(--border) solid;
		transform: scaleY(0);
	}
	100% {
		transform: scaleY(1);
	}
}

.letter-box.animate0 {
	animation-delay: 0s;
}
.letter-box.animate1 {
	animation-delay: .1s;
}
.letter-box.animate2 {
	animation-delay: .2s;
}
.letter-box.animate3 {
	animation-delay: .3s;
}
.letter-box.animate4 {
	animation-delay: .4s;
}
.letter-box.animate5 {
	animation-delay: .5s;
}
.letter-box.animate0,.letter-box.animate1,.letter-box.animate2,.letter-box.animate3,.letter-box.animate4,.letter-box.animate5 {
	animation-name: flip;
	animation-duration: .5s;
	animation-iteration-count: 1;
	animation-direction: forwards;
	animation-fill-mode: backwards;
}


.modal {
  opacity:0;
  display: block;
  position: fixed; 
  z-index: -1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  justify-content: center;
  align-items: center;
  transition: background-color .3s;
}

.modal-content {

  background-color: var(--background-color);
  margin: 15% auto;
  padding: 20px;
  padding-bottom: 10vh;
  width: 30vw;
  position:relative;
  transform: translateY(10vh);
  transition: .5s;
}
.modal.show {
	opacity:1;
	 z-index: 105;
}
.modal.show .modal-content {
	transform: translateY(-10vh);
	width:40vw;
}
.modal.docked {
	background-color: var(--background-color-transparent);
}
.modal.docked .modal-content {
	transform: translate(67vw,-10vh);
}
@media (max-width: 600px) {
	.modal-content {
		transform: translateY(15vh);
	}
	.modal.show .modal-content {
		transform: translateY(5vh);
	}
	.modal.docked .modal-content {
		transform: translate(90vw,5vh);
	}
}
@media (max-height: 600px) {
	.modal-content {
		transform: translateY(15vh);
	}
	.modal.show .modal-content {
		transform: translateY(-5vh);
	}
	.modal.docked .modal-content {
		transform: translate(90vw,-5vh);
	}
}

.close {
	position: absolute;
  color: var(--button-color);
  left: 10px;
  top: calc(50% - 2rem);
  font-size: 4rem;
  font-weight: bold;
  transform: translateY(-10px);
  transition: .1s;
}
.modal.docked .close {
	transform: translateY(-10px) rotateY(180deg);
}

.close:hover,
.close:focus {
  color: var(--border);
  text-decoration: none;
  cursor: pointer;
}
#modal-content-inner {
	display: flex;
	align-items: center;
	flex-direction: column;
	height: 50vh;
}

#end-modal-title,#end-modal-title-h,#end-modal-statistics-h {
	color: var(--text-color);
	font-size: 4rem;
	font-weight: normal;
	display: flex;
	justify-content: center;
	width: 100%;
}
#end-modal-title-h,#end-modal-statistics-h {
	font-weight: bold;
	font-size: 2rem;
}
#end-modal-statistics-h {
	margin-top: 20px;
}


#end-modal-restart,#end-modal-share
 {
	color: var(--text-color);
	border: 2px solid var(--text-color);
	font-size: 2.5rem;
	font-weight: bold;
	padding: 7px 20px;
	background: none;
	transition: .1s;
	transform: scale(1);
	margin-right: 15px;
	text-align: center;
}
.buttons {
	width: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 15px;
}

#end-modal-restart:hover,#end-modal-share:hover {
	background: var(--text-color);
	color: var(--background-color);
	cursor: pointer;
}
#end-modal-restart:active,#end-modal-share:active {
	transform: scale(.95);
	cursor: pointer;
}

#end-modal-stat-box {
	width: 100%;
	color: var(--text-color);
	display: flex;
	justify-content: center;
}
.stat-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 5px 10px;
}
.stat-data {
	font-size: 6rem;
}
.stat-name {
	font-size: 1.7rem;
	text-align: center;
}


.end-modal-stat-graph {
	margin-top: 20px;
	width: 80%;
	color: var(--text-color);
	font-size: 1.8rem;
}
.stat-graph-bar {
	width: 100%;
	display: block;
	margin-bottom: 10px;
}
.stat-graph-label {
	margin-right: 4px;

}
.bar {
	background: var(--bar-color);
	font-weight: bold;
	padding: 2px 6px;
	text-align: right;
	color: var(--filled-text-color);
}

@media (max-width: 600px) {
	.modal.show .modal-content {
		width:80vw;
	}
	#modal-content-inner {
		height: 48vh;
	}
	#end-modal-title,#end-modal-title-h,#end-modal-statistics-h {
		font-size: 5rem;
	}
	#end-modal-title-h,#end-modal-statistics-h {
		font-size: 2.5rem;
	}
	#end-modal-statistics-h {
		margin-top: 20px;
	}
	#end-modal-restart {
		font-size: 2.5rem;
		padding: 7px 20px;
		bottom: 15px;
	}
	.stat-stack {
		margin: 5px 10px;
	}
	.stat-data {
		font-size: 6rem;
	}
	.stat-name {
		font-size: 1.7rem;
	}
	.end-modal-stat-graph {
		margin-top: 20px;
		font-size: 2.1rem;
	}
	.stat-graph-bar {
		margin-bottom: 10px;
	}
	.stat-graph-label {
		margin-right: 4px;
	}
	.bar {
		padding: 2px 6px;
	}
}
@media (max-height: 670px) {
	#modal-content-inner {
		height: 52vh;
	}
}
@media (max-height: 577px) {
	#modal-content-inner {
		height: 67vh;
	}
}


@keyframes pop {
	0% {
		transform: scale(1);
	}
	10% {
		transform: scale(1.1);
		border-color: var(--border-highlight);
	}
	100% {
		transform: scale(1);
	}
}

.typed {
	border-color: var(--border-highlight);
	animation: pop .3s 1 forwards;
}

.wrong {
	background: var(--wrong-color);
	border-color: var(--wrong-color);
	color: var(--filled-text-color);
}
.misplaced {
	background: var(--misplaced-color);
	border-color: var(--misplaced-color);
	color: var(--filled-text-color);
}
.correct {
	background: var(--correct-color);
	border-color: var(--correct-color);
	color: var(--filled-text-color);
}




.stats-button {
	position: absolute;
	/*background: var(--border);*/
	top: -1rem;
	height: 7rem;
	width: 7rem;
	right: calc(50% - 3.5rem);
	display: flex;
	justify-content: center;
	align-items: center;
	border: radius;
	border-radius: 0% 50% 50% 0%;
	stroke: var(--border);
	stroke-width: 2.5px;
	fill: none;
	z-index: 110;
	 /*fill:var(--text-color);*/
	 /*transform: rotate(90deg);*/
	 transition: transform .1s;
}
.stats-button:hover {
	transform: scale(1.05);
	cursor:pointer;
}
.stats-button:active {
	transform: scale(.95);
}

@media (max-width: 600px) {
	.stats-button {
		top: -.3rem;
	}
}

.stats-button svg { height:3.5rem; }