@charset "utf-8";

:root[data-theme="light"] {
	--bg-outer:          #444444;
	--bg-container:      #ffffff;
	--border-container:  #bbbbbb;
	--bg-header:         #2a2a2a;
	--color-header-text: #ffffff;
	--bg-sidebar:        #f0f0f0;
	--color-text:        #1a1a1a;
	--color-heading:     #111111;
	--color-link:        #1a6a9a;
	--color-link-hover:  #0d4d73;
	--color-link-active: #c0392b;
	--border-image:      #999999;
}

:root[data-theme="dark"] {
	--bg-outer:          #0a0a0a;
	--bg-container:      #161616;
	--border-container:  #2a2a2a;
	--bg-header:         #0d0d0d;
	--color-header-text: #e0e0e0;
	--bg-sidebar:        #1e1e1e;
	--color-text:        #c8c8c8;
	--color-heading:     #e0e0e0;
	--color-link:        #6ab0d4;
	--color-link-hover:  #8ecce8;
	--color-link-active: #e05252;
	--border-image:      #444444;
}

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	background: var(--bg-outer);
	margin: 7px;
	padding: 0;
	text-align: center;
	color: var(--color-text);
}

.thrColLiqHdr #container {
	width: 80%;
	background: var(--bg-container);
	margin: 0 auto;
	border: 1px solid var(--border-container);
	text-align: left;
}

.thrColLiqHdr #header {
	background: var(--bg-header);
	padding: 0 10px;
	display: flex;
	align-items: center;
}

.thrColLiqHdr #header h1 {
	flex: 1;
	margin: 0;
	padding: 10px 0;
	text-align: center;
	color: var(--color-header-text);
}

#theme-toggle {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

:root[data-theme="light"] #theme-toggle {
	background: rgba(255, 255, 255, 0.55);
	border: none;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
}

:root[data-theme="light"] #theme-toggle:hover {
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.75);
}

:root[data-theme="dark"] #theme-toggle {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
}

:root[data-theme="dark"] #theme-toggle:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.85);
}

.thrColLiqHdr #sidebar1 {
	float: left;
	width: 20%;
	margin: 2em 1em 1em 1em;
	min-width: 170px;
	background: var(--bg-sidebar);
	padding: 15px 0;
}

.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar1 h4 {
	margin-left: 10px;
	margin-right: 10px;
}

.thrColLiqHdr #mainContent {
	margin: 2em 2em 0 24%;
	min-width: 300px;
}

.thrColLiqHdr #footer {
	padding: 0 10px;
	background: var(--bg-header);
	color: var(--color-header-text);
}

.thrColLiqHdr #footer p {
	margin: 0;
	padding: 10px 0;
}

/* Tablet */
@media (max-width: 1023px) {
	.thrColLiqHdr #container { width: 95%; }
}

/* Mobile */
@media (max-width: 799px) {
	.thrColLiqHdr #sidebar1 { float: none; width: 95%; }
	.thrColLiqHdr #mainContent { margin: 2em; }
}

.fltrt {
	float: right;
	margin-left: 8px;
}

.fltlft {
	float: left;
	margin-right: 8px;
}

.clearfloat {
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0;
}

h4, h2, h3 {
	padding-top: 1.5em;
}

h1, h2, h3, h4, h5 {
	color: var(--color-heading);
}

.floatright {
	float: right;
	margin: 0 0 10px 10px;
	border: 1px solid var(--border-image);
	padding: 2px;
}

.interests {
	font-size: 0.75em;
}

.songname {
	font-size: 0.8em;
	vertical-align: top;
}

.bold {
	font-weight: bold;
}

li { margin-top: 0.4em; }

a { text-decoration: none; }
a:link    { color: var(--color-link); }
a:visited { color: var(--color-link); }
a:hover   { color: var(--color-link-hover); }
a:active  { color: var(--color-link-active); }