@font-face {
	font-family: 'PP Neue Montreal';
	src: url('fonts/PPNeueMontreal-Bold.otf') format('opentype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Hack';
	src: url('fonts/Hack/Hack-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Love Letter';
	src: url('fonts/LoveLetterTW.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

html,
body {
	font-family: Tahoma;
	font-size: 1rem;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: grayscale;
}

:root {
	--clr-desktop-bg: #3b6ea5;
	--clr-desktop-bg-accent: #467bb4;
	--clr-taskbar-bg: #d4d3c6;
	--clr-text-white: #ddfeff;
	--clr-text-black: #080707;
	--clr-border-outer: #aba6a3;
	--clr-blue-accent: #1e40fe;
}

body {
	overflow-y: hidden;
}

.desktop {
	position: absolute;
	width: 100vw;
	background: var(--clr-desktop-bg);
	height: 100vh;
	overflow-y: hidden;
}

.container-desktop-icons {
	z-index: 2;
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	column-gap: 0.5rem;
	row-gap: 0.25rem;
	margin-top: 0.25rem;
	margin-left: 0.25rem;
	width: fit-content;
	align-items: center;
	max-height: 95vh;
}

.container-desktop-icons .desktop-link {
	text-align: center;
	padding: 0.5rem 0;
	border: 2px dotted transparent;
	border-radius: 2px;
	text-decoration: none;
}

.container-desktop-icons .desktop-link:hover {
	background: var(--clr-desktop-bg-accent);
	cursor: default;
}

.container-desktop-icons .desktop-link:active {
	background: var(--clr-desktop-bg-accent);
	border: 2px dotted var(--clr-desktop-bg);
}

.container-desktop-icons .desktop-link-squish {
	padding: 1px 0;
}

.container-desktop-icons .desktop-icon {
	height: 2rem;
	margin-bottom: 0.25rem;
}

.container-desktop-icons p {
	font-size: 0.75rem;
	color: var(--clr-text-white);
	margin: 0;
	width: 5.5rem;
}

.window-container {
	position: relative;
	height: 95vh;
}

.window {
	background-color: #fffeff;
	color: var(--clr-text-black);
	border: 0.25rem;
	border-color: var(--clr-border-outer);
	border-style: outset;
	height: 75vh;
	width: 80vw;
	max-width: 60rem;
	position: absolute;
	bottom: 6svh;
	right: 4vh;
	display: none;
}

.window input[type='radio'] {
	display: none;
}

#window-mydocuments:has(> #tab-mydocuments:checked),
#window-mycomputer:has(> #tab-mycomputer:checked) {
	display: block;
}

.window > #window-mycomputer {
	z-index: 3;
}

.window > #window-mydocuments {
	z-index: 4;
}

.window-header {
	display: flex;
	background: linear-gradient(90deg, #051b5e, #a2cbee);
	padding: 0.15rem;
	color: var(--clr-text-white);
}

.window-header-title {
	display: flex;
	align-items: center;
}

.window-header-icon {
	height: 16px;
}

.window h1,
.window-full h1 {
	font-size: 0.75rem;
	display: inline-flex;
	margin: 0 0.25rem;
}

.window-header ul {
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
	display: inline-flex;
	margin-left: auto;
}

.window-header li {
	border: 2px outset var(--clr-border-outer);
	border-radius: 2px;
	background: var(--clr-taskbar-bg);
}

.window-ctrl > a {
	display: flex;
	padding-top: 0.1rem;
	padding-bottom: 0.05rem;
}

.window-ctrl:hover {
	border-style: inset;
	cursor: default;
}

.window-ctrl:active {
	background: #b2adaa;
}

.window-content-grid {
	display: grid;
	font-size: 0.75rem;
	max-height: 72vh;
	grid-template-rows: repeat(3, 1.7rem) 1fr;
}

.window-content-grid .window-toolbar {
	background: var(--clr-taskbar-bg);
	display: flex;
	align-items: center;
	border-width: 3px 1px 1px 1px;
	border-color: #d6dfdb #bdbcb9 #bdbcb9 #bdbcb9;
	border-style: outset solid solid solid;
}

.window-content-grid > .window-toolbar ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
}

.window-content-grid > .window-toolbar li > a {
	text-decoration: none;
	color: var(--clr-text-black);
	border: 1px solid transparent;
	padding: 0 0.5rem 0.1rem 0.5rem;
	display: inline-flex;
	align-items: center;
}

.window-content-grid > .window-toolbar li > a:hover {
	border: 1px inset var(--clr-border-outer);
}

.window-content-grid > .window-toolbar li > a:active {
	background: #b2adaa;
}

.window-content-grid > .window-toolbar > a:has(.start-dark) {
	margin-left: auto;
}

.window-content-grid .start-dark {
	height: 0.9rem;
	background-color: black;
	padding: 0 0.5rem;
	border: 2px outset var(--clr-border-outer);
}
.window-content-grid .start-dark:hover {
	border: 2px inset var(--clr-border-outer);
}
.window-content-grid .start-dark:active {
	filter: grayscale(50%);
}

.window-content-grid > .window-toolbar li > a.navigate-item-squish {
	padding-left: 0.1rem;
	padding-right: 0.1rem;
}

.window-content-grid .separator-lowkey {
	color: #aeaba6;
	padding-bottom: 2px;
}
.window-content-grid .separator-lowkey::after {
	content: '|';
	position: relative;
	left: -3px;
	color: #e2ded9;
}

.window-content-grid .navigate-text-icon {
	margin-right: 0.15rem;
}

.window-content-grid .window-addressbar > ul {
	width: 100%;
}

.window-content-grid .window-addressbar .addressbar-text-item {
	margin: 0 0.25rem;
}

.window-content-grid .window-addressbar .addressbar-full {
	display: flex;
	align-items: center;
	width: 100%;
}

.window-content-grid .window-addressbar .search-field {
	width: 100%;
}

.window-content-grid .window-addressbar input:focus {
	outline: 1px solid var(--clr-desktop-bg);
}

.window-content-grid .window-addressbar .addressbar-go {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--clr-text-black);
	position: relative;
	right: 0;
	padding: 0 0.5rem;
	border: 2px outset transparent;
}
.window-content-grid .addressbar-go:hover {
	border: 2px inset var(--clr-border-outer);
}
.window-content-grid .addressbar-go:active {
	background: var(--clr-border-outer);
}

.window-content-inside {
	overflow-y: scroll;
	font-size: 0.9rem;
}

.window-content-inside .window-content-banner {
	width: 100%;
	max-width: 15rem;
}

.window-inside-leftpane {
	float: left;
	margin: 0 1rem 0.5rem 0;
	max-width: 30%;
	padding-right: 0.5rem;
	font-style: italic;
}

.window-inside-leftpane h1 {
	font-size: 1.25rem;
	font-style: normal;
	border-bottom: 2px solid black;
	padding-bottom: 0.25rem;
	display: block;
}

.window-inside-leftpane p {
	margin: 0.5rem 0 0.5rem 0.5rem;
}

.window-inside-leftpane ul {
	list-style: square;
	list-style-position: inside;
	padding: 0.5rem;
	margin: 0;
}

.window-inside-rightpane {
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
}

.window-inside-rightpane > .window-inside-rightpane-links {
	display: flex;
	flex-wrap: wrap;
	height: 100%;
	justify-content: center;
}

.window-inside-rightpane > .window-inside-rightpane-links figure {
	max-width: 3rem;
	text-align: center;
}

.window-inside-devlog {
	padding: 1rem;
}

.window-inside-devlog h3 {
	font-size: 0.9rem;
	text-decoration: underline;
}

.taskbar {
	display: flex;
	position: fixed;
	width: 100vw;
	z-index: 15;
	bottom: 0;
	background: var(--clr-taskbar-bg);
	border-top: 2px outset #eff8f1;
}

.taskbar * {
	color: var(--clr-text-black);
}

.taskbar-start {
	padding: 0 0.25rem;
	margin: 0.1rem 0.25rem 0.1rem 0.1rem;
	font-weight: bolder;
}

.taskbar-start:active {
	background: #b2adaa;
}

.taskbar .logo-start {
	height: 1.5rem;
}

.taskbar > a {
	text-decoration: none;
	display: flex;
	align-items: center;
}

.taskbar > a:hover {
	border-style: inset;
	cursor: default;
}

.taskbar p {
	margin: 0;
	font-size: 0.8rem;
}

.taskbar .outer-border {
	border: 2px outset var(--clr-border-outer);
	border-radius: 2px;
}

.taskbar-icon {
	height: 1.2rem;
	margin: 0 0.2rem;
}

.taskbar-quicklaunch {
	display: flex;
	align-items: center;
	border-style: solid;
	border-color: #b2adaa;
	border-width: 0 1px;
}

.taskbar-quicklaunch > a {
	border: 1px solid transparent;
}

.taskbar-quicklaunch > a:last-child {
	margin-right: 0.1rem;
}

.taskbar-quicklaunch > a:hover {
	border: 1px inset var(--clr-border-outer);
	cursor: default;
}

.taskbar-quicklaunch > a:active {
	background: #b2adaa;
}

.separator {
	padding-bottom: 2px;
	margin-bottom: 5px;
	font-weight: bolder;
	color: #d7d2ce;
	filter: drop-shadow(2px 2px 1px #b5b0ad);
	align-self: center;
}

.taskbar-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(7rem, 10rem));
	gap: 2px;
	margin-left: 0.25rem;
}

body:has(.tab-additional) .taskbar-tabs {
	grid-template-columns: repeat(3, minmax(7rem, 10rem));
}

.taskbar-tabs > label,
.taskbar-tabs > a {
	text-decoration: none;
	display: flex;
	align-items: center;
	border: 2px outset var(--clr-border-outer);
	padding: 0.1rem 0.25rem 0.1rem 0;
	margin: 1px 0;
}

.taskbar-tabs > label:hover,
.taskbar-tabs > a:hover {
	border-style: inset;
	cursor: default;
}

.taskbar-tabs > label:active,
.taskbar-tabs > a:active {
	background: #b2adaa;
	cursor: default;
}

.taskbar-tabs span {
	font-size: 0.75rem;
	text-wrap: nowrap;
	cursor: default;
}

/* I CANNOT BELIEVE THIS WORKS!!! FINALLY!!! Didn't know you could put a selector after the parent:has... */
body:has(input[type='radio']#tab-mycomputer:checked) #taskbar-tab-mycomputer {
	font-weight: bolder;
	border-style: inset;
	background: #e8e8e4;
}

body:has(input[type='radio']#tab-mydocuments:checked) #taskbar-tab-mydocuments {
	font-weight: bolder;
	border-style: inset;
	background: #e8e8e4;
}

a.taskbar-tab-focused {
	font-weight: bolder;
	border-style: inset;
	background: #e8e8e4;
}

#body-blog {
	background-image: url(images/background-nightsky.gif);
}

.page-container {
	overflow-y: scroll;
	height: 90svh;
}

.page {
	min-height: 85vh;
	font-size: 1.3rem;
	padding: 0.5rem;
	color: var(--clr-text-white);
	scroll-behavior: smooth;
	max-width: 900px;
	margin: 0 auto;
	padding-bottom: 10rem;
}

.page details.page-nav {
	position: fixed;
	left: 0px;
	margin-left: 0.5rem;
}

.page details.page-nav summary {
	cursor: pointer;
	padding: 0 0.5rem;
}

.page details.page-nav summary:hover {
	background: var(--clr-blue-accent);
}

.page details.page-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
}

.page details.page-nav ul > li {
	padding: 0.25rem 2rem;
	background: var(--clr-text-black);
}

.page details.page-nav ul > li:hover {
	background: var(--clr-blue-accent);
}

.page details.page-nav a {
	color: inherit;
	text-decoration-color: var(--clr-blue-accent);
}

.page h1 {
	font: lighter 2rem 'Love Letter';
	background-color: blue;
	padding: 0.25rem;
	border-radius: 1rem;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	display: block;
	border-top: 2px solid var(--clr-text-black);
	border-left: 4px solid var(--clr-text-black);
	color: var(--clr-text-black);
}

.page-blog {
	font-family: 'Hack';
	background: rgba(0, 1, 125, 0.6);
	border: 2px solid black;
}

.page-blog h2 {
	font: lighter 2rem 'Love Letter';
	padding-bottom: 0.5rem;
	border-bottom: 0.2rem solid var(--clr-text-black);
	margin: 0.5rem 0;
}

.page-blog h3 {
	font: lighter 1.5rem 'Love Letter';
	margin: 0.25rem 0;
	background: rgba(0, 1, 135, 0.7);
}

.page .blog-entry p {
	font-size: 1rem;
}

.page .blog-entry p > a {
	color: inherit;
	transition: 0.5s ease-in-out;
}

.page .blog-entry p > a:hover {
	color: var(--clr-blue-accent);
	transition: 0.3s ease-in-out;
}

.page-homelink {
	width: 2rem;
	position: absolute;
	bottom: 2.5rem;
	right: 1.5rem;
	background: var(--clr-blue-accent);
	padding: 0.2rem;
	border-radius: 0.5rem;
}

@media (max-width: 625px) {
	.window-navigatebar {
		display: none !important;
	}
	.window-content-grid {
		grid-template-rows: repeat(2, 1.7rem) 1fr;
	}
}

@media (max-width: 540px) {
	.container-desktop-icons {
		display: none;
	}
	.window {
		height: 85vh;
	}
	.window-content-grid {
		max-height: 81vh;
	}
}

@media (max-width: 425px) {
	.taskbar-start {
		display: none !important;
	}
	.taskbar-quicklaunch {
		display: none;
	}
}

@media (max-width: 415px) {
	.window-toolbar {
		display: none !important;
	}
	.window-content-grid {
		grid-template-rows: 1fr;
	}

	.window-inside-leftpane {
		float: none;
		max-width: 100%;
		margin-right: 0;
		margin-bottom: 0;
	}
}