/* This kills built-in defaults to give me control.
 * This doesn't prevent margin collapsing. Does padding collapse too?
 * I forget.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	/*--clr-neon-link: rgb(81, 252, 9);*/
	/*--clr-neon-link: rgb(11,255,1);*/
	--clr-neon-link: rgb(57,255,20);
	/*--clr-neon-link: rgb(11,255,1);*/

	--main-radius: 5px;
	--zero-radius: 0px;
	--main-padding: 5px;
}

.container {
	display: grid;
	height: 100vh;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 0.5fr 2fr 2fr 1fr;
	grid-template-areas:
       		"nav nav nav nav"
		"sidebar main main main"
		"sidebar content1 content2 content3"
		"sidebar footer footer footer";
	grid-gap: 0.2rem;

	}

	
nav {
	background: brown;
	grid-area: nav;
	border-radius: var(--main-radius);
	padding: var(--main-padding);

}

main {
	background: yellow;
	grid-area: main;
	border-radius: var(--main-radius);
	padding: var(--main-padding);

}

#sidebar {
	background: cyan;
	grid-area: sidebar;
	border-radius: var(--main-radius);
	padding: var(--main-padding);

}

#content1 {
	background: purple;
	grid-area: content1;
	border-radius: var(--main-radius);
	padding: var(--main-padding);

}

#content2 {
	background: blue;
	grid-area: content2;
	border-radius: var(--main-radius);
	padding: var(--main-padding);

}

#content3 {
	background: red;
	grid-area: content3;
	border-radius: var(--main-radius);
	padding: var(--main-padding);

}

footer {
	background:#000000;
	color: white;
	grid-area: footer;
	border-radius: var(--main-radius);
	padding: var(--main-padding);

}

/* Maybe put this area in a grid and use repeat(auto-fill) or something like that to
 * make this deal with small widths??
 * or watch video again and see how to get rid of the color splash outside of the items
 * so that they can stack?? Whatever. {8-)}}
 */

.homelinks3 {
	font-size: 1.5rem;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	color: var(--clr-neon-link);
	border: var(--clr-neon-link) 0.125em solid;
	padding: 0.25em 1em;
	border-radius: 0.25em;
	text-shadow: 0 0 0.125em var(--clr-neon-link),
	0 0 0.45em var(--clr-neon-link);
	box-shadow: inset 0 0 0.5em var(--clr-neon-link),
		0 0 0.5em var(--clr-neon-link);
	position: relative;
	transition: background-color 100ms linear;
	

}

.homelinks3::before {
	pointer-events: none;
	content: "";
	position: absolute;
	background: var(--clr-neon-link);
	top: 115%;
	left: 0;
	width: 100%;
	height: 100%;

	transform: perspective(0.8em) rotateX(40deg)
		scale(1, 0.35);
	filter: blur(1em);
	opacity: 0.7;


}

.homelinks3::after {
	content: "";
	position: absolute;
	top 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 0 2em 0.5em var(--clr-neon-link);
	opacity: 0;
	transition: opacity 100ms linear;
}

.homelinks3:hover,
.homelinks3:focus {
	background: var(--clr-neon-link);
	color: #000000;
	text-shadow: none;
}

.homelinks3:hover::before,
.homelinks3:focus::before {
	opacity: 1;
}


.homelinks3:hover::after,
.homelinks3:focus::after {
	opacity: 1;
}

/*a.homelinks3 a:link {color:yellow;text-decoration:none;font-weight:bold;text-align:center;}
a.homelinks3 a:visited {color:green;text-decoration:none;font-weight:bold;text-align:center;}
a.homelinks3 a:focus {color:red;text-decoration:underline;font-weight:bold;}
a.homelinks3 a:hover {color:red;text-decoration:underline;font-weight:bold;}
*/


@media only screen and (max-width: 550px) {

	.container {
		display: grid;
		/*height: 100vh;*/
		grid-template-columns: 1fr;
		grid-template-rows: 0.5fr 1fr 2.2fr 2fr 2fr 2fr 1fr;
		grid-template-areas:
			"nav"
			"sidebar"
			"main"
			"content1"
			"content2"
			"content3"
			"footer";
		grid-gap: 0.2rem;

		}

	nav {
		background: brown;
		grid-area: nav;
		border-radius: var(--zero-radius);
		padding: var(--main-padding);

	}

	main {
		background: yellow;
		grid-area: main;
		border-radius: var(--zero-radius);
		padding: var(--main-padding);

	}

	#sidebar {
		background: cyan;
		grid-area: sidebar;
		border-radius: var(--zero-radius);
		padding: var(--main-padding);

	}

	#content1 {
		background: purple;
		grid-area: content1;
		border-radius: var(--zero-radius);
		padding: var(--main-padding);

	}

	#content2 {
		background: blue;
		grid-area: content2;
		border-radius: var(--zero-radius);
		padding: var(--main-padding);

	}

	#content3 {
		background: red;
		grid-area: content3;
		border-radius: var(--zero-radius);
		padding: var(--main-padding);

	}

	footer {
		background:#000000;
		color: white;
		grid-area: footer;
		border-radius: var(--zero-radius);
		padding: var(--main-padding);

	}

}