* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--trans-dur: 0.3s;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--boot-bar-width: clamp(0.8rem, 2.4vw, 1.1rem);
	--boot-bar-gap: 2px;
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body,
button {
	font: 1em/1.5 Verdana, sans-serif;
}
body {
	background-color: hsl(223,10%,10%);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: hidden;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
body.is-loading {
	overflow: hidden;
}
.boot-loader {
	align-items: center;
	background: #000;
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	transition: opacity 260ms ease, visibility 260ms ease;
	visibility: visible;
	z-index: 5000;
}
.booted .boot-loader {
	display: none;
}
.boot-loader.is-hidden {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}
.boot-loader__content {
	width: min(92vw, 24rem);
}
.boot-logo {
	color: #fff;
	margin: 0 auto 1rem;
	text-align: left;
	width: 100%;
}
.boot-logo p {
	line-height: 1;
	margin: 0;
}
.boot-logo__top {
	font-size: clamp(1rem, 3vw, 1.2rem);
	font-weight: 300;
}
.boot-logo__top::after {
	content: "\00a9";
	font-size: 0.62em;
	margin-left: 2px;
	position: relative;
	top: -0.35em;
}
.boot-logo__mid {
	font-size: clamp(2.6rem, 10vw, 4rem);
	font-weight: 700;
}
.boot-logo__mid span {
	color: #ff6821;
	font-size: clamp(1.2rem, 4vw, 1.9rem);
	vertical-align: top;
}
.boot-logo__bottom {
	font-size: clamp(1.7rem, 6vw, 2.7rem);
	font-weight: 300;
}
.boot-progress {
	border: 2px solid #b2b2b2;
	border-radius: 7px;
	height: clamp(1rem, 2.6vw, 1.25rem);
	overflow: hidden;
	padding: 2px 1px;
	position: relative;
	width: 100%;
}
.boot-progress__bar {
	animation: bootSlide 2s linear infinite;
	background: linear-gradient(to bottom, #2838c7 0%, #5979ef 17%, #869ef3 32%, #869ef3 45%, #5979ef 59%, #2838c7 100%);
	display: block;
	height: 100%;
	left: -14%;
	position: absolute;
	top: 0;
	transform: translateX(calc(var(--offset, 0) * (var(--boot-bar-width) + var(--boot-bar-gap))));
	width: var(--boot-bar-width);
}
.boot-progress__bar:nth-child(1) {
	--offset: 0;
}
.boot-progress__bar:nth-child(2) {
	--offset: 1;
}
.boot-progress__bar:nth-child(3) {
	--offset: 2;
}
header,
footer {
	background-color: hsl(227,73%,35%);
	color: hsl(0,0%,100%);
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 4.4rem;
	position: absolute;
	z-index: 10;
}
header {
	font-family: Arial, sans-serif;
	font-size: 1.45rem;
	justify-content: space-between;
	line-height: 1;
	margin-bottom: 0.2rem;
	padding: 0 1.25rem;
	top: 0;
}
footer {
	bottom: 0;
	justify-content: flex-start;
	padding: 0.35rem 0.55rem;
}
.taskbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	width: 100%;
}
.taskbar__button {
	max-width: min(12rem, 46vw);
	min-width: 6.2rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.taskbar__button[hidden] {
	display: none !important;
}
.taskbar__credit {
	color: hsl(0,0%,100%);
	font-size: 0.78rem;
	margin-left: auto;
	opacity: 0.85;
	padding-right: 0.45rem;
	white-space: nowrap;
}
.site-title {
	font-size: 1em;
	font-weight: 400;
	line-height: inherit;
	text-transform: lowercase;
}
.site-tagline {
	font-size: 0.62em;
	opacity: 0.85;
}
header:after {
	background-image: linear-gradient(90deg,hsl(220,50%,47%),hsl(215,77%,91%),hsl(220,50%,47%));
	content: "";
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 0.2rem;
}
main {
	background-image: linear-gradient(135deg,hsl(214,64%,67%) 0%,hsl(221,67%,60%) 52%,hsl(227,61%,54%) 100%);
	background-size: 140% 140%;
	color: hsl(0,0%,100%);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.9rem;
	margin: 0;
	padding: 5.2rem 0.9rem 5rem;
	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	animation: surfaceShift 18s ease-in-out infinite alternate;
}
.desktop-content {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1.7rem;
	justify-content: center;
	width: 100%;
}
.btn-grid {
	align-items: center;
	display: flex;
	gap: 0.9rem;
	justify-content: center;
}
body.notes-open .desktop-content {
	display: none;
}
body.cv-open .desktop-content {
	display: none;
}
.btn-block {
	width: 9.5em;
	font-size: 1rem;
	text-align: center;
	opacity: 0;
	transform: translateY(10px);
	animation: blockEnter 480ms var(--ease-out) forwards;
	transition: color 0.2s ease;
}
.btn-block:nth-of-type(1) { animation-delay: 80ms; }
.btn-block:nth-of-type(2) { animation-delay: 150ms; }
.btn-block:nth-of-type(3) { animation-delay: 220ms; }
.btn-block:nth-of-type(4) { animation-delay: 290ms; }
.btn-link {
	color: inherit;
	display: block;
	text-decoration: none;
	outline: none;
}
.icon-btn {
	background-color: hsl(0,0%,50%);
	border: 0;
	border-radius: 0.5em;
	box-shadow:
		-0.25em -0.25em 0.25em hsla(0,0%,0%,0.5) inset,
		0 0.3em 0.7em hsla(222,45%,8%,0.24);
	cursor: pointer;
	display: flex;
	margin: 0 auto 0.25em auto;
	outline: transparent;
	position: relative;
	width: 3.9em;
	height: 3.9em;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	text-decoration: none;
	transition:
		transform 170ms var(--ease-out),
		box-shadow 170ms var(--ease-out),
		filter 170ms var(--ease-out);
}
.icon-btn:before {
	background-color: hsla(0,0%,100%,0.02);
	background-image:
		radial-gradient(100% 100% at 0 0,hsla(0,0%,100%,0.5),hsla(0,0%,100%,0) 40%),
		radial-gradient(100% 100% at 90% 90%,hsla(0,0%,100%,0.15),hsla(0,0%,100%,0) 50%);
	border-radius: 0.25em;
	box-shadow: 0.5em 0.5em 0.5em hsla(0,0%,100%,0.15) inset;
	content: "";
	display: block;
	position: absolute;
	inset: 4px;
	transition: background-color 170ms var(--ease-out);
}
.icon-btn:hover,
.btn-link:hover .icon-btn,
.icon-btn:focus-visible,
.btn-link:focus-visible .icon-btn {
	box-shadow:
		-0.25em -0.25em 0.25em hsla(0,0%,0%,0.48) inset,
		0 0.45em 0.9em hsla(222,45%,8%,0.36);
	filter: brightness(1.015);
	transform: translateY(-1px);
}
.icon-btn:focus-visible:before,
.btn-link:focus-visible .icon-btn:before,
.icon-btn:hover:before,
.btn-link:hover .icon-btn:before {
	background-color: hsla(0,0%,100%,0.09);
}
.icon-btn:focus-visible,
.btn-link:focus-visible .icon-btn {
	outline: 2px solid hsla(0,0%,100%,0.85);
	outline-offset: 3px;
}
.icon-btn:active:before {
	background-color: hsla(0,0%,0%,0.2);
}
.icon-btn:active {
	box-shadow:
		-0.25em -0.25em 0.25em hsla(0,0%,0%,0.55) inset,
		0 0.2em 0.35em hsla(222,45%,8%,0.2);
	filter: brightness(0.98);
	transform: translateY(0);
}
.icon-btn--github { background-color: hsl(220, 15%, 18%); }
.icon-btn--linkedin { background-color: hsl(210, 89%, 40%); }
.icon-btn--cv { background-color: #334155; }
.icon-btn--notes { background-color: hsl(38, 65%, 39%); }
.icon {
	color: #fff;
	margin: auto;
	pointer-events: none;
	width: 2.25em;
	height: 2.25em;
	transform-origin: 50% 50%;
	transition: transform 170ms var(--ease-out);
}
.icon-btn:hover .icon,
.btn-link:hover .icon,
.icon-btn:focus-visible .icon,
.btn-link:focus-visible .icon {
	transform: scale(1.02);
}
.welcome {
	display: flex;
	justify-content: center;
	opacity: 0;
	transform: translateY(10px);
	animation: blockEnter 480ms var(--ease-out) forwards;
	animation-delay: 380ms;
	width: 100%;
}
.welcome-window {
	width: min(92vw, 38rem);
}
.welcome-window__body {
	color: #1f1f1f;
}
.welcome-window__body h2 {
	font-size: 1.05rem;
	line-height: 1.3;
	margin-bottom: 0.45rem;
}
.welcome-window__body p + p {
	margin-top: 0.45rem;
}

.notes-panel {
	display: none;
	inset: 0;
	align-items: center;
	justify-content: center;
	padding: clamp(0.6rem, 2.2vw, 1.2rem);
	position: fixed;
	z-index: 1200;
}
body.notes-open .notes-panel {
	display: flex;
}
.notes-panel.is-maximized {
	align-items: stretch;
	justify-content: stretch;
	padding: 0;
}
.cv-panel {
	display: none;
	inset: 0;
	align-items: center;
	justify-content: center;
	padding: clamp(0.6rem, 2.2vw, 1.2rem);
	position: fixed;
	z-index: 1200;
}
body.cv-open .cv-panel {
	display: flex;
}
.cv-panel.is-maximized {
	align-items: stretch;
	justify-content: stretch;
	padding: 0;
}
.notes-window {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 1.2rem);
	overflow: hidden;
	width: min(96vw, 58rem);
}
.notes-panel.is-maximized .notes-window {
	height: 100dvh;
	max-height: 100dvh;
	width: 100vw;
}
.notes-window__body {
	display: grid;
	flex: 1;
	gap: 0.7rem;
	grid-template-columns: minmax(9.5rem, 13rem) minmax(0, 1fr);
	min-height: 0;
	padding: 0.75rem;
	color: #1f1f1f;
}
.notes-window__body * {
	color: inherit;
}
.notes-window__sidebar {
	min-width: 0;
}
.notes-tree {
	height: min(46dvh, 28rem);
	margin: 0;
	overflow: auto;
}
.notes-panel.is-maximized .notes-tree {
	height: 100%;
	max-height: none;
}
.notes-tree__link {
	color: inherit;
	display: block;
	text-decoration: none;
}
.notes-tree__link:focus-visible,
.notes-tree__link:hover {
	text-decoration: underline;
}
.notes-window__posts {
	display: grid;
	gap: 0.65rem;
	max-height: min(46dvh, 28rem);
	overflow: auto;
	padding-right: 0.2rem;
}
.notes-panel.is-maximized .notes-window__posts {
	height: 100%;
	max-height: none;
}
.notes-post fieldset {
	margin: 0;
}
.notes-post fieldset > :not(legend) {
	margin-top: 0.45rem;
}
.notes-post h1,
.notes-post h2,
.notes-post h3 {
	font-size: 1rem;
	line-height: 1.25;
}
.notes-post__title,
.notes-post legend h2 {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
.notes-post ul,
.notes-post ol {
	margin-left: 1.1rem;
}
.notes-post p + p {
	margin-top: 0.45rem;
}
.notes-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	grid-column: 1 / -1;
	justify-content: flex-end;
	margin-top: 0.25rem;
}
.notes-window .status-bar,
.notes-window .status-bar-field {
	color: #1f1f1f;
}
.cv-window {
	display: flex;
	flex-direction: column;
	height: min(88dvh, 58rem);
	max-height: calc(100dvh - 1.2rem);
	overflow: hidden;
	width: min(96vw, 70rem);
}
.cv-panel.is-maximized .cv-window {
	height: 100dvh;
	max-height: 100dvh;
	width: 100vw;
}
.cv-window__body {
	background: #fff;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	padding: 0.4rem;
}
.cv-window__frame {
	background: #fff;
	border: 0;
	display: block;
	flex: 1;
	height: 100%;
	min-height: 0;
	outline: 0;
	box-shadow: none;
	width: 100%;
}
.cv-panel.is-maximized .cv-window__frame {
	height: 100%;
}
.cv-actions {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	margin-top: 0.65rem;
}

@keyframes blockEnter {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes bootSlide {
	0% {
		left: -14%;
	}
	100% {
		left: 100%;
	}
}
@keyframes surfaceShift {
	from {
		background-position: 0% 35%;
	}
	to {
		background-position: 100% 65%;
	}
}

@media (prefers-reduced-motion: reduce) {
	main,
	.btn-block,
	.welcome {
		animation: none;
	}
	.btn-block,
	.welcome {
		opacity: 1;
		transform: none;
	}
	.boot-progress__bar {
		animation: none;
	}
	.icon-btn,
	.icon-btn:before,
	.icon {
		transition: none;
	}
	.icon-btn:hover,
	.icon-btn:focus-visible,
	.icon-btn:active,
	.icon-btn:hover .icon,
	.icon-btn:focus-visible .icon {
		filter: none;
		transform: none;
	}
}

@media (min-width: 768px) {
	header {
		font-size: 1.9rem;
		padding: 0 1.8rem;
	}
	main {
		padding: 6rem 1.8rem 5.5rem;
	}
	.btn-grid {
		gap: 1.8rem;
	}
	.btn-block {
		width: 11em;
		font-size: 1.12rem;
	}
	.icon-btn {
		width: 4.7em;
		height: 4.7em;
	}
	.icon {
		width: 2.7em;
		height: 2.7em;
	}
}

@media (min-width: 1200px) {
	header {
		font-size: 2.2rem;
		padding: 0 2.4rem;
	}
	main {
		padding: 6.4rem 2.2rem 5.8rem;
	}
	.btn-grid {
		gap: 2.7rem;
	}
	.btn-block {
		width: 12.5em;
		font-size: 1.28rem;
	}
	.icon-btn {
		width: 5.4em;
		height: 5.4em;
	}
	.icon {
		width: 3.1em;
		height: 3.1em;
	}
}

@media (max-width: 767px) {
	.btn-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
		width: min(96vw, 24rem);
	}
	.btn-block {
		width: 100%;
	}
	.notes-window__body {
		grid-template-columns: 1fr;
	}
	.notes-tree,
	.notes-window__posts {
		max-height: min(28dvh, 15rem);
	}
	.cv-window {
		height: min(64dvh, 30rem);
		max-height: calc(100dvh - 1rem);
	}
}