/* 
Title:			Main Body in DOM
Description:	Base tag style
Version:		0.0
Last Mod:		20 Aug 2025
*/
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #222222;
  line-height: 1.5;
  background: #aeaeae; /* Light Gray Color */
}

/* 
Title:			Page Header Tag
Description:	Base tag style
Version:		0.0
Last Mod:		20 Aug 2025
*/
header {
  margin: 0 auto;
  text-align: center;
  padding: 0px 0 0;
  max-width: 1200px;
  background: #aeaeae;
  border: 1px solid #ff0000;
}

/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
main {
  display: grid;
  grid-template-columns: 2fr 1fr; /* left intro, right feeds */
  gap: 20px;
  background: #bfbfbf;
  margin: 0 auto;
  padding: 20px;
  max-width: 1200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  /*border: 1px solid #00ff00;*/
}

nav {
	border: 1px solid #ffffff;
}

footer {
	display: flex;
	margin: 0 auto;
	height: 40px;
	max-width: 1200px;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	/*border: 1px solid #ff0000;*/
}
/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
.auth-links {
  /*position: absolute;*/
  width: 200px;
  height: 20px;
  font-size: 14px;
  float: right;
  border: 1px solid #ff0000;
}


/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
.logo {
  margin: 0 auto;
  width: 100px;
  height: 50px;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  /*border: 1px solid #0000ff;*/
}

/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
nav ul li {
  margin: 0 15px;
}

/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
nav ul li a {
  text-decoration: none;
  padding: 8px 16px;
  color: black;
}



/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
.content-wrapper {
  font-size: 15px;
  border: 3px solid #ff0000;
}

/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
.right-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /*border: 3px solid #00ff00;*/
}

/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
.social-icons {
  display: flex;
  height: 50px;
  justify-content: flex-end;
  gap: 10px;
  border: 3px solid #000000;
}


.feed {
	display: flex;
	height: 200px;
	align-items: center;
	background: #d9d9d9;
	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
.feed-box {
  height: 200px;
  flex: 8;
  text-align: center;
  /*border: 3px solid #000000;*/
}

.feed-lbtn {
  height: 200px;
  flex: 0.5;
  text-align: left;
  /*border: 3px solid #000000;*/
}

.feed-rbtn {
  height: 200px;
  flex: 0.5;
  text-align: right;
  /*border: 3px solid #000000;*/
}

/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
.feed-box h4 {
  margin-bottom: 10px;
}

/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
.project {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
.project img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

/* 
Title:			Unexplored 
Description:	What it does
Version:		0.0
Last Mod:		20 Aug 2025
*/
.project-info h5 {
  margin: 0;
  font-size: 14px;
}
.project-info p {
  margin: 2px 0;
  font-size: 12px;
}



/* Social Icons */
.social-icons {
  display: flex;
  gap: 1em;
  justify-content: flex-end; /* Align right like your image's icons */
  padding: 0.5em;
}

.social-icons a {
  text-decoration: none;
  color: #333; /* Dark icon color */
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #0077b5; /* Example hover color (LinkedIn blue), customize per brand */
}
/*Explanation:
The icons come from Font Awesome (the fab class).

The container uses Flexbox with spacing (gap) and aligns icons right.

Each icon changes color on hover for interactivity and clarity.

aria-label improves accessibility for screen readers.

You can add or remove social links/icons as needed by copying the <a> elements and changing URLs & icons (see Font Awesome Brands).

This keeps your icons scalable, crisp, and easy to customize securely via a CDN.

Related
How can I create sleek, responsive social media icons with hover effects
What free frameworks are best for easily adding social icons securely
How do I customize icon sizes and colors for different platforms
What are the steps to link social icons to actual social media profiles
How can I make my social media icons accessible and screen-reader friendly
*/

/*
.feed-box {
  margin: 0;
  height: 200px;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  padding: 15px;
  gap: 10px;
  flex: 2;
  border-radius: 6px;
  border: 3px solid #000000;
}*/

/* 5 Main Position Values 
	
	1) static (default)
		- Elements follow the normal document flow.
		- You cannot use top, left, right, or bottom.
		
	2) relative
		- The element stays in the normal flow but can be moved using top, left, etc.
		- Movement is relative to its original position.
		
	3) absolute
		- The element is removed from the normal flow.
		- Positioned relative to the nearest positioned ancestor (not static).
		- If no such ancestor exists, it’s positioned relative to the <html> (viewport).

	4) fixed
		- The element is positioned relative to the viewport.
		- It stays in place even when the page is scrolled.
		
	5) sticky
		- The element toggles between relative and fixed depending on scroll position.
		- Useful for sticky headers or sidebars.
*/