@font-face {
    font-family: "Disposable Droid";
    font-style: normal; font-weight: normal; font-display: swap;
    src:  url("/assets/fonts/disposabledroid.woff2") format("woff2");
}
@font-face {
    font-family: "Disposable Droid";
    font-style: normal; font-weight: bold; font-display: swap;
    src:  url("/assets/fonts/disposabledroid-b.woff2") format("woff2");
}
@font-face {
    font-family: "Disposable Droid";
    font-style: italic; font-weight: normal; font-display: swap;
    src:  url("/assets/fonts/disposabledroid-i.woff2") format("woff2");
}
@font-face {
    font-family: "Disposable Droid";
    font-style: italic; font-weight: bold; font-display: swap;
    src:  url("/assets/fonts/disposabledroid-bi.woff2") format("woff2");
}

/* cyrillic-ext */
@font-face {
    font-family: "Inter";
    font-style: italic; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwkT9mI1F55MKw.woff2) format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: "Inter";
    font-style: italic; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwAT9mI1F55MKw.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: "Inter";
    font-style: italic; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwgT9mI1F55MKw.woff2) format("woff2");
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: "Inter";
    font-style: italic; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwcT9mI1F55MKw.woff2) format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
  }
  /* vietnamese */
  @font-face {
    font-family: "Inter";
    font-style: italic; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwsT9mI1F55MKw.woff2) format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: "Inter";
    font-style: italic; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwoT9mI1F55MKw.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: "Inter";
    font-style: italic; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwQT9mI1F54.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
    font-family: "Inter";
    font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvvYwYZ8UA3J58.woff2) format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: "Inter";
    font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvmYwYZ8UA3J58.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: "Inter";
    font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvuYwYZ8UA3J58.woff2) format("woff2");
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: "Inter";
    font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvhYwYZ8UA3J58.woff2) format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
  }
  /* vietnamese */
  @font-face {
    font-family: "Inter";
    font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvtYwYZ8UA3J58.woff2) format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: "Inter";
    font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvsYwYZ8UA3J58.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: "Inter";
    font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwYZ8UA3.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

:root {
	--clr-blue: 			oklch(0.49 0.2593 263);
	--clr-blue-light: 		oklch(0.59 0.2224 263);
	--clr-blue-xlight: 		oklch(0.8 0.2224 263);
    --clr-blue-dark:        oklch(0.3 0.1582 263);
	--clr-blue-black: 		oklch(0.15 0.042 263);
    --clr-pink:             oklch(0.769 0.3108 347);
	--clr-purple: 			oklch(0.6 0.3129 310);
    --clr-purple-dark:      oklch(0.37 0.1899 310);
	--clr-purple-black: 	oklch(0.245 0.14815 310);
	--clr-teal:				oklch(0.7443 0.1603 184);
	--clr-cyan:				oklch(0.8843 0.1603 184);
    --clr-orange:           oklch(0.7686 0.278 59);				
	--clr-white:			oklch(0.937 0.0395 301.44);
	--clr-bright-white: 	oklch(1 0 0);


	--text-main: var(--clr-white);
	--text-link: var(--clr-pink);

	--focus-color: currentColor;
    
	--text-heading: var(--clr-bright-white);
	--text-nav: var(--clr-teal);
	--text-nav-bright: var(--clr-cyan);
	--text-nav-active-bg: oklch(from var(--clr-teal) l c h / 0.3);

	--bg1: var(--clr-blue-black);
	--bg2: var(--clr-purple-black);

	--bg1: var(--clr-blue-black);
	--bg2: var(--clr-purple-black);	
	--gradient-color1: var(--clr-pink);
	--gradient-color2: var(--clr-orange);
	--gradient-fill: linear-gradient(45deg, var(--gradient-color1),var(--gradient-color2));
	--gradient-bg: linear-gradient(157deg, var(--bg1), var(--bg2));
	
	--text-selection-bg: var(--clr-blue-xlight);
	--text-selection-fg: var(--clr-blue-dark);


	--font-default: Inter, Roboto, "Helvetica Neue", Helvetica, "Arial Nova", "Nimbus Sans", "Open Sans", Arial, sans-serif;
	--font-default: Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
	--font-alternate: "Disposable Droid", Pixel7, "Nimbus Mono PS", "Courier New", monospace;
	
	--font-body: var(--font-default);
	--font-headings: var(--font-default);
	--font-nav: var(--font-alternate);
	--header-width: 1200px;
	--column-width: 69ch;

	--overlay-crt: 
		linear-gradient(
			hsl(0 6 7) 50%, 
			hsl(0 0 0 / 0.25) 50%
		),
		linear-gradient(
			90deg,
			rgb(255 0 0 / 0.06),
			rgb(0 255 0 / 0.02),
			rgb(0 0 255 / 0.06)
		);
	--overlay-crt-size: 100% 2px, 3px 100%;

	--site-padding: 1rem;
	--phone-safe: 
		calc(env(safe-area-inset-top))
		calc(env(safe-area-inset-right) + var(--site-padding))
		calc(env(safe-area-inset-bottom))
		calc(env(safe-area-inset-left) + var(--site-padding));
	@media only screen and (width >= 600px) { --site-padding: 1.2rem; }
	@media only screen and (width >= 1000px) { --site-padding: 1rem;
		@media (height >= 800px) { --site-padding: 1.6rem; }
		@media (height >= 1200px) { --site-padding: 2rem; }
	}
}

* {
	box-sizing: border-box;
}
html {
	background-color: var(--bg1);
}
body {
	color-scheme: dark light;
	padding: 0;
	color: var(--text-main);
	margin: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
	font-family: var(--font-body);
	font-size: 1.4rem;
	line-height: 1.6;
	font-weight: 300;
}
h1, h2, h3, h4, ul, li, p {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--text-heading);
	font-family: var(--font-headings);
	letter-spacing: normal;
	position: relative;
	max-width: fit-content;
	text-wrap: balance;
	line-height: 1.2;
	@supports (text-wrap: pretty) {
		text-wrap: pretty;
	}
}
p, .description {
	text-wrap: pretty;
}
h1 {
	font-size: 3rem;
	font-weight: 400;
	margin: 0 0 1rem;
}
h2 {
	font-size: 2rem;
	font-weight: 600;
	margin-top: 2rem;
}
a {
	color: var(--text-link);
	position: relative;
	text-decoration: none;
	z-index: 1;
}
:active {
	outline: none;
}
img {
	border: none;
}

main {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 100vh;
	padding-block-end: 10rem;
	box-shadow: 0px 15px 20px rgb(0 0 0 / .2);
	.wrap {
		margin: 0 auto;
		padding: 0 1rem;
		width: 100%;
	}
	.content {
		/* text-shadow: 0px 0px 65px var(--text-nav); */
	}
	

	a {
		text-shadow: none;
		&:hover {
			color: var(--text-link);
			text-decoration: underline;			
		}
		@supports (text-decoration-thickness: 3px) {
			text-decoration-thickness: 2px;
				text-decoration-color: var(--gradient-color1);
				text-underline-offset: 2px;
				text-decoration-skip-ink: all;
		}
		@supports (background-clip: text) and (text-decoration-color: red) {
			background: linear-gradient(45deg, var(--gradient-color1),var(--gradient-color2));
			background-clip: text;
			color: transparent;
			&:hover {
				color: transparent;
				text-decoration-color: var(--gradient-color1);
			}
		}
		&:focus-visible {
			--focus-color: var(--text-link);
		}
	}
}
a, button {
	outline-offset: 6px;
}
:focus-visible {
	outline: 1px dashed var(--focus-color);
	outline-offset: 2px;
	transition: outline-offset 50ms ease-in;
}
::selection { 
	background: var(--text-selection-bg); 
	color: var(--text-selection-fg);
	-webkit-text-fill-color: currentColor;
}






.page-header, .page-footer, main {
	.wrap {
		width: 100%;
		max-width: var(--header-width);
		margin-inline: auto;
		padding: var(--phone-safe);
	}
}
.content-wrapper {
	background-color: var(--bg1);
	background-image: var(--gradient-bg);
	background-attachment: fixed;
	z-index: 2;
}

.main-content .wrap {
	body.home & {
		max-width: var(--column-width);
	}
	body.about & {
		max-width: var(--column-width);
	}
	body.blog & {
		max-width: var(--column-width);
	}
	body.work & {
		max-width: var(--column-width);
	}
}





.page-header {
	.contents {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--site-padding);
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		padding-block: var(--site-padding);
		border-width: 0 0 2px;
		border-style: solid;
		border-image: var(--gradient-fill) 20;
	}
	.logo {
		display: block;
		width: 80px;
		z-index: 1;
		color: var(--text-heading);
		aspect-ratio: 1;
		svg { 
			display: block;
			fill: currentColor;
			width: 100%;
			height: auto;
			aspect-ratio: 1;
		}
		@media (width >= 600px) {
			width: 90px;
			@media only screen and (width >= 1000px) {
				width: 100px;
				@media (height >= 800px) {
					width: 120px;
				}
				@media (height >= 1200px) {
					width: 160px;
				}
			}
			
		}
	}
}
.main-nav {
	/* display: contents; */
	ul {
		list-style: none;
		margin: 0;
		padding: var(--site-padding) 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0;
		font-size: 1.7rem;
		text-transform: uppercase;
	}
	li {
		margin: 0;
		padding: 0;
		position: relative;
		line-height: 1;
		a {
			font-family: var(--font-nav);
			color: var(--text-nav-bright);
			display: inline-block;
			padding: 3px 0.5em 0;
			font-size: 1.2em;
			line-height: 0.9;
			position: relative;
			&:hover {
				background: var(--text-nav);
				color: var(--bg1);
				text-shadow: none;
				box-shadow: 0 0 15px;
			}
			&:focus-visible {
				outline-offset: 2px;
				--focus-color: var(--text-nav-bright);
			}
		}
		&.current {
			background: var(--text-nav-active-bg);
			&:not(:hover) {
				&::after {
					content: "";
					width: 0.5em;
					position: absolute;
					top: 0; right: 0; bottom: 0;
					background: var(--text-nav-bright);
					opacity: 0.8;
					animation: blink 1.06s steps(1) infinite;
					@media (prefers-reduced-motion: reduce) {
						animation: none;
					}
				}
			}
		}

	}
}

.footnote {
	font-size: 0.8em;
	letter-spacing: 0.1em;
}
.page-footer {
	position: sticky;
	bottom: 0;
	z-index: 1;
	min-height: 100vh;
	height: auto;
	background: var(--gradient-color1) var(--gradient-fill);
	text-align: center;
	margin: 0 auto;
	width: 100%;
	color: var(--text-heading);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.footer-upper {
	}
	.footer-lower {
		margin-block-start: auto;
		display: flex;
		max-width: 100vw;
		flex-direction: column;
		gap: 0.5rem;
		align-items: center;
		justify-content: flex-end;
		p {
			max-width: fit-content;
		}
	}
	.copyright {
		small {
			font-size: 1em;
		}
		font-family: var(--font-nav);
		line-height: 1;
		font-size: 3rem;
		font-weight: bold;
		text-transform: uppercase;
	}
	img, svg {
		display: block;
		margin-bottom: -0.2rem;
	}
}
.hero {
	padding-block: 5rem;
	hgroup {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		& > * {
			margin: 0;
		}
	}
	.wrap {
		max-width: var(--column-width);
	}
	img {
		max-width: 100%;
		opacity: 1;
		object-fit: cover;
		object-position: center;
		height: auto;
	}
	&.simple {
		padding-block: 5rem;
		.wrap {
			max-width: var(--column-width);
		}
	}
	 
	
}

@keyframes blink {
	50% { opacity: 0; }
}