/* ==========================================================================
   Page-Specific Styles for Home (index.html)
   ========================================================================== */

.main_header {
	background-color: var(--theme-primary);
	border-bottom: 2px solid var(--theme-secondary);
}

/* Flexbox container for the main article and aside */
.main-content {
	display: flex;
	flex-wrap: wrap; /* Allows items to wrap on smaller screens */
	gap: 20px;      /* Creates space between the article and aside */
	margin-top: 30px; /* Adds space between this section and the header above */
}

.left_article {
	/* The float is no longer needed */
	flex: 2 1 60%; /* Allows this column to be twice as wide as the other */
	color: var(--text-dark);
	padding-bottom: 15px;
}

.right_article {
	/* The float is no longer needed */
	flex: 1 1 30%; /* The second column */
}

.noDisplay {
	display: none;
}

.container .left_article h3 {
	padding: 0 5%;
	margin-top: 5%;
	color: var(--bg-dark-gray);
	font-weight: bold;
	text-transform: uppercase;
	font-size: 40px;
}

.container .left_article p {
	padding: 0 5%;
	text-align: justify;
	line-height: 24px;
	margin-top: 30px;
	margin-bottom: 15px;
	color: var(--bg-light-gray);
	font-size: 20px;
}

.right_image {
	width: 100%;
	height: auto; /* Ensures the image scales properly */
}

/* Flexbox container for the project columns */
.row {
	width: 100%;
	display: flex;
	flex-wrap: wrap; /* Allows columns to wrap */
	gap: 2%;         /* Creates space between columns */
}

.columns {
	/* The float is no longer needed */
	flex: 1 1 23%; /* Each column takes up roughly a quarter of the space */
	font-size: 20px;
	color: var(--text-light);
	line-height: 24px;
	text-align: justify;
	margin: 15px 0;
	padding: 10px 0;
}

.row .columns p {
	padding: 0 10%;
}

.container .columns h4 {
	text-align: center;
	color: var(--theme-accent);
}

.thumbnail_align {
	text-align: center;
}

.thumbnail {
	width: 100px;
	height: 100px;
	border-radius: 200px;
	margin-left: auto;
}

.thumbnail_white {
	width: 100px;
	height: 100px;
	border-radius: 200px;
	border: 2px solid black;
	margin-left: auto;
}

.social {
	width: 100%;
	background-color: #414141;
	padding: 20px 0;
	clear: both;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}

.social_icon {
	transition: all 0.3s linear;
}

.social_icon:hover {
	opacity: 0.7;
	cursor: pointer;
}

.footer {
	background-color: var(--bg-dark-gray);
}


/* Mobile & Tablet Styles */
@media (max-width: 768px) {
	.left_article,
	.right_article,
	.columns {
		/* This tells flex items to take up the full width */
		flex-basis: 100%;
	}
	.columns {
		margin: 6px 0;
		padding: 0;
	}
	.columns p {
		padding: 0 14px;
	}
}

@media (min-width: 769px) and (max-width: 1000px) {
	.left_article,
	.right_article {
		flex-basis: 100%;
	}
	.columns {
		/* This tells flex items to take up half the width */
		flex-basis: 48%;
	}
	.container .columns p {
		padding: 0 25px;
	}
}