@font-face {
	font-family: 'Charcoal';
	src: url('fonts/charcoal.ttf') format('truetype'); /* Replace with the actual path to the font file */
}

html, body {
	height: 100%; /* Ensure the parent elements are 100% height */
	margin: 0; /* Remove any default margins */
}
table {
	width: 100%; /* Table spans the full width of the screen */
	height: 100%; /* Table takes up the full height of the screen */
	border-collapse: collapse; /* Ensures no space between borders */
}
td {
	padding: 10px; /* Adds some padding inside the cells */
}
.col-left, .col-right {
	width: 10%; /* Each column takes 10% of the screen width */
	background-image: url('img/index_background.png'); /* Use the specified background image */
	background-size: auto; /* Keep the image at its original size */
	background-repeat: repeat; /* Repeat the image throughout the column */
	background-position: center; /* Center the repeated tiles */
	height: 100%; /* Columns take 100% of the height */
}
.col1 {
	width: 15%; /* Adjust the width of the first column */
	background-color: #C0C0C0; /* Matches the gray color in the image */
	border-right: 2px solid black; /* Adds a black border to the right side */
	vertical-align: top; /* Align content to the top */
	text-align: left; /* Left-align content in the first column */
	font-family: 'Charcoal', sans-serif; /* Set column font to Charcoal */
}
.col2 {
	width: 60%; /* Adjust the width of the main content column */
	background-color: white; /* White background for the second column */
	vertical-align: top; /* Align content to the top */
	padding: 20px; /* Add padding to the second column */
	text-align: center; /* Center-align all text in the second column */
}
img {
	max-width: 100%; /* Ensure the image fits within the column */
	height: auto; /* Maintain aspect ratio */
}
.list-item {
	display: block; /* Treat links as block elements */
	padding: 10px; /* Add padding to list items */
	background-color: #C0C0C0; /* Match column background */
	text-decoration: none; /* Remove underline from links */
	color: black; /* Black font color */
	font-size: 16px; /* Font size for list items */
	border-bottom: 2px solid black; /* Black separator */
	transition: background-color 0.3s ease; /* Smooth hover transition */
	font-family: 'Charcoal', sans-serif; /* Set font to Charcoal */
	font-weight: bold; /* Make the font bold */
}
.list-item:hover {
	background-color: #A9A9A9; /* Darker gray on hover */
}
.welcome-title {
	font-family: 'Charcoal', sans-serif; /* Use the same font as the list items */
	font-weight: bold; /* Make the title bold */
	font-size: 32px; /* Increase the font size for the title */
	margin-top: 20px; /* Add some spacing above the title */
	margin-bottom: 10px; /* Add some spacing below the title */
	color: black; /* Set the title color */
}
.welcome-paragraph {
	font-family: 'Charcoal', sans-serif; /* Use the same font as the list items */
	font-size: 16px; /* Adjust the font size for the paragraph */
	line-height: 1.5; /* Increase line spacing for better readability */
	color: black; /* Set the paragraph color */
	margin: 0; /* Remove extra margins */
}
.gif-credit {
	font-family: 'Charcoal', sans-serif; /* Match the site's font */
	font-size: 12px; /* Small text size */
	color: gray; /* Subtle text color */
	margin-top: 5px; /* Space between the gif and the text */
}
.miscellaneous-link, .dribbble-link {
	color: blue; /* Standard link color */
	text-decoration: underline; /* Underline for links */
	font-weight: bold; /* Make the link bold */
}
.miscellaneous-link:hover, .dribbble-link:hover {
	color: darkblue; /* Change color on hover */
	text-decoration: none; /* Remove underline on hover */
}
.welcome-gif {
	max-width: 100%; /* Ensure the GIF scales to fit */
	height: auto; /* Maintain aspect ratio */
	margin: 10px 0; /* Add some spacing around the GIF */
}