@import url('https://fonts.googleapis.com/css2?family=Sedan:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Sedan:ital@0;1&display=swap');

:root{
	--orange: #f2a008; 
	--green: #09ff00;
	--thickBlack: black -3px -3px 5px, 
	black 3px 3px 5px, 
	black -3px 3px 5px, 
	black 3px -3px 5px,
	black -2px -2px 3px, 
	black 2px 2px 3px, 
	black -2px 2px 3px, 
	black 2px -2px 3px;
	--hue: 0;
	--sat: 100%;
	--l: 30%;
	--stack: 1px 1px 0px 0px white,
	2px 2px 0px 0px black,
	3px 3px 0px 0px white,
	4px 4px 0px 0px black,
	5px 5px 0px 0px white,
	6px 6px 0px 0px black,
	7px 7px 0px 0px white,
	8px 8px 0px 0px black,
	9px 9px 0px 0px white,
	10px 10px 0px 0px black,
	/* 11px 11px 0px 0px white,
	12px 12px 0px 0px black, */
	13px 13px 0px 0px white,
	14px 14px 0px 0px black,
	15px 15px 0px 0px white,
	16px 16px 0px 0px black,
	17px 17px 0px 0px white,
	18px 18px 0px 0px black,
	19px 19px 0px 0px white,
	20px 20px 0px 0px black,
	21px 21px 0px 0px white,
	22px 22px 0px 0px black;

	/* --transpStack: 1px 1px 0px 0px rgba(255, 255, 255, 0),
	2px 2px 0px 0px rgba(0, 0, 0, 0),
	3px 3px 0px 0px rgba(255, 255, 255, 0),
	4px 4px 0px 0px rgba(0, 0, 0, 0),
	5px 5px 0px 0px rgba(255, 255, 255, 0),
	6px 6px 0px 0px rgba(0, 0, 0, 0),
	7px 7px 0px 0px rgba(255, 255, 255, 0),
	8px 8px 0px 0px rgba(0, 0, 0, 0),
	9px 9px 0px 0px rgba(255, 255, 255, 0),
	10px 10px 0px 0px rgba(0, 0, 0, 0),
	//11px 11px 0px 0px rgba(255, 255, 255, 0),
	//12px 12px 0px 0px rgba(0, 0, 0, 0), 
	13px 13px 0px 0px rgba(255, 255, 255, 0),
	14px 14px 0px 0px rgba(0, 0, 0, 0),
	15px 15px 0px 0px rgba(255, 255, 255, 0),
	16px 16px 0px 0px rgba(0, 0, 0, 0),
	17px 17px 0px 0px rgba(255, 255, 255, 0),
	18px 18px 0px 0px rgba(0, 0, 0, 0),
	19px 19px 0px 0px rgba(255, 255, 255, 0),
	20px 20px 0px 0px rgba(0, 0, 0, 0),
	21px 21px 0px 0px rgba(255, 255, 255, 0),
	22px 22px 0px 0px rgba(0, 0, 0, 0);
	 */

	--main-font: "Averia Serif Libre", serif;
}

body{
	min-height: 100%;
	scroll-behavior: smooth;
}

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/* font-family: sans-serif; */
	font-family: var(--main-font);
}

/* #region scrollbar bits */
	/* width */
	::-webkit-scrollbar {
		width: 5px;
	}
	::-webkit-scrollbar-track {
		background: #f1f1f1;
	}
	::-webkit-scrollbar-thumb {
		background: #888;
	}
	::-webkit-scrollbar-thumb:hover {
		background: #555;
	}
/* #endregion */
span.report, span.edit{ display:none;}
#shareDeckOptions{
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	gap: 2px;
}
#shareDeckOptions label:hover{
	background: skyblue;
}
#shareDeckOptions label{
	cursor: pointer;
	padding: 3px;
	border-radius: 3px;
	background: #eee;
	transition: all 0.4s ease-in-out;
}
#shareDeckOptions input[type=checkbox]{
	margin: 5px;
}
#shareDeckOptions label:has(input:checked){
	background: skyblue;
}
#meta-btn-container #showAllDecks{
	font-size: medium;
	margin-right:auto;
	cursor: pointer;
}
#meta-btn-container #showAllDecks *{
	font-size: medium;
}
#showForm, #showShare, #showSettings{
	cursor: pointer;
	user-select: none;
}
h2{ text-align: center;}
#create, #share{
	/* display: none; */
	display: flex;
	max-height: 0;
	transition: all 0.5s ease-in-out;
	flex-direction: column;
	background: white;
	overflow: hidden;
	gap: 10px;
	border-radius: 10px;
	padding: 0 20px;
	margin-bottom: 0px;
	width: 300px;
	font-size: 25px;
	/* box-shadow: var(--transpStack); */
	box-shadow: var(--stack);
}
#create h2{ padding:0}
#create input[type=text], textarea, #createButton, #shareButton{
	height: 30px;
	font-size: medium;
	padding: 5px;
}
*::placeholder{
	font-family: var(--main-font);
}
#create.show{
	max-height: 450px;
	padding: 20px;
	margin-bottom: 45px;
}
#share.show{
	max-height: 450px;
	padding: 20px;
	margin-bottom: 45px;
}
#wordList{
	height: 400px;
}
label{
	vertical-align: middle;
	font-size: 16px;
}

#overlay {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 80%);
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	padding-top: 15em;
	box-sizing: border-box;
}
#overlay.hidden{
	display: none;
}

body{
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #7923d5, #23a6d5, #23d5ab);
	background-size: 1000% 1000%;
	animation: gradient 30s ease infinite;
	display: flex;
	flex-direction: column;
}

#content{
	max-width: 500px;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 1 0 auto;
}
h1{
	margin: 80px 40px 20px;
	color: white;
	text-align: center;
}
h2{
	font-size: 1em;
	padding: 20px;
}
h3{	font-size: 1rem;}
h4{	font-size: 0.8rem;}
h5{	font-size: 0.6rem;}
h5 a{	color: white; }
.gallery{
	gap: 45px;
	display: flex;
	flex-direction: column;
}
.deck{
	width: 300px;
	border: solid white 10px;
	height: 450px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	font-size: 30px;
	color: white;
	user-select: none;
	background: hsl(var(--hue) var(--sat) var(--l));
	text-align: center;
	cursor: pointer;
	box-shadow: black 3px 3px 5px;
	transition: all 0.1s linear;
	text-transform: capitalize;
	position: relative;
	box-shadow: var(--stack)
}
.deck[style]{
	text-shadow: var(--thickBlack);
}
.deck a{
	color: white;
	text-decoration: none;
}
.deck a:after{
	content: ' ';
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right:0;
	z-index: 1;
}
#meta-btn-container{
	display: flex;
	position: fixed;
	top:0;
	right:0;
	width:100%;
	align-items: center;
	padding: 10px;
	justify-content: flex-end;
	z-index: 100;
	backdrop-filter: blur(10px);
	/* bc ios is still living in the past */
	-webkit-backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.3);
}
#meta-btn-container span{
	font-size: 1.5em;
	color: white;
	padding: 5px;
}

.deck .btn-container{
	z-index: 10;
}
.deck .btn-container span{
	font-size: 1.5em;
}
span.report:hover{
	color: red;
}
span.fav:hover{
	color: gold;
}
span.edit:hover{
	color: #23a6d5;
}
span.fav.yes{
	font-variation-settings: 'FILL' 1;
	color: gold;
}
#userGallery{
	margin-bottom: 50px;
}
span{
	transition: all 0.5s ease-in-out;
}
button#ready{
	z-index: 100;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border-radius: 5px;
	font-size: 50px;
	transition: all 0.5s;
}
button#ready:hover{
	animation: none;
	background-color: var(--orange);
}

.deck:hover{ 
	filter: brightness(1.5);
}

footer{
	display: flex;
	background: rgba(255, 255, 255, 50%);
	width: 100%;
	padding: 10px;
	margin-top: 70px;
	text-align: center;
	color: white;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(10px);
	/* bc ios is still living in the past */
	-webkit-backdrop-filter: blur(10px);
}

#content.play{
	justify-content: center;
	align-items: center;
}

#activeCard, #leavingCard{
	width: 450px;
	height: 300px;
	background: white;
	border: solid white 10px;
	
	/* opacity: 0.7; */
	background-size: 18px 32px;
	background-position: 0 0, 0 0, 9px 16px, 9px 16px, 0 0, 9px 16px;
	border-radius: 10px;
	font-family: sans-serif;
	font-size: 55px;
	color: white;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px;
	user-select: none;
	position: relative;
	box-shadow: black 3px 3px 5px;
	cursor: pointer;
}

.timer{ 
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 25px;
}

#activeCard{
	background-color: #5959f9;
	background-image: linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777), linear-gradient(60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777);
	
	/* box-shadow: var(--stack); */
}



/* #region sold out */
.stamp {
  transform: rotate(12deg);
	color: #555;
	font-size: 5rem;
	font-weight: 700;
	border: 0.25rem solid #555;
	display: inline-block;
	padding: 0.25rem 1rem;
	text-transform: uppercase;
	border-radius: 1rem;
	font-family: 'Courier';
	-webkit-mask-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png');
	mask-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png');
  -webkit-mask-size: 944px 604px;
  mask-size: 944px 604px;
	text-wrap: nowrap;
	pointer-events: none;
}

span#stamp{
	font-size: 5rem;
	position: absolute;
	top:9%;
	background-color: white;
	opacity: 1;
	z-index: 10000000;
	pointer-events: all;
	user-select: none;
}

.is-approved {
	color: #990a0a;
	border: 0.5rem solid #990a0a;
	-webkit-mask-position: 13rem 6rem;
	mask-position: 13rem 6rem;
	transform: rotate(-14deg);
  border-radius: 0;
	
	transform: rotate(-14deg) translate(-50%, -50%);
	position: absolute;
	top: 48%;
	left: 53%;

} 



button#back{
	background: white;
	border: none;
	border-radius: 50%;
	position: fixed;
	left: 5px;
	top: 5px;
	cursor: pointer;
	font-size: large;
	height: 35px;
	width: 35px;
	user-select: none;
}
button#back:hover{
	animation: wiggle 0.3s;
}
/* button#fullscreen{
	bottom: 5px;
	right: 5px;
	top: unset;
	left: unset;
	color: black;
	text-decoration: none;
} */

div.swirl{
	position: absolute;
	width: 100%;
	height: 430px;
	left: 0;
	background-color: white; /* defines the background color of the image */
	mask: url(./svg/4.svg) no-repeat center / contain;
}
#topSwirl{
	top: -165px;
  /* -webkit-mask: url(https://img.icons8.com/stackoverflow) no-repeat center / contain; */
}
#bottomSwirl{
	transform: rotate(180deg);
	bottom: -165px;
}

#activeContent, #leavingCard, #timer{	font-family: "Averia Serif Libre", serif;}
#activeContent{
	transition: none;
}
.leaving{
	animation: leaveLeft 0.5s ease-out forwards;
}
.leaving.pass{
	animation: leaveRight 0.5s ease-out forwards;
}

.gameOverModal{
	width: 90vw;
	height: 90vh;
	position: fixed;
	top: 5vh;
	left: 5vw;
	background-color: white;
	transform: translateY(100vh);
	transition: transform 1s ease-in;
	flex-direction: column;
	border-radius: 10px;
	overflow: scroll;
}
.gameOverModal::-webkit-scrollbar {
	display: none;
}

#gameOverHeader{
	width: 100%;
	background: var(--orange);
	color: white;
	font-family: var(--main-font);
	font-size: 3rem;
	text-align: center;
	padding: 10px;
	position: sticky;
	top: 0;
	border-radius: 10px 10px 0 0;
	z-index: 1;
}
#gameOverList{
	flex: 1 0 auto;
	padding: 30px;
}

.gameOverResult{
	text-align: center;
	font-size: 1.5rem;
	padding: 0.5rem;
}
.gameOverResult.no{
	opacity: 0.2;
}

#gameOverButtonsContainer{
	display: flex;
	justify-content: space-evenly;
	position: sticky;
	bottom: 0;
	background: var(--orange);
}
.gameoverButtons{
	position: static;
	text-align: center;
	width: unset;
	border: 1px solid grey;
	border-radius: 3px;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px;
}
 #body.play{
	overflow: hidden;
	height: 100vh;
	width: 100vw;
 }

 footer a{
	color: white;
 }

@keyframes leaveLeft{
	0% { 
		display: flex;
		opacity: 1;
		transform: translateX(0%);
	}
	100% {
		display: none;
		opacity: 0;
		transform: translateX(-150vw);
	}
}
@keyframes leaveRight{
	0% { 
		display: flex;
		opacity: 1;
		transform: translateX(0%);
	}
	100% {
		display: none;
		opacity: 0;
		transform: translateX(150vw);
	}
}

@keyframes wiggle {
	0% { transform: rotate(0deg); }
 33% { transform: rotate(15deg); }
 66% { transform: rotate(-15deg); }
100% { transform: rotate(0deg); }
}
@keyframes gradient {
	0% { background-position: 0% 50%;}
	50% { background-position: 100% 50%;}
	100% { background-position: 0% 50%;}
}