/* MAIN STUFF */
@import url('variables.css');
@font-face 
{
  font-family: StoneColdMental;
  src: url(../font/BarlowCondensed-ExtraBold.ttf);
}
@font-face 
{
  font-family: StoneColdMentalRegular;
  src: url(../font/BarlowCondensed-SemiBold.ttf);
}
@font-face 
{
  font-family: tarot;
  src: url(../font/Tillana-Regular.ttf);
}
@font-face 
{
  font-family: tarotBold;
  src: url(../font/Tillana-Bold.ttf);
}

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	user-select: none;
	max-width: 100%;
}
html 
{
	scroll-behavior: smooth;
}
body 
{
	background-image: radial-gradient(#222, #111);
	text-align: center;
	height: 100vh;
}
/* print-button button-image */
/* button.print-button >  */

input[type=checkbox].stay
{
	height: 35px;
	width: 35px;
}
input[type=checkbox].stay + label
{
	position: relative;
	top: -6px;
	text-shadow: 5px 5px 5px black;
	letter-spacing: 1px;
}
input[type=checkbox].stay, input[type=checkbox].stay + label
{
	display: inline-block;
	padding: 10px;
	color: white;
	font-size: 35px;
	cursor: pointer;
}
button.print-button:hover
{
	transform: scale(.98);
}
button.print-button 
{
	transition: transform var(--speed);
	cursor: pointer;
	font-family: StoneColdMental;
	text-shadow: 0 0 5px black;
	font-size: 35px;
	display: flex;
	margin: 10px auto;
	width: max-content;
	align-items: center;
	padding: 25px;
	color: white;
	border: none;
	outline: none;
	border-radius: var(--br);
	gap: 20px;
	justify-content: space-between;
}
p.message 
{
	font-family: StoneColdMentalRegular, arial;
	font-size: 20px;
	padding: var(--sp);
	margin: var(--sp);
}
a[href="#top"], a.scroller
{
	color: #ccc;
}
h1, h2, h3, h4, h5, h6, label, a, input
{
	font-family: StoneColdMental;
}
main.home > section > h2 
{
	color: white;
	letter-spacing: 2px;
	font-size: 45px;
}
main.home > section > h1, main.home > section > h2, main.home > section > h4
{
	font-size: var(--flex);
}
main.home > section > div.gem > img {width: calc(var(--flex) * 5);}
main.home h4 
{
	color: white;
	font-size: 40px;
	margin-bottom: calc(var(--sp) * 5);
}
main.home > *
{
	margin: 0;
	height: calc(var(--bookh) / 3);
}
main.home > section:last-child
{
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
main.home 
{
	 margin: calc(var(--sp) * 2) auto;
	 max-width: var(--bookw);
	 min-height: var(--bookh);
	 display: flex;
	 flex-direction: column;
	 justify-content: space-between;
	 box-shadow: 5px 5px 5px white;
	 background-color: black;
	 animation: linear show-announcement 200ms;
}
main.home div.gem > img 
{
	max-width: calc(var(--gem) / 1);
}
main.frame-it
{
	margin: 0 auto;
	margin-top: calc(var(--sp) * 2); 
	text-align: center;
	bottom: 0;
}
main.frame-it > iframe 
{
	width: 90%;
	height: 85vh;
	border-radius: calc(var(--br) / 3);
	margin: 0 auto; 
}

/* TYPOGRAPHY STUFF */
h1 
{
	color: white;
	font-size: var(--hs);
	margin: calc(var(--sp) * 3);
}
h2 
{
	font-size: calc(var(--hs) / 3);
	color: white;
	margin: calc(var(--sp) * 2);
	letter-spacing: 5px;
}
h2.root-heading 
{
	font-size: 40px;
	margin-bottom: calc(var(--sp) * 5);
}
h3
{
	color: white;
	font-size: 30px;
	margin: calc(var(--sp) * 2);
}
h3.form-title 
{
	font-size: 35px;
	font-family: StoneColdMentalRegular;
	text-transform: uppercase;
}
a.main-home-link
{
	transition: text-shadow var(--speed), background-color var(--speed);
}
a.main-home-link:hover > span
{
	text-shadow: 2px 2px 5px white;
}

a.main-home-link > span
{
	text-transform: uppercase;
	letter-spacing: 3px;
	text-shadow: 2px 2px 4px black;
	/* font-size: 45px; */
}
a.main-home-link > span:nth-child(1){color: var(--ruby);}
a.main-home-link > span:nth-child(2){color: var(--emerald);}
a.main-home-link > span:nth-child(3){color: var(--topaz);}
a.main-home-link > span:nth-child(4){color: var(--amethyst);}
/* HOME PAGE STUFF */
section.gems
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: calc(var(--sp) * 2);
}
div.gem > img 
{
	max-width: calc(var(--gem) / 1.5);
}
div.gem
{
	margin: var(--sp);
}
div.gem > a:hover > img
{
	transform: scale(.95);
} 
div.gem > a > img 
{
	transition: transform var(--speed);
	max-width: var(--gem);
}
/* NAVIGATION STUFF */
nav > ul > li > a, nav > ul > li {display: inline-block; margin: 1px;}
nav.nav-1 {background-color: var(--sapphire);}
nav.nav-2 {background-color: var(--ruby);}
nav.nav-3 {background-color: var(--emerald);}
nav.nav-4 {background-color: var(--topaz);}
nav.nav-5 {background-color: var(--amethyst);}
nav 
{
	padding: var(--sp);
}
nav > ul > li > a:hover, nav > ul > li > a.active
{
	color: var(--sapphire);
	background-color: white;
	text-shadow: 1px 1px 4px white;
}
nav > ul > li > a 
{
	padding: var(--sp);
	font-size: 35px;
	text-decoration: none;
	color: white;
	transition: color var(--speed), background-color var(--speed), text-shadow var(--speed);
	border-radius: var(--br);
	font-weight: lighter;
	text-shadow: 1px 1px 4px black;
}
/* SUB NAVIGATION */
nav.sub-nav > ul > li
{
	border-left: 1px solid white;
	border-right: 1px solid white;
}
nav.sub-nav > ul > li > a
{
	font-family: StoneColdMentalRegular;
	margin: 0 var(--sp);
}
/* VIDEO STUFF */
section.video > div > iframe {border-radius: var(--br);}
section.video > p > a:hover 
{
	text-decoration: none;
}
section.video > p > a 
{
	color: var(--sapphire);
	transition: text-decoration var(--speed);
}
main.video-page > h2
{
	/* border-top: 1px solid var(--sapphire); */
	border-top: 1px solid white;
	padding-top: 20px;
	width: 75%;
	margin: 0 auto;
	margin-bottom: 5px;
}
section.video > p > em 
{
	margin-right: 5px;
}
section.video > p
{
	color: white;
	text-align: left;
	font-size: 25px;
	font-family: StoneColdMentalRegular;
	margin: 25px 0;
}
section.video 
{
	width: 75%;
	margin: var(--sp) auto;
}
section.video.youtube > iframe
{
	aspect-ratio: 16 / 9;
  width: 100%;
}
/* FORM STUFF  */
form, input
{
	display: inline-block;
	margin: var(--sp) auto;
}
input 
{
	font-size: 35px;
	padding: var(--sp);
	outline: none;
	border: none;
	border-radius: calc(var(--br) / 3);
}
input[type=submit]
{
	cursor: pointer;
}
/* ALTERNATE HANDLING IDEAS PAGE  */
main#alternates, main.inner {padding-bottom: 20px;}
main.inner img {max-width: 100%;}

main.inner > section > *,
main#alternates > section > *
{
	color: #666;
	font-family: StoneColdMentalRegular;
}
main.inner > section,
main#alternates > section
{
	width: 75%; 
	margin: var(--sp) auto;
	background-color: white;
	padding: var(--sp);
	border-radius: var(--br);
} 
main.inner > section > h3 + p,
main#alternates > section > h3 + p
{
	margin-top: 0;
}
main.inner > section > h2 > span,
main#alternates > section > h2 > span
{
	display: block;
	margin: 20px auto;
}
main.inner > section > h3,
main#alternates > section > h3 
{
	text-align: left;
	font-size: 30px;
	margin-bottom: 0;
	color: var(--sapphire);
}
main.inner > section > p.intro, 
main#alternates > section > p.intro 
{
	font-size: 30px;
}
main.inner > section > p,
main#alternates > section > p
{
	font-weight: lighter;
	text-align: left;
	margin: var(--sp);
	padding: var(--sp);
	font-size: 25px;
} 
main.inner > h1, 
main#alternates > h1 
{
	font-size: 55px;
}
ul.img-download-links > li > a, ul.img-download-links > li
{
	display: inline-block;
}
ul.img-download-links > li > a:hover 
{
	background-color: var(--sapphire);
	color: white;
}
ul.img-download-links > li > a
{
	padding: 10px;
	font-size: 35px;
	border: 1px solid var(--sapphire);
	margin: 10px 0 30px 20px;
	border-radius: 5px;
	text-decoration: none;
	color: var(--sapphire);
	transition: background-color var(--speed), color var(--speed);
}
ul.img-download-links 
{
	/* margin: 20px; */
	/* border: 1px solid red; */
	text-align: left;
}
/*COMING SOON STUFF*/
h1.announcement
{
	padding: 20px 40px;
	width: max-content;
	max-width: 95%;
	border-radius: var(--br);
	margin: 20px auto;
	text-shadow: 0 0 5px black;
	animation: linear show-announcement 200ms;
}
.err > span, .msg > span, .warn > span
{
	display: block;
	margin-bottom: 10px;
}
.err, .msg, .warn
{
	--bgc: red;
	background-color: var(--bgc);
	animation: show-announcement linear calc(var(--speed) / 2);
	color: white;
	width: max-content;
	text-shadow: 0 0 2px black;
	border-radius: var(--br);
	font-family: StoneColdMentalRegular;
	padding: 15px;
	margin: 0 auto;
}
.msg {--bgc: green;}
.warn {--bgc: yellow; color: #333; text-shadow: 0 0 2px white;}
@keyframes show-announcement
{
	0% {opacity: 0; transform: scale(1);}
	50% {transform: scale(1.05);}
	100 {opacity: 1; transform: scale(1)}
}

.color-1 {background-color: var(--sapphire);}
.color-2 {background-color: var(--ruby);}
.color-3 {background-color: var(--emerald);}
.color-4 {background-color: var(--topaz);}
.color-5 {background-color: var(--amethyst);}
/* RESPONSIVE STUFF */
@media (max-width: 860px)
{
	nav > ul > li > a
	{
		font-size: 30px;
	}
	main.frame-it > iframe 
	{
		width: 99%;
	}
	main.inner > section,
	main#alternates > section
	{
		width: 99%;
	}
	
	
}
@media (max-width: 750px)
{
	:root
	{
		--gem: 200px;
		--hs: 65px;
		--bookw: 85vw;
		--bookh: calc(var(--bookw) / .647);
		--flex: 5vmin;
	}
	nav > ul > li > a 
	{
		display: block;
		border-radius: 0;
		padding: calc(var(--sp) / 3);
		letter-spacing: 2px;
	}
	nav > ul > li 
	{
		display: block;
		border-bottom: 1px solid white;
		padding: calc(var(--sp) / 3);
		text-align: left;
	}
	nav.sub-nav > ul > li
	{
		border-top: 1px solid white;
	}
	section.video > div > iframe {border-radius: 0;}
	section.video 
	{
		width: 99%;
		margin: var(--sp) auto;
	}
	main#alternates > section
	{
		border-radius: 0;
		max-width: 99%;
	}
}

@media print 
{
	header {display: none;}
}