body
{
  	font-family: "Space Mono", monospace;
	padding: 4vw;
	box-sizing: border-box;
	background: #f2f2ef;
	color: #252523;
	font-size: 4vw;
	text-align: center;
	font-variant-ligatures: no-common-ligatures;
	overflow: hidden;
}

h1
{
	font-size: 1.6em;
	line-height: 1.3em;
	font-weight: bold;
	color: #1482ff;
	margin-top: 0;
}

h2
{
	font-size: 1.1em;
	line-height: 1.4em;
	font-weight: 100;
}

.blue
{
	color: #1482ff;
}

.red
{
	color: #fd8d80;
}

.bold
{
	font-weight: bold;
}

.spaced
{
	letter-spacing: .35em;
}


#rotateMe
{
	display:  none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 999;
	background: #1482ff;
	color: #f2f2ef;
	
	display: grid;
	place-items: center;
}

#rotateInstructions
{
	text-align: center;
	display:inline-block;
	
	font-size: 3.5vh;
}

#editOptions
{
	margin: 1em 0 1em 0;
}


.modalBG
{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	z-index: 500;
	background: rgba(20, 130, 255, 0.8);
	
	padding-top: 3em;
	
	place-items: center;
		
	z-index: 500;
}

#instructions
{
	position: relative;
	width: calc(100vw - 8vw);
		
	z-index: 999;
	background: #f2f2ef;
	color: #252523;
	
	
	text-align: left;
	padding: 1.25em 1.5em;
	box-sizing: border-box;
	display:inline-block;
	
	font-size: 1em;
	
	border-radius: 10px;
	
	margin-bottom: 10vh;
	
	height: 32em;
	
	overflow-y: scroll;
	
}

#instructionsBG
{
	transition: all .25s;
}


#instructions hr
{
	border-bottom: 1px solid #cbcbc5;
	margin: 1.5em 0em 1.5em 0em;
	width: auto;
}

#instructions li
{
	font-size: .85em;
	margin-left: -.5em;
	width: calc(100%-.5em)
}

.modalIntro
{
	animation-name: modalIntro;
	animation-duration: .25s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;

}

@keyframes modalIntro {
  from {top: 5em; opacity: 0;}
  to {top: 0em; opacity: 1;}
}


.hideAnimation
{
	animation-name: hideAnimation;
	animation-duration: .25s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}

.showAnimation
{
	animation-name: showAnimation;
	animation-duration: .25s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}


@keyframes hideAnimation {
  from {margin-bottom: 10vh; opacity: 1; }
  to {margin-bottom: 5vh; opacity: 0; display: none; pointer-events: none;}
}

@keyframes showAnimation 
{
  	from {opacity: 0; pointer-events: none;}
    to {opacity: 1; }
}

.hide
{
	display: none !important;
}

.instructionExampleLetters
{
	color: #1482ff;
	font-weight: 600;
	display:inline-block;
	box-sizing: border-box;
	
	font-size: 1.5em;
	min-width: 1.5em;
	
	height: 1.65em;
	margin: 0em -.12em;
	text-align: center;
	vertical-align: top;

	border: .085em solid #82cefd;
	box-shadow: 0px .085em 0px #82cefd;
	border-radius: 5px;
	
	margin-bottom: 1em;
}

.instructionsSelectedLetter1
{
	animation: selectLetterAnimation1 3s infinite;
}

.instructionsSelectedLetter2
{
	animation: selectLetterAnimation2 3s infinite;
}

.instructionsSelectedLetter3
{
	animation: selectLetterAnimation3 3s infinite;
}

@keyframes selectLetterAnimation1 {
  	
	from { border-color: #82cefd; box-shadow: 0px .085em 0px #82cefd; background: rgba(128, 205, 253, 0); }
	9.99% { border-color: #82cefd; box-shadow: 0px .085em 0px #82cefd; background: rgba(128, 205, 253, 0); }
	10% { border-color: #1482ff; box-shadow: 0px .085em 0px #1482ff; background: #82cefd; }
	to { border-color: #1482ff; box-shadow: 0px .085em 0px #1482ff; background: #82cefd; }
  
}

@keyframes selectLetterAnimation2 {
  	
	from { border-color: #82cefd; box-shadow: 0px .085em 0px #82cefd; background: rgba(128, 205, 253, 0); }
	19.99% { border-color: #82cefd; box-shadow: 0px .085em 0px #82cefd; background: rgba(128, 205, 253, 0); }
	20% { border-color: #1482ff; box-shadow: 0px .085em 0px #1482ff; background: #82cefd; }
	to { border-color: #1482ff; box-shadow: 0px .085em 0px #1482ff; background: #82cefd; }
  
}

@keyframes selectLetterAnimation3 {
  	
	from { border-color: #82cefd; box-shadow: 0px .085em 0px #82cefd; background: rgba(128, 205, 253, 0); }
	29.99% { border-color: #82cefd; box-shadow: 0px .085em 0px #82cefd; background: rgba(128, 205, 253, 0); }
	30% { border-color: #1482ff; box-shadow: 0px .085em 0px #1482ff; background: #82cefd; }
	to { border-color: #1482ff; box-shadow: 0px .085em 0px #1482ff; background: #82cefd; }
  
}


.instructionExampleBankLetters
{
	color: #999995;
	display:inline-block;
	box-sizing: border-box;
	
	font-size: 1.5em;
	min-width: 1.5em;
	
	height: 1.65em;
	margin: -.4vw -.12em -.2vw -.12em;
	text-align: center;
	vertical-align: top;
}

#examplePuzzle
{
	margin: 1.8em 0 .8em 0;
	text-align: center;
}

.close
{
	position: absolute;
	
	bottom: 5.5em;
	
	height: 1.5em;	
	width: 100%;
	
	background: url('close.svg');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	
	opacity: 1;
}


.logo
{
	width: 50px;
	height: 30px;
	background: url('wordist.svg');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

.navLogo
{
	display: inline-block;
	margin-top: 7px;
}

#navbar
{
	position: fixed;
	height: 65px;
	padding: 10px 14px 14px 14px;
	box-sizing: border-box;
	font-size: 22px;
	font-weight: bold;
	color: #f2f2ef;
	background: #1482ff;
	text-align: left;
	z-index: 10;
	width: 100%;
	top: 0px;
	left: 0px;
}


#dayOfWeek
{
	position: absolute;
	vertical-align: middle;
	top: 2px;
	width: 100%;
	margin-left: -14px;
	color: #82cefd;
	line-height: 65px;
	height: 65px;
	text-align: center;
	z-index: -1;
}

#dayOfWeek p {
  line-height: 16px;
  display: inline-block;
  vertical-align: middle;
  font-weight: 100;
  font-size: 15px;
}

.ist
{
	color: #94d4fb;
}

#subtitle
{
	position: absolute;
	font-size: 14px;
	font-weight: 100;
	width: 50vw;
	margin-left: 25vw;
	height: 65px;
	top: 22px;
	text-align: center;
	line-height: 16px;
}

.icon
{
	width: 32px;
	height: 30px;
	top: 17px;
	background-position: center center;
}

#showStats
{
	position: absolute;	
	right: .5em;
	background: url('stats.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

#showInstructions
{
	position: absolute;
	right: 2.25em;
	background: url('Instructions.svg');
	background-size: contain;
	background-repeat: no-repeat;
}


#game
{
	user-select: none;
	width: 100%;
	height: auto;
	padding: 1em 0;
	text-align: center;
	margin-bottom: 20px;
	margin-top: 65px;
}

.hr
{
	border-bottom: 2px solid #cbcbc5;
	width: calc(100% + 8vw);
	margin-left: -4vw;
	margin-bottom: 35px;
}

hr
{
	border-bottom: 2px solid #cbcbc5;
	width: calc(100% + 8vw);
	margin-left: -4vw;
	margin-bottom: 1.25em;
}

#submission
{
	margin-top: 25px;
	display:inline-block;
	font-size: 1.35em;
	color: #1482ff;
	box-sizing: border-box;
	text-transform: uppercase;
	min-height: 1.5em;
	padding: 0 .05em;
	vertical-align: top;
	border-right: 2px solid #1482ff;
	border-right: 2px solid rgba(20, 130, 255, 0);
	
	border-left: 2px solid rgba(20, 130, 255, 0);
	
	animation: blink-animation 1s steps(2, start) infinite;
    -webkit-animation: blink-animation 1s steps(2, start) infinite;
}



@keyframes blink-animation {
  from {
	border-right: 2px solid #cbcbc5;
	border-left: 2px solid rgba(20, 130, 255, 0);
  }
  
  to {
	border-right: 2px solid rgba(204, 204, 199, 0);
	border-left: 2px solid rgba(20, 130, 255, 0);
  }
}

@-webkit-keyframes blink-animation {
 from {
	border-right: 2px solid #cbcbc5;
	border-left: 2px solid rgba(20, 130, 255, 0);
  }

  to {
	border-right: 2px solid rgba(204, 204, 199, 0);
	border-right: 2px solid rgba(20, 130, 255, 0);
  }
}


#submissionValue
{
	color: #999995;
	font-size: .85em;
	margin: -.4em 0 .5em 0;
	transition: all .1s;
}


.opacityZero
{
	opacity: 0;
}

#gameover
{
	margin-top: 1em;
	margin-bottom: 0em;
	display: none;
	animation: gameover-animation .3525s ease-out forwards;
    -webkit-animation: gameover-animation .325s ease-out forwards;
}

#gameoverSubSubtitle
{
	color: #999995;
	font-size: .8em;
	margin-top: .4em;
	margin-bottom: -1.4em;
}

@keyframes gameover-animation
{ 
	from
	{
		margin-top: 4em; 
		margin-bottom: -4em;
		opacity:0
	}
		
	to
	{
		opacity: 1
	}
	
}

#gameoverTitle
{
	font-size: 1.5em;
	font-weight: bold;
	color: #1482ff;
}


#errorHolder
{	
	display: grid;
	position: absolute;
	
	place-items: center;
	
	width: 100vw;
	background: red;
	
	left: 0;
	margin-top: 1.15em;
}

#errorText
{
	text-align: center;
	
	display: inline-block;
	
	position: absolute;
	
	background: #fd8d80;
	color: #252523;
	
	border-radius: 999px;
			
	font-size: 1em;
	
	padding: .55em 1.1em .5em 1.1em;
	
	box-sizing: border-box;
	
	pointer-events: none;
	
	opacity: 0;
	
}

.fadeIn
{
	animation: fadeIn .25s;
	animation-fill-mode: forwards;
}

.fadeOut
{
	animation: fadeOut .25s;
	animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}



#letters
{
	width: 100%;
}

.shakeLetter
{
	animation: shake-animation .15s ease-in-out forwards;
    -webkit-animation: shake-animation .15s ease-in-out forwards;
}


@keyframes shake-animation
{ 
	
	25%
	{
		margin-left: -.5em; 
		margin-left: .5em; 
	}
		
	75%
	{
		margin-left: .5em; 
		margin-left: -.5em; 
	}
	
}


#availableLetters
{
	color: #1482ff;
	font-weight: 600;
	display:inline-block;
	margin-top: .5em;
	box-sizing: border-box;
	min-width: 100px;
}


.noPointerEvents
{
	pointer-events: none;
}

.letterBlock
{
	display: inline-block;
	font-size: 1.685em;
	min-width: 1.5em;
	height: 1.65em;
	margin: 0em .1em;
	text-align: center;
	vertical-align: top;
}

.dropLetter
{
	animation: drop-animation .15s ease-in-out forwards;
    -webkit-animation: drop-animation .15s ease-in-out forwards;
}


@keyframes drop-animation
{ 
		
	to
	{
		margin-top: 1.65em; 
		margin-bottom: -1.65em; 
	}
	
}

.dropLetterFar
{
	animation: dropFar-animation .15s ease-in-out forwards;
    -webkit-animation: dropFar-animation .15s ease-in-out forwards;
}

@keyframes dropFar-animation
{ 
		
	to
	{
		margin-top: 2em; 
		margin-bottom: -2em; 
	}
	
}



.selectableLetter
{
	border: .085em solid #82cefd;
	box-shadow: 0px .085em 0px #82cefd;
	border-radius: 5px;
	box-sizing: border-box;
	transition: opacity .25s, box-shadow .25s, margin-top .25s, background-color .15s;
	overflow: hidden;
}



.emptyTransition
{
	transition: font-size .2s ease-in-out;
}

.empty
{
	border-width: 0;
	box-shadow: none;
	width: 0;
	font-size: 0;
}

.animateSelectableLetterAppear
{
	animation: selectableLetterAppear-animation .15s forwards;
    -webkit-animation: selectableLetterAppear-animation .15s forwards;
}

@keyframes selectableLetterAppear-animation { 
	from
	{
		border: .085em solid rgba(128, 205, 253, 0);
		box-shadow: 0px 0em 0px rgba(128, 205, 253, 0);
	}
	
	
	
	to 
	{ 
		border: .085em solid #82cefd;
		box-shadow: 0px .085em 0px #82cefd;
	}
}

.selectedLetter
{	
	border-color: #1482ff;
	box-shadow: 0px .085em 0px #1482ff;
	background: #82cefd !important;
	
	transition: margin-top .25s, background-color .15s;
	
	margin-top: 0em;
	
	animation: select-animation .25s forwards;
    -webkit-animation: select-animation .25s forwards;
}

@keyframes select-animation { 
	from
	{
		box-shadow: 0px .085em 0px #1482ff;
	}
	
	50% 
	{ 
		margin-top: .085em;
		margin-bottom: -.085em;
		box-shadow: 0px 0vw 0px #1482ff;
		
	}
	
	to 
	{ 
		box-shadow: 0px .085em 0px #1482ff;	
	}
}


.animateUseSelectedLetter
{
	animation: useSelectedLetter-animation .15s ease-in forwards;
    -webkit-animation: useSelectedLetter-animation .15s ease-in forwards;
}


@keyframes useSelectedLetter-animation
{ 
		
	to
	{
		margin-top: 1.5em; 
		margin-bottom: -1.5em; 
		height: .1em;
		opacity: 0
	}
	
}

.doubleWord
{
	color: #1482ff;
	font-weight: bold;
}

.doubleWord::after
{
	content: "x2";
	position: absolute;
	margin-top: 2.8em;
	margin-left: -.7em;
	font-size: .35em;
	text-shadow: none;
	font-weight: bold;
	color: #1482ff;
	background: #82cefd;
	padding: .1em .4em .15em .4em;
	box-sizing: border-box;
	border-radius: 10px;
}

#bankLetters
{
	display: flex;
	flex-direction: column;
	color: #999995;
	margin-top: 1em;
}


#controls
{
	margin-top: 2em;
}

.control
{
	text-transform: uppercase;
	display: inline-block;
	border: 2px solid #cbcbc5;
	border-radius: 999px;
	font-size: 1em;
	color: #999995;
	padding: .5em 1em;
	transition: .1s;
}

.errorControl
{
	color: #fd8d80;
	border-color: #fd8d80;
	font-weight: bold;
	pointer-events: all;
}

.errorControlExtreme
{
	background-color: #fd8d80;
	color: #252523;
	border-color: #fd8d80;
	font-weight: bold;
}

#shuffle
{
	background: url("shuffle.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1.25em;
	color: rgba(0, 0, 0, 0);
}

.checking
{
	border: 2px dashed rgba(203, 203, 197, 0.55);
	border-radius: 999px;
	font-size: 1em;
	opacity: .5;
	padding: .5em 1em;
	pointer-events: none;
}

#guessingForm
{
	/*margin: 50px 0;*/
	display: none;
}

#score
{
	display: inline-block;
	background: #82cefd;
	border-radius: 999px;
	font-size: 1em;
	padding: .45em .8em .4em .8em;
}

.animateScore
{
	animation: score-animation .25s forwards;
    -webkit-animation: score-animation .25s forwards;
}


@keyframes score-animation 
{
	from
	{
		margin-bottom: .25em;
		margin-top: -.25em;
	}
	
	to
	{
		margin-bottom: 0;
		margin-top: 0;
	}
}

.scoreBelowZero
{
	background: #fd8d80 !important;
}


#response
{
	text-align: left;
	font-size: .8em;
	width: 100%;
}

.response
{
	opacity: 0;
	overflow: hidden;
	/*animation-delay: .5s;*/
	animation: revealResponse .15s forwards;
}

@keyframes revealResponse {
  to {opacity: 1;}
}

.responseTop
{
  	display: flex; 
	position: relative;
}

.responseWord
{
	color: #1482ff;
	font-weight: bold;
	margin-right: .75em;
	text-transform: uppercase;
}
.responsePhonetic
{
	color: #999995;
	font-style: italic;
}

.responseScore
{
	color: #999995;
	position: absolute;
	right: 0;
	margin-top: 0em;
}

.responseDefinition
{
  	display: flex; 
	margin-top: .5em;
	padding-top: .5em;
	box-sizing: border-box;
	border-top: 1px solid #cbcbc5;
	margin-bottom: 2.5em;
}


#statsModal
{
	position: relative;
	display: inline-block;
	
	width: calc(100vw - 8vw);
	max-width: 450px;
	height: 32em;
	
	background: #f2f2ef;
	z-index: 200;
	border-radius: 10px;
			
	margin-bottom:2em;
		
	overflow-y: scroll;
	
}

#statsBG
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: -3em;
}

.statsSectionTitle
{
	margin-top: 2em;
	margin-bottom: 0em;
	color: #999995;
	font-size: 1em;
	text-transform: uppercase;
}

#statsModal hr
{
	border-bottom: 1px solid #cbcbc5;
	margin: 1.5em 1em 1.5em 1em;
	width: auto;
}

.stats
{
	padding: 0 0 0 0;
}

.statsSubsection
{
	position: relative;
	display: inline-block;
	width: 20%;
	margin: .5em 0;
}

.wideStats
{
	width: 100%;
}

#highScoreStats
{
	margin: -.1em 0 1.75em 0;
}

.statsLongestWord
{
	display: inline-block;
	text-transform: uppercase;
}

#statsLongestWordVal
{
	letter-spacing: .5em;
	margin-left: .5em;
}

.statsValue
{
	font-size: 1.5em;
	font-weight: bold;
}

.statsTitle
{
	font-size: .75em;
	font-weight: 100;
	line-height: 1.2em;
}

#donateButton
{
	border-radius: 999px;
	background: #94d4fb;
	font-weight: bold;
	color: #1482ff;
	padding: .5em;
	box-sizing: border-box;
	margin: 1em 4em;
	font-size: 1.25em;
	pointer-events: all;
}

#donationFrame
{
	position: fixed;
	width: calc(100vw - 8vw);
	z-index: 9999;
	border-radius: 10px;
	overflow: hidden;
	top: 1em;
	left: 1em;
}

#kofiframe
{
	width:  calc(100% - 8%);
	background:#f9f9f9;
	margin: -125px 0 -6px 0;
	border: 2px solid #cbcbc5;
}

#kofiCutout
{
	overflow-y: scroll;
	overflow-x: hidden;
	height: auto;
	margin: 0 1em 2em 1em;
	border-radius: 24px;
	border: 2px solid #cbcbc5;
	box-shadow: 0px 2px 0px #cbcbc5;
}

#downArrow
{
	position: relative;
	display: inline-block;
	margin: 1.15em 0 0 0;
	width: 4em;
	height: 1.75em;
	color: #f2f2ef;
	animation: arrowAnim 1s infinite;
	background: url("downArrow.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

@keyframes arrowAnim {
  from {margin-top: 1.15em; }
  50% {margin-top: 1.4em; margin-bottom: -.25em; }
  to {margin-top: 1.15em; }
}


li {
  margin: 0 0 .5em 0;
  padding: 0;
}

ul {
	margin-left: 1.75em;
	padding-left: 0;
}

p{
	margin: 0 0 .75em 0;
}


#editSaveForm
{
}

.fixedWidth
{
	position: relative;
	display: block;
	font-size: .8em;
	max-width: 500px;
}

#editSaveForm label
{
	margin-bottom: -.25em;
}

#editSaveForm input
{
	margin-bottom: 1em;
	background: #f2f2ef;
	border-style: solid;
	border-radius: .3em;
	width: 100%;
	font-size: 1.5em;
	text-transform: uppercase;
}

#scoreDots
{
	position: absolute;
	bottom: .5em;
	height: 0px;
	width: 100%;
	text-align: center;
}

.pageDot
{
	width: .3em;
	height: .3em;
	position: relative;
	display: inline-block;
	background-color: #999995;
	border-radius: 999px;
	margin: 0 -.2em;
	
	transition: all ease-in-out .25s;
}

.selectedPage
{
	width: .45em;
	background: #252523;
}

.button
{
	color: #1482ff;
	border: 2px solid #1482ff;
	text-align: center;
	font-size: 1.25em;
	padding: .5em 0;
	border-radius: 999px !important;
}

input:focus 
{
	margin-bottom: 1em;
	background: #f2f2ef;
	border-style: solid;
	border-radius: .3em;
	width: 100%;
	font-size: 2.5em;
}

#editStatsSpacer
{
	height: 65px;
}

#crosshatchIcon
{
	position: relative;
	display: inline-block;
	width: 4.5em;
	height: 4.5em;
	background: url('crosshatchIcon.png');
	background-size: cover;
	border-radius: 1em;
	margin-top: .5em;
	box-sizing: border-box;
	border: .085em solid #1482ff;
	box-shadow: 0px .085em 0px #1482ff;
}

a
{
	color: #1482ff;
	text-decoration: underline;
}

a:hover
{
	color: #1482ff;
}

@media screen and (orientation:portrait) and  (max-width: 500px)
{
	body
	{
		background: #f2f2ef;
	}
	
	#rotateMe
	{
		display: none;
	}
}


@media screen and (orientation:landscape) and (max-device-width: 500px) 
{
	
	body
	{
		background: #1482ff;
		overflow: hidden;
	}
	
	#rotateMe
	{
		display: grid;
	}
}


@media (min-device-width: 500px) and (min-width: 480px)

{
	body
	{
		background: #f2f2ef;
		font-size: 20px;
		padding: 1em;
	}
	
	#rotateMe
	{
		display: none;
	}
	
	#instructions
	{
		height: auto;
		max-height: 80vh;
		max-width: 600px;
		padding: 2em 2em;
	}
	
	#statsModal
	{	
		max-height: 80vh;
	}

	#response
	{
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
	


}

@media (prefers-color-scheme: dark) 
{	
	body
	{
		background: #252523;
		color: #f2f2ef;
	}

	#score
	{
		color: #252523;
	}
	
	
	#errorText
	{
		background: #fd8d80;
		color: #252523;	
	}
	
	#instructions
	{
		background: #252523;
		color: #f2f2ef;	
	}
	
	#downArrow
	{
		background: url("downArrowLight.svg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
	}

	#statsModal
	{	
		background: #252523;
	}
	
	.selectedPage
	{
		background-color: #f2f2ef;
	}
	
	#editSaveForm input
	{
		background: #252523;
		color: #f2f2ef;
		border-style: solid;
		
	}
}