/* i learned how to do this by googling " how to put side comments in html" this is for my own refrences so i do not get confused also i just now went to read the requirements for the final project and i hope these comments help! */
h1	{ 	font-size: 24;
	text-align: center;		/* Name of the webbysite dudley is supposed to be an inside joke with me and my brother*/
	color: #ffffff;
	display:block;
	padding: 32px 12px;			
	background-color: #000000;	
	margin: 0;
	font-size: 24;	
}
hr	  {		
			display:block; /* making hr look pretty */
			margin:0;
			border-color: #ff0000;
}
body { 
		background-color: #000000; /* color */
}
nav	 { 
		text-decoration: none; /* gets rid of underline and stupid color */
}
a	 { text-decoration: none;
		color: #660000;
}
a:hover	{ color: #ffffff; /*  hover effect for the links*/
}
#navbar	{ overflow: hidden;
		background-color: #000000; /* Controls color of bar */
		text-align: center;
}
#navbar a { 
			display: block;			/* Navigation bar style for link  */
			padding: 1.250em 1em; 
			text-decoration: none;
			font-size: 1.125em;
			display:inline;	
			margin: 0;
}
#wrapper  { 
		width:62%; 
		display: block; 
		text-align: center; 
		padding: 1% 1%; 
		background-color: #111111;
		position: absolute;  
		margin-left: 17%; 
}
h2		{
			font-family:sans-serif;	 /* Text font control */
			color: #ff0000;
			font-size: 1.5em;	
}
h3		{ color: #ffffff;
		font-size: 1.5em;
}
p		{ 	color: #ffffff;
}
img 	{ 		
			display: flex;	
			flex-wrap: wrap;
			border-color: #ffffff;	/* first attempt at a "media query" not going to delete because I dont know what issues this will cause in my webbysite*/
			display: inline;
			border: #ffffff solid 1px;
}
main 	{	color: #ffffff;
			
}	
#form	{ text-align: left;			 /* move the form to the left instead of the div */
		margin: 1%;
}
h4		{ font-family:sans-serif;	 
			font-size: 1.5em;	
			color: #ffffff;
}
h5		{	font-family:sans-serif;
			font-size: 1.5em;		/* Got it working! */
			color: #ffffff;	
}
h6		{
			font-family:sans-serif;	 
			font-size: 1.5em;	
			color: #ffffff;
}
footer	{ font-family:sans-serif;
			position: fixed;
			font-size: 1.5em;
			bottom: 0%;
			width: 99%;
			text-align: left;
}
.resp { width: 50%;
		maxwidth: 250%;
		height: auto;
}
@media screen (min-width: 320px) { body { background-color: #000000; }
}
table { 
	border:1px solid #ffffff;
	font-family:sans-serif;
	color: #ffffff;
}
th	  {
	border:1px solid #ffffff;
	font-family:sans-serif;
	color: #ffffff;
}
td	  {
	border:1px solid #ffffff;
	font-family:sans-serif;
	color: #ffffff;
}
p	 { font-size: 1.2em;
}
/* I really wanted to go with a darkweb asthetic with weird but funny non-context images and a funny video to not make it boring. At a cost of points this website alone wants me to make more, never thought i would like coding but here i am!*/