body{
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
	margin:0
}
code{
	font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace
}
.App:focus,button:focus{
	outline:none
}
 body{
  background-color:white
}
.in-game-score{
	display:flex;
	justify-content:center;
	text-align:center
}
.valid-words-remaining-container{
	margin-right:20px
}
.in-game-score .score-count{
	font-size:2em;
	margin-bottom:15px
}
.show-undo-link{
	color:#00e;
	cursor:pointer;
	text-decoration:underline
}
.valid-words-remaining-count-at-row{
	left:calc(50% + 104px);
	position:absolute;
	width:60px
}
.valid-words-remaining-count-at-row.show-link-to-words-remaining{
	color:blue;
	cursor:pointer;
	text-decoration:underline
}
.letter-box{
	align-items:center;
	border:2px solid #d3d6da;
	border-radius:3px;
	display:flex;
	font-size:1.3rem;
	font-weight:700;
	height:2rem;
	justify-content:center;
	margin:2px;
	text-transform:uppercase;
	width:2rem
}
.filled-box{
	border:2px solid #000
}
.letter-row{
	display:flex
}
.letter-box-miss{
	background-color:#787c7e;
	border:2px solid #787c7e;
	color:#fff
}
.letter-box-success{
	background-color:#6aaa64;
	border:2px solid #6aaa64;
	color:#fff
}
.letter-box-partial-success{
	background-color:#c9b458;
	border:2px solid #c9b458;
	color:#fff
}
.letter-box-death{
	background-color:#ec4646;
	border:2px solid #ec4646;
	color:#fff
}
.letter-box-disqualified{
	background-color:#3c3636;
	border:2px solid #3c3636;
	color:#3c3636;
	transition:3s
}
.letter-box-win{
	animation-duration:1s;
	animation-name:Bounce
}
.letter-box[data-animation=pop]{
	animation-duration:.1s;
	animation-name:PopIn
}
@keyframes PopIn{
	0%{
		opacity:0;
		transform:scale(.8)
	}
	40%{
		opacity:1;
		transform:scale(1.1)
	}
}
.letter-box[data-animation=flip-in]{
	animation-duration:.2s;
	animation-fill-mode:forwards;
	animation-name:FlipIn;
	animation-timing-function:ease-in
}
@keyframes FlipIn{
	0%{
		transform:rotateX(0)
	}
	to{
		transform:rotateX(-90deg)
	}
}
.letter-box[data-animation=flip-out]{
	animation-duration:.2s;
	animation-fill-mode:forwards;
	animation-name:FlipOut;
	animation-timing-function:ease-in
}
@keyframes FlipOut{
	0%{
		transform:rotateX(-90deg)
	}
	to{
		transform:rotateX(0)
	}
}
.letter-box[data-animation=flip-game-over-begin]{
	animation-duration:.2s;
	animation-fill-mode:forwards;
	animation-name:FlipGameOverBegin;
	animation-timing-function:ease-in
}
@keyframes FlipGameOverBegin{
	0%{
		transform:rotateX(0)
	}
	to{
		transform:rotateX(-90deg)
	}
}
.letter-box[data-animation=flip-game-over-end]{
	animation-duration:.2s;
	animation-fill-mode:forwards;
	animation-name:FlipGameOverEnd;
	animation-timing-function:ease-in
}
@keyframes FlipGameOverEnd{
	0%{
		transform:rotateX(-90deg)
	}
	to{
		transform:rotateX(0)
	}
}
@keyframes Bounce{
	0%,20%{
		transform:translateY(0)
	}
	40%{
		transform:translateY(-30px)
	}
	50%{
		transform:translateY(5px)
	}
	60%{
		transform:translateY(-15px)
	}
	80%{
		transform:translateY(2px)
	}
	to{
		transform:translateY(0)
	}
}
#game-board,#keyboard-cont{
	align-items:center;
	display:flex;
	flex-direction:column
}
#keyboard-cont{
	margin:1rem 0
}
#keyboard-cont div{
	display:flex
}
.special-buttons{
	margin-bottom:20px;
	text-transform:none
}
.second-row{
	margin:.5rem 0
}
.keyboard-button{
	background-color:#d3d6da;
	border:2px solid #d3d6da;
	border-radius:4px;
	color:#000;
	cursor:pointer;
	font-size:1rem;
	font-weight:700;
	height:50px;
	margin:0 2px;
	padding:.5rem;
	text-transform:uppercase
}
#random-starting-word,#show-undo-results,#undo-button{
	height:40px;
	text-transform:none
}
.keyboard-button-success{
	background-color:#6aaa64;
	border:2px solid #6aaa64;
	color:#fff
}
.keyboard-button-partial-success{
	background-color:#c9b458;
	border:2px solid #c9b458;
	color:#fff
}
.keyboard-button-miss{
	background-color:#787c7e;
	border:2px solid #787c7e;
	color:#fff
}
.keyboard-button-miss .delete-icon path{
	fill:#fff
}
header{
	align-items:center;
	border-bottom:1px solid #d3d6da;
	color:#000;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	height:50px;
	justify-content:space-between;
	margin-bottom:16px;
	padding:0 16px
}
header .title{
	font-size:20px;
	font-weight:700;
	left:0;
	letter-spacing:.01em;
	line-height:100%;
	pointer-events:none;
	right:0;
	text-align:center
}
button.icon{
	background:none;
	border:none;
	cursor:pointer;
	padding:0 4px
}
#nav-button{
	padding-top:2px
}
.menu-left{
	align-items:center;
	justify-content:flex-start;
	margin:0;
	padding:0;
	width:70px
}
.menu-left,.valid-word-remaining-result{
	display:flex
}
.valid-word-remaining-list{
	font-size:1.6rem
}
.valid-word-remaining-result-letter{
	align-items:center;
	border:2px solid #d3d6da;
	border-radius:3px;
	display:flex;
	font-size:1.6rem;
	font-weight:700;
	height:2.4rem;
	justify-content:center;
	margin:2px;
	text-align:center;
	text-transform:uppercase;
	width:2.4rem
}
.valid-letter-box-miss{
	background-color:#787c7e;
	border:2px solid #787c7e;
	color:#fff
}
.valid-letter-box-success{
	background-color:#6aaa64;
	border:2px solid #6aaa64;
	color:#fff
}
.valid-letter-box-partial-success{
	background-color:#c9b458;
	border:2px solid #c9b458;
	color:#fff
}
.close-icon{
	cursor:pointer
}
.container{
	align-items:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding-top:16px
}
.container h1{
	font-size:16px;
	font-weight:700;
	letter-spacing:.5px;
	margin-bottom:10px;
	text-align:center;
	text-transform:uppercase
}
#statistics1,#statistics2{
	display:flex;
	margin-bottom:30px
}
#guess-distribution{
	width:80%
}
.statistic-container{
	flex:1 1;
	margin-left:12px
}
.statistic-container .statistic{
	font-feature-settings:"pnum";
	font-size:36px;
	font-variant-numeric:proportional-nums;
	font-weight:400;
	letter-spacing:.05em
}
.statistic-container .label,.statistic-container .statistic{
	align-items:center;
	display:flex;
	justify-content:center;
	text-align:center
}
.statistic-container .label{
	font-size:12px
}
.graph-container{
	align-items:center;
	display:flex;
	font-size:14px;
	height:20px;
	line-height:20px;
	padding-bottom:12px;
	width:100%
}
.graph-container .guess{
	text-align:right;
	width:100px
}
.graph-container .graph{
	height:100%;
	padding-left:4px;
	width:100%
}
.graph-container .graph .num-guesses{
	color:#fff;
	font-weight:700
}
.graph-container .graph .graph-bar{
	background-color:gray;
	display:flex;
	height:100%;
	justify-content:center;
	position:relative;
	width:0
}
.graph-container .graph .graph-bar.align-right{
	justify-content:flex-end;
	padding-right:8px
}
.graph-container .graph .graph-bar.highlight{
	background-color:#6aaa64
}
.footer{
	display:flex;
	width:100%
}
.countdown{
	border-right:1px solid #000;
	padding-right:12px;
	width:50%
}
.statistic.timer{
	font-feature-settings:normal;
	font-variant-numeric:normal
}
.share{
	padding-left:12px;
	width:50%
}
.share,button#share-button{
	align-items:center;
	display:flex;
	justify-content:center
}
button#share-button{
	-webkit-tap-highlight-color:rgba(0,0,0,.3);
	background-color:#6aaa64;
	border:none;
	border-radius:4px;
	color:#fff;
	cursor:pointer;
	-webkit-filter:brightness(100%);
	font-family:inherit;
	font-size:20px;
	font-weight:700;
	height:52px;
	text-transform:uppercase;
	-webkit-user-select:none;
	user-select:none;
	width:80%
}
button#share-button game-icon{
	height:24px;
	padding-left:8px;
	width:24px
}
.InfoModal game-icon{
	cursor:pointer;
	position:fixed;
	-webkit-user-select:none;
	user-select:none
}
.overlay{
	align-items:center;
	background-color:#ffffff80;
	display:none;
	height:100%;
	justify-content:center;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:3000
}
.overlay[modal-state=visible]{
	display:flex
}
.content{
	animation:SlideIn .2s;
	background-color:#fff;
	border:1px solid #f6f7f8;
	border-radius:8px;
	box-shadow:0 4px 23px 0 #0003;
	box-sizing:border-box;
	color:#000;
	max-height:90%;
	max-width:500px;
	overflow-y:auto;
	padding:16px;
	position:relative;
	width:90%
}
.content.closing{
	animation:SlideOut .2s
}
.CheatModal game-icon{
	cursor:pointer;
	position:fixed;
	-webkit-user-select:none;
	user-select:none
}
@keyframes SlideIn{
	0%{
		opacity:0;
		transform:translateY(30px)
	}
	to{
		opacity:1;
		transform:translateY(0)
	}
}
@keyframes SlideOut{
	0%{
		opacity:1;
		transform:translateY(0)
	}
	90%{
		opacity:0
	}
	to{
		opacity:0;
		transform:translateY(60px)
	}
}
.undo-word-result{
	display:flex
}
.undo-word-list{
	font-size:1.6rem
}
.undo-word-result-letter{
	align-items:center;
	border:2px solid #d3d6da;
	border-radius:3px;
	display:flex;
	font-size:1.6rem;
	font-weight:700;
	height:2.4rem;
	justify-content:center;
	margin:2px;
	text-align:center;
	text-transform:uppercase;
	width:2.4rem
}
.undo-letter-box-miss{
	background-color:#787c7e;
	border:2px solid #787c7e;
	color:#fff
}
.undo-letter-box-success{
	background-color:#6aaa64;
	border:2px solid #6aaa64;
	color:#fff
}
.undo-letter-box-partial-success{
	background-color:#c9b458;
	border:2px solid #c9b458;
	color:#fff
}
.settings-overlay{
	align-items:center;
	background-color:#fff;
	display:none;
	height:100%;
	justify-content:center;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:3000
}
.settings-overlay[modal-state=visible]{
	display:flex
}
.settings-overlay-content{
	animation:SettingsSlideIn .2s;
	background-color:#fff;
	color:#000;
	display:flex;
	flex-direction:column;
	height:100%;
	max-width:400px;
	overflow-y:auto;
	padding:0 32px;
	position:relative;
	width:100%
}
.close-icon{
	height:24px;
	position:absolute;
	right:16px;
	top:16px;
	width:24px
}
@keyframes SettingsSlideIn{
	0%{
		opacity:0;
		transform:translateY(30px)
	}
	to{
		opacity:1;
		transform:translateY(0)
	}
}
.setting{
	align-items:center;
	border-bottom:1px solid #d3d6da;
	display:flex;
	justify-content:space-between;
	padding:16px 0
}
.text{
	padding-right:8px
}
.title{
	font-size:18px
}
.description{
	color:#080909;
	font-size:12px
}
.switch{
	background:#878a8c;
	border-radius:999px;
	display:block;
	height:20px;
	position:relative;
	vertical-align:middle;
	width:32px
}
.knob{
	background:#fff;
	border-radius:8px;
	display:block;
	height:calc(100% - 4px);
	left:2px;
	position:absolute;
	top:2px;
	transform:translateX(0);
	transition:transform .3s;
	width:50%
}
game-switch[checked=true] .switch{
	background:#6aaa64
}
game-switch[checked=true] .knob{
	transform:translateX(calc(100% - 4px))
}
game-switch[disabled=true] .switch{
	opacity:.5
}
.game-over-section{
	animation:fadeIn 3s;
	margin-top:20px
}
@keyframes fadeIn{
	0%{
		opacity:0
	}
	to{
		opacity:1
	}
}
.game-over-message{
	font-weight:700;
	margin:0 auto 10px;
	text-align:center
}
.share-button-container{
	align-items:center;
	display:flex;
	justify-content:center;
	padding-left:12px
}
button#share-button-home-page{
	background-color:#6aaa64;
	border:none;
	color:#fff
}
button#stats-button-home-page{
	background-color:#787c7e;
	border:none;
	color:#fff
}
button#share-button-home-page,button#stats-button-home-page{
	-webkit-tap-highlight-color:rgba(0,0,0,.3);
	align-items:center;
	border-radius:4px;
	cursor:pointer;
	display:flex;
	-webkit-filter:brightness(100%);
	font-family:inherit;
	font-size:15px;
	font-weight:700;
	height:40px;
	justify-content:center;
	margin:5px;
	text-transform:uppercase;
	-webkit-user-select:none;
	user-select:none;
	width:100px
}
button#share-button-home-page game-icon,button#stats-button-home-page game-icon{
	height:24px;
	padding-left:8px;
	width:24px
}
#game-toaster{
	z-index:4000
}
.toaster{
	left:50%;
	max-width:400px;
	pointer-events:none;
	position:absolute;
	top:124px;
	transform:translate(-50%);
	width:fit-content
}
.toast{
	background-color:#000;
	border:none;
	border-radius:4px;
	color:#fff;
	font-weight:700;
	margin:16px;
	opacity:1;
	padding:16px;
	position:relative
}
.fade[toastpurpose=survived]{
	opacity:0;
	transition:opacity 1.5s cubic-bezier(.645,.045,.355,1);
	transition-delay:2s
}
.fade[toastpurpose=gameover]{
	opacity:0;
	transition:opacity 1.5s cubic-bezier(.645,.045,.355,1);
	transition-delay:1s
}
.fade[toastpurpose=tempeliminated]{
	opacity:0;
	transition:opacity 1.5s cubic-bezier(.645,.045,.355,1);
	transition-delay:3.5s
}
.fade[toastpurpose=eliminated]{
	opacity:0;
	transition:opacity 1.5s cubic-bezier(.645,.045,.355,1);
	transition-delay:3s
}
.fade[toastpurpose=error]{
	opacity:0;
	transition:opacity 2.5s cubic-bezier(.645,.045,.355,1)
}
.app-footer{
	align-items:center;
	border-top:1px solid #d3d6da;
	color:#787c7e;
	display:flex;
	flex-wrap:wrap;
	font-size:13px;
	gap:0;
	justify-content:center;
	line-height:1.8;
	margin-top:24px;
	padding:16px;
	text-align:center
}
.app-footer a{
	color:#787c7e;
	text-decoration:none
}
.app-footer a:hover{
	text-decoration:underline
}
.app-footer-sep{
	margin:0 6px;
	-webkit-user-select:none;
	user-select:none
}
.page-layout{
	background-color:#fff;
	color:#1a1a1a;
	min-height:100vh
}
.page-header{
	border-bottom:1px solid #d3d6da;
	padding:16px 24px
}
.page-back-link{
	color:#1a1a1a;
	font-size:14px;
	text-decoration:none
}
.page-back-link:hover{
	text-decoration:underline
}
.page-content{
	margin:0 auto;
	max-width:720px;
	padding:32px 24px
}
.page-content h1{
	font-size:28px;
	margin:0 0 24px
}
.page-body{
  background-color:white;
	font-size:16px;
	line-height:1.6
}
.page-body p{
	margin:0 0 1em
}
.page-body p:last-child{
	margin-bottom:0
}
.page-body ol,.page-body ul{
	margin:0 0 1em;
	padding-left:1.5em
}
.page-body h2{
	font-size:20px;
	margin:1.5em 0 .5em
}
.page-body h2:first-child{
	margin-top:0
}
.page-body h3{
	font-size:18px;
	margin:1.25em 0 .5em
}
.page-body a{
	color:#1967d2
}
.home-intro{
	border-top:1px solid #d3d6da
}
.home-intro .page-content{
	padding-bottom:16px;
	padding-top:24px
}
.home-intro .page-content h1{
	text-align:center
}
.how-to-play-page{
	background-color:#fff;
	color:#1a1a1a;
	min-height:100vh
}
.how-to-play-header{
	border-bottom:1px solid #d3d6da;
	padding:16px 24px
}
.how-to-play-back-link{
	color:#1a1a1a;
	font-size:14px;
	text-decoration:none
}
.how-to-play-back-link:hover{
	text-decoration:underline
}
.how-to-play-content{
	margin:0 auto;
	max-width:720px;
	padding:32px 24px
}
.how-to-play-content h1{
	font-size:28px;
	margin:0 0 24px
}
.how-to-play-body{
	font-size:16px;
	line-height:1.6
}
.how-to-play-body p{
	margin:0 0 1em
}
.how-to-play-body p:last-child{
	margin-bottom:0
}
.how-to-play-body ol{
	margin:0 0 1em;
	padding-left:1.5em
}
.how-to-play-body a{
	color:#1967d2
}
/*# sourceMappingURL=main.1051bf8d.css.map*/
