/*
! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
*/

*, :after, :before {
	box-sizing: border-box;
	border: 0 solid
}
:after, :before {
	--tw-content: ""
}
html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	font-family: Nunito
}
body {
	line-height: inherit
}
hr {
	height: 0;
	color: inherit;
	border-top-width: 1px
}
abbr:where([title]) {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}
h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit
}
a {
	color: inherit;
	text-decoration: inherit
}
b, strong {
	font-weight: bolder
}
code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
	font-size: 1em
}
small {
	font-size: 80%
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}
sub {
	bottom: -.25em
}
sup {
	top: -.5em
}
table {
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse
}
button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: inherit;
	color: inherit;
	margin: 0;
	padding: 0
}
button, select {
	text-transform: none
}
[type=button], [type=reset], [type=submit], button {
	-webkit-appearance: button;
	background-color: transparent;
	background-image: none
}
:-moz-focusring {
	outline: auto
}
:-moz-ui-invalid {
	box-shadow: none
}
progress {
	vertical-align: baseline
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
	height: auto
}
[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}
::-webkit-search-decoration {
	-webkit-appearance: none
}
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}
summary {
	display: list-item
}
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
	margin: 0
}
fieldset {
	margin: 0
}
fieldset, legend {
	padding: 0
}
menu, ol, ul {
	list-style: none;
	margin: 0;
	padding: 0
}
textarea {
	resize: vertical
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	opacity: 1;
	color: #9ca3af
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	opacity: 1;
	color: #9ca3af
}
input::placeholder, textarea::placeholder {
	opacity: 1;
	color: #9ca3af
}
[role=button], button {
	cursor: pointer
}
:disabled {
	cursor: default
}
audio, canvas, embed, iframe, img, object, svg, video {
	display: block;
	vertical-align: middle
}
img, video {
	max-width: 100%;
	height: auto
}
[hidden] {
	display: none
}
*, :after, :before {
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgb(59 130 246/0.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia:
}
@media (min-width:640px) {
	.container {
		max-width: 640px
	}
}
@media (min-width:768px) {
	.container {
		max-width: 768px
	}
}
@media (min-width:1024px) {
	.container {
		max-width: 1024px
	}
}
@media (min-width:1280px) {
	.container {
		max-width: 1280px
	}
}
@media (min-width:1536px) {
	.container {
		max-width: 1536px
	}
}
.pointer-events-none {
	pointer-events: none
}
.visible {
	visibility: visible
}
.fixed {
	position: fixed
}
.absolute {
	position: absolute
}
.relative {
	position: relative
}
.inset-0 {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}
.left-0 {
	left: 0
}
.mx-auto {
	margin-left: auto;
	margin-right: auto
}
.my-5 {
	margin-top: 1.25rem;
	margin-bottom: 1.25rem
}
.mt-4 {
	margin-top: 1rem
}
.mb-4 {
	margin-bottom: 1rem
}
.ml-2 {
	margin-left: .5rem
}
.mb-12 {
	margin-bottom: 3rem
}
.mt-2 {
	margin-top: .5rem
}
.mr-4 {
	margin-right: 1rem
}
.mt-1 {
	margin-top: .25rem
}
.mb-6 {
	margin-bottom: 1.5rem
}
.mb-2 {
	margin-bottom: .5rem
}
.flex {
	display: flex
}
.h-full {
	height: 100%
}
.h-\[6rem\] {
	height: 6rem
}
.h-6 {
	height: 1.5rem
}
.max-h-\[8rem\] {
	max-height: 8rem
}
.min-h-\[20rem\] {
	min-height: 20rem
}
.w-12 {
	width: 3rem
}
.w-full {
	width: 100%
}
.w-\[15\.5rem\] {
	width: 15.5rem
}
.w-\[5rem\] {
	width: 5rem
}
.w-\[21rem\] {
	width: 21rem
}
.w-\[6rem\] {
	width: 6rem
}
.w-6 {
	width: 1.5rem
}
.max-w-sm {
	max-width: 22rem
}
.flex-1 {
	flex: 1 1 0%
}
.translate-x-full {
	--tw-translate-x: 100%
}
.translate-x-0, .translate-x-full {
	-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-0 {
	--tw-translate-x: 0px
}
.transform {
	-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cursor-pointer {
	cursor: pointer
}
.appearance-none {
	-webkit-appearance: none;
	appearance: none
}
.flex-col {
	flex-direction: column
}
.items-center {
	align-items: center
}
.justify-center {
	justify-content: center
}
.justify-between {
	justify-content: space-between
}
.space-x-2>:not([hidden])~:not([hidden]) {
	--tw-space-x-reverse: 0;
	margin-right: calc(.5rem * var(--tw-space-x-reverse));
	margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
}
.space-y-4>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}
.space-y-2>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}
.space-x-8>:not([hidden])~:not([hidden]) {
	--tw-space-x-reverse: 0;
	margin-right: calc(2rem * var(--tw-space-x-reverse));
	margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
}
.rounded-full {
	border-radius: 9999px
}
.rounded-md {
	border-radius: .375rem
}
.border-2 {
	border-width: 2px
}
.border-green {
	--tw-border-opacity: 1;
	border-color: rgb(34 197 94/var(--tw-border-opacity))
}
.border-gray {
	--tw-border-opacity: 1;
	border-color: rgb(58 58 60/var(--tw-border-opacity))
}
.bg-white {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255/var(--tw-bg-opacity))
}
.bg-gray {
	--tw-bg-opacity: 1;
	background-color: rgb(58 58 60/var(--tw-bg-opacity))
}
.bg-black {
	--tw-bg-opacity: 1;
	background-color: rgb(0 0 0/var(--tw-bg-opacity))
}
.bg-green {
	--tw-bg-opacity: 1;
	background-color: rgb(34 197 94/var(--tw-bg-opacity))
}
.p-1\.5 {
	padding: .375rem
}
.p-1 {
	padding: .25rem
}
.px-2 {
	padding-left: .5rem;
	padding-right: .5rem
}
.px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem
}
.py-2 {
	padding-top: .5rem;
	padding-bottom: .5rem
}
.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem
}
.py-1 {
	padding-top: .25rem;
	padding-bottom: .25rem
}
.px-4 {
	padding-left: 1rem;
	padding-right: 1rem
}
.text-left {
	text-align: left
}
.text-center {
	text-align: center
}
.font-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
}
.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem
}
.text-xs {
	font-size: .75rem;
	line-height: 1rem
}
.text-sm {
	font-size: .875rem;
	line-height: 1.25rem
}
.text-\[1\.125rem\] {
	font-size: 1.125rem
}
.text-2xl {
	font-size: 1.5rem;
	line-height: 2rem
}
.font-bold {
	font-weight: 700
}
.font-light {
	font-weight: 300
}
.font-semibold {
	font-weight: 600
}
.text-black {
	--tw-text-opacity: 1;
	color: rgb(0 0 0/var(--tw-text-opacity))
}
.text-\[\#999999\] {
	--tw-text-opacity: 1;
	color: rgb(153 153 153/var(--tw-text-opacity))
}
.text-white {
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity))
}
.text-gray {
	--tw-text-opacity: 1;
	color: rgb(58 58 60/var(--tw-text-opacity))
}
.text-green {
	--tw-text-opacity: 1;
	color: rgb(34 197 94/var(--tw-text-opacity))
}
.text-yellow {
	--tw-text-opacity: 1;
	color: rgb(163 144 53/var(--tw-text-opacity))
}
.text-light-gray {
	--tw-text-opacity: 1;
	color: rgb(153 153 153/var(--tw-text-opacity))
}
.text-\[tomato\] {
	--tw-text-opacity: 1;
	color: rgb(255 99 71/var(--tw-text-opacity))
}
.opacity-0 {
	opacity: 0
}
.shadow-lg {
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0/0.1), 0 4px 6px -4px rgb(0 0 0/0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.outline-none {
	outline: 2px solid transparent;
	outline-offset: 2px
}
.filter {
	-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.transition {
	transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}
.transition-opacity {
	transition-property: opacity;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}
.duration-200 {
	transition-duration: .2s
}
.duration-100 {
	transition-duration: .1s
}
.ease-linear {
	transition-timing-function: linear
}
#container {
	margin-left: auto;
	margin-right: auto;
	max-width: 32rem;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-align: center
}
.words {
	position: relative;
	margin-top: -.5rem;
	max-width: 22rem;
	flex-direction: column;
	justify-content: center
}
.words, header {
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: center
}
header {
	max-width: 32rem;
	border-bottom-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(58 58 60/var(--tw-border-opacity));
	padding: 1rem
}
header, main {
	justify-content: space-between
}
main {
	display: flex;
	height: 100vh;
	flex-direction: column;
	align-items: center
}
h1 {
	font-size: 1.5rem;
	font-weight: 700
}
h2 {
	font-size: 1.2rem;
	font-weight: 400;
	text-transform: uppercase;
	color: #999
}
a {
	-webkit-text-decoration-line: underline;
	text-decoration-line: underline
}
p, span {
	font-size: 1rem
}
p {
	margin-top: 1rem;
	margin-bottom: 1rem
}
.modal {
	visibility: hidden;
	z-index: -1;
	pointer-events: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: all .25s
}
.modal-inner {
	z-index: 30;
	margin: 6rem .5rem;
	min-height: 26rem;
	width: 26rem;
	max-width: 100vw;
	background-color: rgb(254 254 254);
	border-radius: 10px;
	transition: all .25s;
	-webkit-transform: translateY(50px);
	transform: translateY(50px)
}
.modal.open {
	visibility: visible;
	pointer-events: auto;
	z-index: 20;
	opacity: 1
}
.modal.open .modal-inner {
	-webkit-transform: translate(0);
	transform: translate(0)
}
.word {
	margin-top: .35rem;
	margin-left: .35rem;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity))
}
.tile, .word {
	display: flex
}
.tile {
	position: relative;
	margin-right: .35rem;
	box-sizing: border-box;
	height: 18vw;
	border: 1px solid #ccc;
	border-radius: 5px;
	max-height: 4rem;
	min-height: 1rem;
	width: 18vw;
	min-width: 1rem;
	max-width: 4rem;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	text-transform: uppercase;
	touch-action: none;
	font-size: 2.3rem;
	text-decoration: none;
	transition: background-color .2s, box-shadow .2s
}
div.tile.active, div.tile.drag {
	z-index: 10;
	background-color: #999!important;
	box-shadow: 0 6px 6px rgba(0, 0, 0, .23)
}
button {
	border-radius: .375rem;
	background-color: rgb(58 58 60/var(--tw-bg-opacity));
	padding: .25rem 1rem;
	color: rgb(255 255 255/var(--tw-text-opacity))
}
button, button:disabled {
	--tw-bg-opacity: 1;
	--tw-text-opacity: 1
}
button:disabled {
	background-color: rgb(34 34 34/var(--tw-bg-opacity));
	color: rgb(153 153 153/var(--tw-text-opacity))
}
@media only screen and (max-width:350px) {
	h1 {
		font-size: 1.2rem
	}
	h2 {
		font-size: 1rem
	}
	p, span {
		font-size: .8rem
	}
	.tile {
		font-size: 1.8rem
	}
}
@media only screen and (max-width:250px) {
	h1, h2 {
		font-size: .8rem
	}
	p, span {
		font-size: .7rem
	}
	.tile {
		font-size: 1.2rem
	}
}
.fade-in {
	-webkit-animation: fadeIn .4s linear;
	animation: fadeIn .4s linear
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}
.focus\:outline-none:focus {
	outline: 2px solid transparent;
	outline-offset: 2px
}
@media (min-width:768px) {
	.md\:mb-0 {
		margin-bottom: 0
	}
}