@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');
/* CSS Document */

body {
	padding: 0;
	margin: 0;
	height: 100vh;
	font-size: 1rem;
	background: black;
}

footer {
	padding: 0;
	margin: 0;
}

/*Grid Stuff*/

.container {
	display: grid;
	grid-template-columns: .5fr 1fr 1fr 1fr .5fr;
	grid-template-rows: .2fr 1.5fr 1.5fr 0.8fr;
	grid-template-areas: 
		"sidebar nav nav nav sidebar2"
		"sidebar main main main sidebar2"
		"sidebar content1 content2 content3 sidebar2"
		"footer footer footer footer footer";
	font-family: 'Metal Mania', serif;
	text-align: center;
	height: 100%;
}

/*Nav*/
nav {
	grid-area: nav;
	display: flex;
	align-items: center;
	padding-left: 2rem;
	background:linear-gradient(#262626,#eaeaea,#262626);
}

.navButton {
	display: none;
}

ul {
	display: flex;
	flex-direction: row;
	text-decoration: none;
	list-style: none;
	height: 100%;
	width: 100%;
	align-items: center;
}

li {
	padding-right: 1rem;
}

a {
	text-decoration: none;
}

a:visited {
	color: red;
}

a:hovered{
	color: blue;
} 

.logo {
	color: Red;
	padding-right: 2rem;
	border-right-style: groove;
	border-color: Black;
}

/*Main*/

main {
	background: black;
	grid-area: main;
	display: flex;
	justify-content: center;
	border-style: dashed;
	flex-direction: column;	
	text-align: center;
}

text {
	font-size: 2rem;
	fill:url(#gradient);
}
textpath {
	width: 100%;
}
#florida {
	fill: transparent;
}
#couch {
	padding: 0px;
	margin: 0px;
	background: linear-gradient(#ffffff 0%, #ffffff 15%, #a20b0b 15%,#a20b0b 35%, #ffffff 55%, #a20b0b 55%, #a20b0b 65%, #ffffff 65%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	justify-content: center;
	align-content: center;
	font-size: 3rem;
}

/*Sidebar*/

#sidebar {
	grid-area: sidebar;
	padding: 1vh;
	background: #090D0E;
	transform: scaleX(-1);
}

#sidebar2 {
	grid-area: sidebar2;
	padding: 1vh;
	background: #090D0E;
}

.beard {
	width: 100%;
	height: 100%;
}

#content1 {
	grid-area: content1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}

#content1 > a {
	/*Metal Text font*/
    background:linear-gradient(#262626,#eaeaea,#262626);
    -webkit-background-clip: text;
    color:transparent;
}

#content2 {
	grid-area: content2;
	color: red;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}
#content3 {
	grid-area: content3;
	color: red;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}
footer {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-area: footer;
	color: red;
}

@media only screen and (max-width:500px){
.container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: .2fr 1fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr 1fr;
	grid-template-areas: 
		"nav"
		"sidebar"
		"main"
		"content1"
		"content2"
		"content3"
		"sidebar2"
		"footer";
	}
	
	#sidebar2 {
		display: none;
	}
	
	.homepage
	{
		width: 468px; height: 60px;
	}	
}

@media(min-width: 800px)
{
	.homepage 
		{
			width: 728px; height: 90px;
	}
}