/*body{
	margin: 0;
	padding:0;
	background-color: #f423;
	font-family: Arial, sans-serif;
	
	
}
	main{
	padding: 20px;
	}

	header{
	padding:10px 0px;
	background: #333;
	color: #fff;
	align-items: center;
	display: flex;
	text-align: center;
	
	}
	

	
	nav ul{
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	
	}
	nav ul li {
	display: inline;
	margin: 0 15px;
	}
	nav ul li a{
	color: white;
	text-decoration: none;
	
	}
	.logo{
	width: 50px;
	margin-right: 20px;
	height: auto;
	}
	
	.container{
		max-width: 1000px;
		margin: 20px auto;
		padding: 20px;
		background: white;
		border-radius: 5px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	}
	.gallery{
	display: grid;
	
	gap: 15px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		
	}
	
	.gallery img{
	height: auto;
	width: 200px;
	margin: 5px;
	border-radius: 5px;
	border-radius: 5px;
	}
	
	.social-icon{
	width: 50px;
	height: 50px;	
	}

*/
		
body { /*sets style for the entire body */
    font-family: Arial, sans-serif; /* font style */ 
    margin: 0; /* removes margin */ 
    padding: 0; /* removes padding */ 
}

header { /* sets style for header*/ 
    background: #002244; /* background color*/ 
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;/* sets the navigation texts in center */ 
}

.logo img{
	width: 50px;
	margin-right: 20px;
	height: auto;
	}
	

nav ul { /* navigation styles*/ 
    list-style: none; /* removes bullet points*/ 
    display: flex;
    margin: 0;
    padding: 0;
}
ul {
    margin: 20px 0; /* margin above and below lists */
}
h1, h2 {
    color: #333; /* text color for headings */
}

nav ul li {
    margin-right: 20px;
	display: inline; /*sets list items in line */ 
}

nav ul li a {
    color: white; /* color for links */ 
    text-decoration: none; /* removes underline from links */ 
}
li a:hover {
    background-color:green;
}
    

/* style for the active link*/ 
nav ul li a.active {
	color: green;
	font-size: 20px;
	font-weight: bold;
	
}

/* style for the main content page  */ 
main {
    padding: 20px;
}

/* sets style for images in gallery class */ 
.gallery img {
	height: auto;
	max-width: 100%;
	margin: 10px 0;
	
}

/*.gallery{
	display: grid;
	
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
*/

		
/* sets style for images in social-icon class */ 	
.social-icon{
	width: 50px;
	height: 50px;
	display: grid;	
	}

/* sets style for images in contact-info class */ 	
.contact-info{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

/* style rule for main class */
.main{
    background-image:url(background.jpg);
}

/* sets style for footer */ 
footer {
    background: #002244;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}