@layer cool, play;

/*@import "play.css" layer(play);*/
@import "theme.css";
@layer cool {
	* {
		box-sizing: border-box;
	}
	/* MAIN STUFF - Phone first */
	html {
		font-size: 14pt;
		background-color: var(--bg_2);
		font-family: var(--font_main), sans-serif;
		letter-spacing: 0.2pt;
		background:linear-gradient
	}

	/* HEADINGS */
	h1,
	h2,
	h3 {
		font-family: var(--font_h);
	}

	h1 {
		font-size: 1.9em;
		text-align: center;
		text-shadow:
			0.05em 0.05em 1px var(--red),
			-0.05em -0.05em 1px var(--cyan);
		color: var(--fg_1);
		letter-spacing: 0.1em;
		margin: 0;
		padding: 0 0;

	}
	h2 {
		font-size: 1.2em;
		text-align: right;
		color: var(--fg_1);
		letter-spacing: 6px;
	/*text-shadow:
			0.02em 0.02em 1px var(--cyan),
			0.06em 0.06em 0px var(--fg_1);
*/
		padding: 0 0;
		margin:0;
	}
	h3 {
		font-size: 1.3em;
		text-align: left;
		color: var(--fg_1);
		letter-spacing: 4px;
		margin: 0.2em 0 0.1em 0;
		padding: 0 0;
		text-shadow: 1px 1px 0 0 var(--red);
	}

	/* lists */
	ul {
		font-size: 1em;
		color: var(--fg_1);
		text-align: left;
		padding: 0 0 0 0;
		list-style-position: inside;
		line-height: 1.5;
		list-style-type: square;
	}
	li {
		font-size: 1em;
		margin: 0 0 0 0;
		line-height: 1.5;
	}

	li ul {
		font-size: 0.9em;
		color: var(--fg_1);
		text-align: left;
		margin: 0 0 0 0;
		padding: 0 0 0 2em;
		list-style-type: disc;
	}

	body {
		margin: 0 5px 0 5px;
		/*	border: 1vw dashed var(--br_red); */
		border-radius: 0vh;
	}

	p {
		font-size: 1em;
		color: var(--fg_1);
		text-align: justify;
		text-shadow: none;
		margin: 0 0 0 0;
		text-indent: 0.5em;
		line-height: 1.1;
		word-spacing: 0.1em;
	}

	/* PARAGRAPH COOL LETTERS */
	p::first-line {
	}
	h2 + p::first-letter {
		color: var(--cyan);
		font-size: 1.7em;
	}
	p::first-letter {
		color: var(--violet);
		font-size: 1.5em;
		text-transform: capitalize;
		text-overflow: ellipsis;
		font-family: var(--font_h);
	}

	img,
	video {
		display: block;
		margin: 0 auto;
		border: 2px dashed var(--fg_1);
		max-width: 100%;
		margin: 2vw 0 0 10px;
	}

	/* LINKS */
	a {
		color: var(--blue);
		text-decoration: underline;
		font-family: var(--font_h);
	}
	a:hover,
	a:focus {
		color: var(--green);
		text-decoration: none;
	}

	a:active {
		color: var(--red);
	}

	/* LINKS - FILETYPES */
	
	a[href$=".pdf"]::after {
		content: ".pdf";
	}
a[href$=".zip"]::after {
		content: ".zip";
	}
	/* LINKS - NAVIGATION */

	nav {
		text-align: center;
		margin: 10px;
		display: flex;
		align-items: center; /* Centers vertically */
		overflow: auto;
		flex-wrap: wrap;
		justify-content: space-around;
		font-size: 1em;
		border: 3px var(--cyan) dashed;
		border-radius: 5px;
	}
	nav a {
		letter-spacing: 0.2em;
		color: var(--bg_0);
		/*	text-decoration: underline overline var(--red) wavy; */
		background: var(--br_orange);
		margin: 2px 5vw 2px 5vw;
		padding: 1em 0 1em 0;
		min-width: 10em;
		flex: 1;
		text-decoration: none;
		border-radius: 5vw;
		box-shadow: inset 0.4em 0.4em 5px var(--bg_1);*/
		border: 1px solid var(--fg_0);
		text-align: center;
	}
	nav a:hover,
	nav a:focus {
		background: var(--red);
		color: var(--bg_0);
		/*font-size: 1.5em;*/
	}
	nav a:active {
		background: var(--orange);
		color: var(--cyan);
		box-shadow: inset 0.4em 0.4em 5px var(--fg_1);*/
	}
	nav a.pressed {
		background: var(--yellow);
		box-shadow: none;
		color: var(--bg_0);
		text-shadow:
			0.04em 0.04em 0px var(--fg_1),
			-0.06em -0.04em 0px var(--red);
		/*font-size: 1.5em; */
		box-shadow: inset 0.4em 0.4em 5px var(--fg_1);*/
	}


	/* SECTION GRID */
	section{margin:0;}
	article {
	/*	background: var(--bg_1);*/
		background: radial-gradient(var(--bg_0),var(--bg_2));
		padding: 0 10px 5px 10px;
		margin: 0.2em auto 0.2em auto;
		border-radius: 0;
	text-align:center;
		border-right: var(--violet) 2px dotted;
		border-left: var(--cyan) 2px solid;
		border-top: var(--cyan) 2px solid;
		border-bottom: var(--cyan) 2px solid;
flex:1;
max-width:40em;
flex-basis:300px;
	}

section article iframe
{max-width:100%;
padding: 10px 0 10px 0;
}
	.grid-reflow {
		display:flex;
		flex-wrap:wrap;
		/*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-auto-rows: minmax(1px, auto);
		row-gap: 0.5em; */
	}
}

time
{font-size:0.5em; font-family: var(--font_h); color: var(--dim_0); margin:0; text-align:left;
float:left;
}

footer
{
	margin: 10px 15px;
	text-align: center;
}

hr {color:var(--fg_1);}