:root {
	--width: 120px;
	--width-ratio: 0.618;
	--height: calc(var(--width) * var(--width-ratio));
	--border: 10px;
	--bubblecolor: #e0e0e0;
}
  
/* Default to small mobile screens */
html, body {
	font-family: "Georgia", serif;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
body {
	background: white;
}
#main {
    display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
	height: 50vh;

	animation: bounceInDown;
	animation-duration: 0.65s;
}
#title {
	font-size: 1.5em;
	margin-bottom: 0.25em;
}
#logo {
	display: block;
}
#footer {
	font-size: 0.7em;
	margin-top: 0.25em;
}


.title {
	position: absolute;
	top: var(--border);
	width: fit-content;
	margin-left: 45%;
	margin-right: auto;
	color: #5f5e5e;
}

.card {
	position: absolute;
	cursor: move;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9;
	background-color: #ffffff;
	border: 2px solid #d3d3d3;
	border-radius: 0.4em;
	width: var(--width);
	height: var(--height);
	min-width: var(--width);
	min-height: var(--height);
	max-width: var(--width);
	max-height: var(--height);
	transform-origin: center center;	/* TESTING */
	contain: content;	/* PERFORMANCE TESTING */
	
	/*
	-webkit-text-stroke: 1px #ffffff80;
	*/
	text-shadow:
	1px 1px 2px #ffffff38,
	-1px 1px 2px #ffffff38,
	-1px -1px 0 #ffffff38,
	1px -1px 0 #ffffff38;

	height: 120px;
	width: 74px;
	background-position: calc(var(--width) * 0) calc(var(--height) * 0);
}
.card-appear {	
	animation: flipInY;
	animation-duration: 0.65s;
}
  
.hint-top, .hint-right, .hint-bottom, .hint-left {
	position: absolute;
	color: rgb(254, 78, 78);
	font-weight: normal;
}
.hint-top {
	top: -5px;
	left: 43%;
}
.hint-right {
	top: 35%;
	right: 0;
}
.hint-bottom {
	bottom: -3px;
	left: 43%;
}
.hint-left {
	top: 35%;
	left: 0;
}

.hide {
	visibility:hidden;
}
.omit {
	display: none;
}

.card_background0 {
	background-image: url(background01.jpg);
}

.card_background1 {
	background-image: url(background02.jpg);
}

.dragging {
	box-shadow: 5px 5px 5px #b6b6b6;
}

.before {
	border-left-color: deepskyblue;
	border-top-color: deepskyblue;
}

.after {
	border-right-color: deepskyblue;
	border-bottom-color: deepskyblue;
}

.correct {
	border-color: #404040;
	border-style: dashed;
}
  
/*
.solved {
	background-image: url(background01.jpg);
	height: 120px;
	width: 74px;
	NOP_border-color: #f0f0f0;
}
*/

.solved_effects {
	animation: punchIn 50ms ease-in, punchOut 250ms ease-out;
	animation-delay: 150ms;
}

.solved_style0 {
	background-position: calc(var(--width) * 0) calc(var(--height) * 0);
}
.solved_style1 {
	background-position: calc(var(--width) * -1) calc(var(--height) * 0);
}
.solved_style2 {
	background-position: calc(var(--width) * -2) calc(var(--height) * 0);
}
.solved_style3 {
	background-position: calc(var(--width) * -3) calc(var(--height) * 0);
}

.solved_style4 {
	background-position: calc(var(--width) * 0) calc(var(--height) * -1);
}
.solved_style5 {
	background-position: calc(var(--width) * -1) calc(var(--height) * -1);
}
.solved_style6 {
	background-position: calc(var(--width) * -2) calc(var(--height) * -1);
}
.solved_style7 {
	background-position: calc(var(--width) * -3) calc(var(--height) * -1);
}

.solved_style8 {
	background-position: calc(var(--width) * 0) calc(var(--height) * -2);
}
.solved_style9 {
	background-position: calc(var(--width) * -1) calc(var(--height) * -2);
}
.solved_style10 {
	background-position: calc(var(--width) * -2) calc(var(--height) * -2);
}
.solved_style11 {
	background-position: calc(var(--width) * -3) calc(var(--height) * -2);
}

.solved_style12 {
	background-position: calc(var(--width) * 0) calc(var(--height) * -3);
}
.solved_style13 {
	background-position: calc(var(--width) * -1) calc(var(--height) * -3);
}
.solved_style14 {
	background-position: calc(var(--width) * -2) calc(var(--height) * -3);
}
.solved_style15 {
	background-position: calc(var(--width) * -3) calc(var(--height) * -3);
}

.hintsContainer {
	position: absolute;
	left: 9em;
	bottom: calc(var(--border) + 0.25em);
}
.hints {
	font-size: small;
}
  
.btnPuzzle {
	position: absolute;
	left: var(--border);
	top: 5em;
	background-color: #0276FF;
}
  
.btnJumpTo {
	position: absolute;
	right: var(--border);
	bottom: var(--border);
	background-color: #cdcdcd;
}
  
.btnHowToPlay {
	position: absolute;
	left: var(--border);
	bottom: var(--border);
	background-color: #cdcdcd;
}
	  
.btnPuzzle, .btnJumpTo, .btnHowToPlay {
	cursor: pointer;
	
	box-shadow: rgba(255, 255, 255, 0.26) 0 1px 2px inset;
	color: #ffffff;
	border-radius: 8px;
	border-style: none;
	font-family: "RM Neue",sans-serif;
	font-size: 0.75em;
	line-height: 1.15;
	margin: 0;
	padding: 10px 21px;
	text-align: center;
	text-transform: none;
	appearance: button;
	transition: color .13s ease-in-out,background .13s ease-in-out,opacity .13s ease-in-out,box-shadow .13s ease-in-out;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}
.btnPuzzle:active {
	background-color: #006AE8;
	margin-top: 1px;
	margin-left: 1px;
}
.btnPuzzle:hover {
	background-color: #1C84FF;
}
  
.wordContainer {
	display: flex;
	position: absolute;
	visibility: hidden;
	width: fit-content;
	height: fit-content;
	border: rgb(128, 128, 128) 1px solid;
	border-radius: 5px;
	padding: 1.0em;
	box-shadow: 10px 10px 5px #00000020;
	z-index: 200;
	flex-direction: column;
	align-items: stretch;
	font-size:medium;
	flex-wrap: wrap;
	background-color: #ffffffe0;
	left: var(--border);	/* DEBUG */
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	cursor: default;
}
.wordColumns {
	column-count: 5;
	column-gap: 0em;
	flex: 1;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	cursor: default;
}
.wordCell {
	display: block;
	width: 100%;
	padding: 0.1em 0.25em;
	box-sizing: border-box;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;	/* Chrome, Safari, Opera */
	break-inside: avoid;		/* Firefox */
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	cursor: default;
}
.wordCell:hover {
	background-color: #bcd8fb;
	cursor: default;
}
  
@keyframes fadeIn { 
	from { 
		opacity: 0.0; 
	} 
	to { 
		opacity: 1; 
	} 
}
  
/*
@keyframes punchIn { 
	from { 
		  transform: scale(0.8);
	} 
   
	to { 
		  transform: scale(1.1); 
	} 
}
*/
  
@keyframes punchIn { 
	0% {
		transform: scale(0.8);
	}
	10% { 
		transform: scale(1.2);
	}
	/*
	50% { 
		transform: scale(1.0);
	}
	100% { 
		transform: scale(1.0);
	}
	*/
}
  
@keyframes punchOut { 
	0% { 
		transform: scale(1.2);
	}
	10% { 
		transform: scale(1.0);
	}
	/*
	100% { 
		transform: scale(1.0);
	} 
	*/   
} 

.modalTutorial {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 999; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(255,255,255); /* Fallback color */
	background-color: rgba(255,255,255,1); /* white w/ opacity */
}
  
.tutorial-content {
	background-color: #ffffff;
	margin: 0vw auto;
	padding: 20px;
	border: 1px solid #888888;
	width: fit-content;
	height: fit-content;
	border-radius: 1em;
	box-shadow: 5px 5px 5px #00000020;
	text-align: center;
	
	animation: bounceInDown;
	animation-duration: 0.5s;
}
  
.tutorial-image {
	max-width: 60vw;
	max-height: 60vh;
}
  
  /* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 999; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(255,255,255,0.01); /* white w/ opacity */
}
  
  /* Modal Content */
.modal-content {
	background-color: #ffffffb0;
	margin: 0vw auto;
	padding: 20px;
	border: 1px solid #888888;
	width: fit-content;
	height: fit-content;
	border-radius: 1em;
	box-shadow: 5px 5px 5px #00000020;
	text-align: center;
	
	animation: backInDown;
	animation-duration: 0.5s;
}
  
  /* Modal Close Button */
.close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	margin-top: -0.5em;
}

.close:hover, .close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
  
.solve-icon {
	display: inline-block;
	height: 128px;
	width: 128px;
	background-image: url(spritesheet.png);
	background-size: 1024px;
	animation: tada;
	animation-duration: 1s;
	animation-delay: 350ms;
}
.solve-text {
	cursor: default;
	margin-top: 0.5em;
	text-transform: capitalize;
}
  
  /*
  ** https://codepen.io/run-time/pen/VNRBJd
  */
.bubble {
	position: relative;
	font-family: sans-serif;
	font-size: 18px;
	line-height: 24px;
	width: fit-content;
	background: var(--bubblecolor);
	border-radius: 36px;
	padding: 24px;
	text-align: center;
	color: #000;
}
  
.bubble-bottom-left:before {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 24px solid var(--bubblecolor);
	border-right: 12px solid transparent;
	border-top: 12px solid var(--bubblecolor);
	border-bottom: 20px solid transparent;
	left: 32px;
	bottom: -24px;
}