body {
	height: 100vh;
	background-image: url("images/stone.jpg");
	background-size: 200px;
	font-family: verdana;
}

hr {
	height: 2px;
	text-align: center;
	color: black;
	background-color: black;
	border-width: 0;
	margin: 2px 10px 20px;
}

nav {
	display: flex;
	height: 110px;
	align-items: center;
	background-image: url("images/creeper.png");
	background-repeat: no-repeat;
	background-size: 70px;
	background-position: left;
	border-radius: 10px;
	justify-content: space-between;
	margin: 10px auto 10px auto;
	font-family: minecraft;
}

.borderbox {
	background-color: #57b64b;
	border-radius: 10px;
	padding-left: 10px
}

nav a {
	margin: 0px 80px;
	text-decoration: none;
	color: black;
	font-size: 50px;
}

nav a:first-child {
	margin-left: 0px;
	padding-left: 80px;
}

nav a.button {
	background-color: #438f45;
	width: 90px;
	height: 90px;;
	border-radius: 5px;
	background-image: url("images/asset3.png");
	background-size: 65px;
	background-repeat: no-repeat;
	margin: 5px;
	background-position: center;
	float: right;
}

nav a.signin {
	color: #603813;
	border-width: 5px;
	padding: 10px 3px;
	border-color: #603813;
	border-radius: 3px;
	font-size: 20px;
	border-style: solid;
	position: absolute;
	right: 70px;
}

#suggestionbar {
	margin-left: auto;
	margin-right: auto;
	display: flexbox;
	display: grid;
	grid-gap: 0px;
	grid-template-columns: auto auto auto auto auto auto auto;
	grid-template-rows: 54px 1px 55px;
	width: 95%;
	align-items: center;
	height: 110px;
	background-color: #B1B2B3;	
	border-radius: 3px;
	justify-content: space-between;
}

#suggestionbar hr {
	grid-column: 1/-1;
}

#suggestionbar p {
	grid-column: 1/-1;
	font-family: verdana;
	color: black;
	font-size: 30px;
	margin: 5px;
}

#suggestionbar a {
	grid-gap: 0;
	background-color: #999A9C;
	height: 30px;
	max-width: 150px;
	border-radius: 10px;
	margin: 10px;
	text-align: center;
	padding: 10px 10px 0px 10px;
	color: black;
	text-decoration: none;
}

#video {
	display: flexbox;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: auto auto auto;
	justify-content: space-between;
	max-width: 100%;
}

#videos a {
	max-width: 350px;
	height: auto;
}

#video img {
	max-width: 100%;
	height: auto;
}

.content {
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	display: grid;
	height: 100%;
	width: 98%;
	grid-template-columns: 80% 20%;
	grid-gap: 10px;
}

#creators {
	background-color: gray;
	max-width: 261.27px;
	height: auto;
	border-radius: 10px;
	background-size: 185px auto;
	background-repeat: no-repeat;
}

#creators img {
	max-width: 100%;
}

video {
	width: 100%;
	height: auto;
	background-color: 999A9C;
}

.videopage {
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	display: grid;
	height: 100%;
	width: 98%;
	grid-template-columns: 70% 30%;
	grid-gap: 10px;
}

#graybackground {
	padding: 10px;
	border-radius: 10px;
	background-color: #999A9C;
	font-size: 25px;
}

#greenbackground {
	padding: 10px;
	border-radius: 10px;
	background-color: #57b64b;
	font-size: 25px;
	height: 100%
}

#whitebackground {
	padding: 10px;
	border-radius: 10px;
	background-color: white;
	font-size: 25px;
}

#darkgreenbackground {
	padding: 10px;
	border-radius: 10px;
	background-color: #438f45;
	font-size: 25px;
	height: 100%;
}

#subtext {
	font-size: 15px;
}

#comment {
	margin: 10px;
	display: grid;
	grid-template-columns: 8% 90%;
	grid-template-rows: 25px 100px;
	height: 125px;
	background-color: #999A9C;
	border-radius: 10px;
	padding: 5px;
}

#comment img {
	height: 60px;
	width: 60px;
	border-radius: 100px;
	grid-row: 1/-1;
}

#user {
	font-size: 15px;
	font-weight: bold;
}

#user #date {
	font-size: 12px;
	font-weight: italic;
	color: #3A3B3C;
	margin-left: 10px;
}

#comment p {
	grid-column: 2/-1;
	font-size: 20px;
	margin: 0px;
	text-align: top;
}

#heading {
	margin-left: 15px
}

#creator {
	font-size: 20px;
	color: #3A3B3C;
}

#subscribers {
	margin-left: 5px;
	font-size: 10px;
	color: #3A3B3C;
}

#vidsuggestions {
	align-items: center;
	height: 100%;
	width: minmax;
}

#vidsuggestions img {
	width: 100%;
	
}

input[type=text] {
	width: 80%;
	height: 50px;
	background-color: #D3D3D3;
	border: none;
	margin-left: 1%;
	border-radius: 5px;
}

input[type=submit] {
	margin-left: 1%;
	width: 10%;
	border: none;
	border-radius: 5px;
	height: 30px;
	background-color: #438f45;
}

label {
	margin-left: 1%;
	font-size: 15px;
	font-style: italic;
}

.comments {
	height: auto;
	display: grid;
	grid-template-rows: auto;
}


@font-face {
	font-family: minecraft;
	src: url(fonts/minecraftevenings.ttf);
}

@media only screen and (max-width: 950px) {
	nav a {
		font-size: 25px;
	}
	#video {
		display: grid;
		grid-template-columns: auto auto;
	}
	#hide {
		display: none;
	}
}

@media only screen and (max-width: 600px) {
	nav a {
		font-size: 25px;
	}
	#video {
		display: grid;
		grid-template-columns: auto;
	}
	#suggestionbar {
		display: none;
	}
		nav a.signin {
		display: none;
	}
}

// FE4543 //