/**
Alan Rabago, 
12/1/24. 
This page will help 
my website to look smooth******************/

header {text-align:center;}

#wrapper { background-position:center;
			text-align:center;
			background-color:#4f4a48;
			box-shadow:5px 5px 5px;}

p {font-size:100%;}

header { background-color:black; 
	color:#FFFFFF;
	background-size:100% 100%;
	font-size:200%;
	min-height:200px;}

h1 a {text-decoration:none;}
	
a {color:white;}



body {margin:0;}

.bar ul {overflow:hidden;
	list-style-type:none;
	background-color:#404040;
	margin:0px;
	padding:0px;
	display:inline-flex;	}

.bar a {color:white;
	text-decoration:none;
	padding:15px;
	display:block;
	text-align:center;}


body {margin:0;}

body {background-color:#DFD062;}

h1 {margin-top:0px;
	font-family:sans-serif;
	list-style-type:none;}

p, h2, h3, h4 {color:white;}


table {color:white;}

main {margin-left:20px;
margin-right:20px;}

.bar a:hover {background-color:#1A1A1A}

table {margin:auto;
		margin-bottom:10px;
		border:1px white;
	color:white;}


#art {list-style-type:none;
	text-decoration:none;} 
	
	
th {background-color:#1A1A1A;
	color:white;}

table {border-style:solid;
		border-width:2px;
		border-color:white;}
	
	
	
h3 a:hover {color:grey;}

tr:nth-of-type(even) {background-color:#E0D583;
						color:black;}

#art a:hover {color:grey;}

#form {display:inline-block;}

#form label {color:white;}

h1 a {color:white;
	font-family:sans-serif;
	list-style-type:none;}
	
header {background-color:#cbc5b8;}

form {display:flex;
	flex-direction:column;
	flex-wrap:nowrap;}
	
header {background-image:url(homephoto.jpg);
		margin:auto;}
		

iframe {border:0px;}

/**************Medium Display***************************/
@media (min-width:600px){
	
nav ul {display:flex;}
	
form {display:grid;
	grid-template-columns:12em 1fr;
	width:80%;
	grid-gap:3em;
	max-width:80em;}

}
/******** Large Display *************/

@media (min-width:1024px) { 

header {background-image:url(homephoto.jpg);
		background-size:contain;
		width:80%;
		margin:auto;}
			
			
	
	p {font-size:130%;}
	
	#wrapper {margin:auto;
	width:80%;} 



	#align1, #align2, #align3, #align4, #align5 {display:flex;
		justify-content:space-evenly;
		margin-right:15em;
}
	
	body {margin:0;}


	.bar ul {overflow:hidden;
	list-style-type:none;
	background-color:#404040;
	margin:0px;
	padding:0px;
	display:flex;
	justify-content:center;}

	.bar a {color:white;
	text-decoration:none;
	padding:15px;
	text-align:center;
	display:block;}
	
	
	
	.bar li:hover {background-color:#1A1A1A;
					background-size: 100% 100%;}


	input[type="submit"]
	{grid-column:2/3;}}