*
{
	box-sizing : border-box;
}

/* 1. Light Mode (Default & Manual) */
:root, body[data-theme="light"]
{
    --bg-body      : darkgray;
    --bg-container : white;
    --border-color : lightgray;
    --text-main    : #000;
    --text-page    : brown;
    --text-site    : #888;
}

/* 2. Dark Mode (Manual) */
body[data-theme="dark"]
{
    --bg-body      : #1a1a1a;
    --bg-container : #2d2d2d;
    --border-color : #444;
    --text-main    : #e0e0e0;
    --text-page    : #d2a679;
    --text-site    : #aaa;
}

/* 3. Automatic System Preference */
/* Only triggers if NO manual theme is set */
@media (prefers-color-scheme: dark)
{
    body:not([data-theme]) {
        --bg-body      : #1a1a1a;
        --bg-container : #2d2d2d;
        --border-color : #444;
        --text-main    : #e0e0e0;
        --text-page    : #d2a679;
        --text-site    : #aaa;
    }
}

/* 2. Base Styles */

body
{
	background-color : var(--bg-body);
	color            : var(--text-main);
	font-family      : "Helvetica Neue", Arial, sans-serif;
	margin           : 0;
	padding          : 0;
}

#container
{
	background-color : var(--bg-container);
	margin           : 0 auto;
	max-width        : 750px;
	padding          : 0.1px 10px;
	width            : 95%;
}

#content
{
	background-color : var(--bg-container);
	margin           : 0 auto;
	width            : 100%;
}

/* 3. Table Styles */

#home
{
	border-collapse : separate;
	border-left     : 10px solid var(--border-color);
	border-spacing  : 0;
	border-top      : 10px solid var(--border-color);
	table-layout    : fixed;
	width           : 100%;
}

#home td, #home th
{
	border-bottom  : 10px solid var(--border-color);
	border-right   : 10px solid var(--border-color);
	padding        : 0px;
	vertical-align : top;
}

/* Shrink the left column */
/* Target the first cell (left) */

#home tr:first-child td:nth-child(1)
{
	width : 40%;
}

/* Target the second cell (right) */

#home tr:first-child td:nth-child(2)
{
	width : 60%;
}

#home td img
{
	display : block;
	height  : 100%;
	width   : 100%;
}

/* 4. Flex Layout */

.flex-wrapper
{
	align-items     : center; /* Centered for the button */
	display         : flex;
	gap             : 10px;
	justify-content : space-between;
	margin-bottom   : 10px;
	margin-top      : 10px;
}

.flex-left
{
	width : 40%;
}

.flex-right
{
	width : 60%;
}

/* 5. Typography & Button */

.page-name, .site-name
{
	flex      : 1;
	font-size : 24px;
}

.site-name
{
	color        : var(--text-site);
	font-variant : small-caps;
	white-space  : nowrap;
}

.text-left
{
	text-align : left;
}

.page-name
{
	color      : var(--text-page);
	text-align : right;
}

#theme-toggle
{
	background    : var(--bg-container);
	border        : 1px solid var(--border-color);
	border-radius : 15px;
	cursor        : pointer;
	font-size     : 1rem;
	padding       : 2px 10px;
}

/* 6. Mobile Responsiveness */

@media (max-width: 600px)
{
	.flex-wrapper
	{
		flex-direction : column;
		font-size      : 120%;
		text-align     : center;
	}

	.flex-left, .flex-right
	{
		width : 100%;
	}

	.page-name
	{
		text-align : center;
	}

	/* Stack images on small screens */

	#home td
	{
		display : block;
		width   : 100% !important;
	}
}