/* =================
 * GENERAL STYLING
 * ================= */
body {
	background-color: #93789B;
	background-image: url("../img/backgrounds/northern landscape, spring―mirrored.webp");
	font-family: Ubuntu Light, Noto Sans Display, sans-serif;
}

section {
	display: inline-block;
	width: auto; 
	max-width: 600px;
	padding: 0;
	margin: 10px;
}

a {
	color: #3366BB;
}
a:visited {
	color: #91709B;
}
a:hover {
	color: #6698CB;
}

ul {
	margin-top: 5px;
}

p {
	margin-top: 5px;
	margin-left: 10px;
	margin-right: 10px;
}

table {
	text-align: left;
}

td {
	white-space: nowrap;
}


/* =================
 * HAIKU TITLE-BARS
 * ================= */
section h1 {
	background-color: #9D63CC;
	background: linear-gradient(#E5EFFA, 20%, #9D63CC 70%);
	color: #FFFFFF;
	margin-right: 10%;

	display: inline;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	font-size: 15px;
}
section:hover h1 {
	background-color: #4D4596;
	background: linear-gradient(#E5EFFA, 20%, #4D4596 70%);
}


/* Title-bar buttons */
section h1 img {
	padding-left: 5px;
	padding-right: 5px;
	height: 14px;
}

section h1 .zoom {
	content: url("../img/haiku/moz_buried/zoom-inactive.png")
}
section:hover h1 .zoom {
	content: url("../img/haiku/moz_buried/zoom-active.png")
}
section h1 .zoom:active {
	content: url("../img/haiku/moz_buried/zoom-pressed.png")
}

section h1 .close {
	content: url("../img/haiku/moz_buried/close-inactive.png")
}
section:hover h1 .close {
	content: url("../img/haiku/moz_buried/close-active.png")
}
section h1 .close:active {
	content: url("../img/haiku/moz_buried/close-pressed.png")
}

.close-input, .zoom-input {
	visibility: hidden;
	width: 0px;
	height: 0px;
}
.close-input:checked + input + section {
	visibility: hidden;
}

.zoom-input:checked + section {
	position: fixed;
	top: 0;
	left: 0;
	margin: 1px;
}
.zoom-input:checked + section div {
	position: fixed;
	height: 90%;
	width: 99%;
}

/* Section contents */
section div, section nav {
	padding-top: 5px;
	padding: 10px;
	background-color: #C7D0D9; 
	box-shadow: 5px 5px 3px;
	border: 5px ridge #9DB3CC;
}
section nav {
	padding: 0px;
}
section:hover div, section:hover nav {
	border: 5px ridge #9D99CC;
}


/* =================
 * TRACKER AESTHETIC
 * ================= */
.tracker div, .tracker nav {
	padding: 0px;
	background-color: #EEF5FF;
}
.tracker a, .tracker a:visited {
	color: inherit;
	text-decoration: none;
}

/* Tracker-esque tables */
.tracker-list {
	border-collapse: collapse;
}

.tracker-list tr:first-child {
	font-size: 10px;
	text-align: left;
	background-color: #CFD7DF;
	background: linear-gradient(#DEE3E9, 20%, #CFD7DF 70%);
}
.tracker-list tr:first-child th {
	border-right: 2px solid #A9B1B9;
	border-bottom: 2px solid #A9B1B9;
}

.tracker-list td img {
	padding-left: 15px;
	width: 22px;
}

.tracker-list tr td:first-child {
	padding-right: 5px;
}
.tracker-list tr td {
	padding-right: 10px;
}

.sorted {
	padding-left: 2px;
}
.sorted::before {
	content: "🞃 ";
}

/* Tracker-esque icon view */
.tracker-icon div
{
}

.tracker-icon figure
{
	text-align: center;
}

.tracker-icon figure img
{
	width: 32px;
}

/* Faking a Tracker status bar */
.fake-scrollbar {
	font-size: 10px;
	border-collapse: collapse;
	width: 100%;
}
.fake-scrollbar th {
	background-color: #C5CDD5;
	border-right: 2px solid #A9B1B9;
	border-top: 2px solid #A9B1B9;
}
.fake-scrollbar th:first-child {
	width: 60px;
}
.fake-scrollbar th:nth-child(3) {
	background-color: #EFEFEF;
}
.fake-scrollbar th:nth-child(2), .fake-scrollbar th:last-child {
	width: 8px;
	color: #8B9197;
	background-color: #EFEFEF;
	text-align: center;
}


/* =================
 * SPECIFIC SECTIONS
 * ================= */
/* "About" section formatting */
#pri div {
	padding: 10px;
	overflow: auto;
}

#pri div table a {
	color: inherit;
	text-decoration: underline dashed 1px;
}

#avatar {
	float: left;
	padding-right: 10px;
	width: 120px;
}


/* Misc. specific formatting */
#feed img {
	width: 14px;
}


/* List formatting */
h3 {
	font-size: 15px;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
}
h3::before {
	content: "▾ ";
}
ul {
	margin: 0px;
	list-style-type: none;
}