/* max z-index is 101 - header/ footer 
	Grid-Gallery uses 6 for hovers
*/

/* CURSORS go here */
/* all refs prefixed with '--crs' */

:root {
	--crs-expand: 	url('graphics/crs-plus.png') 24 24, auto;
	--crs-zoominc: 	url('graphics/crs-plusc.png') 26 26, auto;
	--crs-zoomout: 	url('graphics/crs-minus.png') 26 26, auto;
	--crs-fscreen:	url('graphics/expand_lite.svg') 8 8, auto;
	--crs-play: 	url('graphics/crs-play.png') 26 26, auto;
	--crs-summary: 	url('graphics/crs-summary.png') 26 26, auto;
	--crs-article: 	url('graphics/crs-article.png') 26 26, auto;
	--crs-email: 	url('graphics/crs-email.png') 26 26, auto;

	--crs-zoomin:	 url('../../graphics/crs-plus.png') 26 26, auto;
	--crs-zoomout:	 url('../../graphics/crs-minus.png') 26 26, auto;
	--crs-hand:		 url('../../graphics/crs-hand.png') 26 26, auto;
	--crs-grab:		 url('../../graphics/crs-hand-grab.png') 26 26, auto;
	--crs-point:	 url('../../graphics/crs-hand-point.png') 16 6, auto;
	--crs-zoom2:	 url('../../graphics/crs-zoomin.png') 24 24, auto;
	--crs-close:	 url('../../graphics/crs-close.png') 16 16, auto;

	--bkggradient: 		linear-gradient(in srgb 135deg, black, hsl(209, 46%, 14%), hsl(219, 87%, 6%), black);
	--bkgnoise: 		url(graphics/gggrid.svg);
	--available-yes:	url(graphics/available-yes.webp);
	--available-no: 	url(graphics/available-no.webp);
	
	/* COLORS go here, --col-[prefix]-[0 for dark, 1 for light] */
	
	--col-or0:		hsl(25, 95%, 45%); /* orange dark */
	--col-or1:		hsl(40, 85%, 65%); /* orange lite */
	--col-bl0:		hsl(200, 70%, 45%); /* blue dark */
	--col-bl1:		hsl(165, 90%, 50%); /* blue lite */
	--bluegradient: linear-gradient(to right, var(--col-bl0), var(--col-bl1));

}

/* CURSOR CLASSES */
/* all classes prefixed with 'crs-' */

.crs-expand{cursor: var(--crs-expand); image-rendering: -moz-crisp-edges;}
.crs-play{cursor: var(--crs-play);}
.crs-zoominc{cursor: var(--crs-zoominc);}
.crs-point{cursor: var(--crs-point);}
.crs-fscreen{cursor: var(--crs-fscreen);}
.crs-summary{cursor: var(--crs-summary);}
.crs-article{cursor: var(--crs-article);}
.crs-email{cursor: var(--crs-email); image-rendering: -moz-crisp-edges;}

/* CURSORS end ----------- */

/* FONTS GO HERE, WOFF2 or bust -----------------------------------------------*/
/* ALL FONTS USE SIL Open Font License 1.1, included in Font_Licenses.txt file */

@font-face {
	font-family: "inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(fonts/InterVariable.woff2) format("woff2");
}

@font-face {
	font-family: "inter-italic";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url(fonts/InterVariable.woff2) format("woff2");
}


@font-face {
	font-family: "figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url(fonts/Figtree[wght].woff2) format("woff2");

}

@font-face {
	font-family: "figtree-italic";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url(fonts/Figtree-Italic[wght].woff2) format("woff2");
}

@font-face {
	font-family: "calsans";
	font-style: normal;
	font-display: swap;
	src: url(fonts/CalSans-SemiBold.woff2) format("woff2");
}

@font-face {
	font-family: "ddincbold";
	font-style: normal;
	font-display: swap;
	src: url(fonts/D-DINCondensed-Bold.woff2) format("woff2");
}

@font-face {
	font-family: "ddinc";
	font-style: normal;
	font-display: swap;
	src: url(fonts/D-DINCondensed.woff2) format("woff2");
}

@font-face {
	font-family: "jetbrains";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url(fonts/JetBrainsMono[wght].ttf);
}

@font-face {
	font-family: "jetbrains-italic";
	font-style: italic;
	font-weight: 100 800;
	font-display: swap;
	src: url(fonts/JetBrainsMono-Italic[wght].ttf);
}

/* FONTS END ---------------------------------------------- */

*, *::before, *::after {box-sizing: border-box;} /* make sure errthing is borderbox, including pseudos */

* {
	margin: 0;
	padding: 0;
}

#root {
	height: 100vh;
	height: 100dvh;
	overflow: auto;
	hyphens: none;
	white-space: nowrap;
	font-size: 16px;
	width: 100%;
}

body, html {
	scrollbar-color: hsl(202, 0%, 60%) hsl(202, 82%, 6%);

	font-family: figtree;
	scroll-behavior: smooth;
	line-height: 1.2;
	margin: 0;
	padding: 0 0 4rem 0;
	height: 100%;

	/* Apply the background to the body */
	background-image: 
		var(--bkgnoise), /* Static noise */
		var(--bkggradient); /* Moving gradient */
	
	background-size: 
		auto, /* Noise with its natural size */
		400% 400%; /* Gradient sized for animation */
	
	background-repeat: 
		repeat, /* Noise repeats */
		no-repeat; /* Gradient doesn't repeat */
	
	background-blend-mode: overlay; /* Blend noise with gradient */
	
	/* Make both layers fixed to viewport */
	background-attachment: fixed, fixed;
	
	animation: gradient 8s ease infinite;
	}
	
	@keyframes gradient {
		0% { background-position: center, 0% 50%; }
		50% { background-position: center, 100% 50%; }
		100% { background-position: center, 0% 50%; }
	}

/* HEADER BEGIN */

.logo {
	display: flex;
	margin: 0; /* Remove the existing 1% margin */
	padding: 0;
	width: 200px;
	height: auto;
}

.header {
	background: hsla(220, 80%, 2%, 0.4);
	backdrop-filter: blur(0.8rem);
	width: 100%;
	height: 7rem;
	position: fixed;
	top: 0;
	left:0;
	z-index: 101;
	display: flex;
	justify-content: center;
}

/* New header inner container with the same width as content */
.header-inner {
	display: flex;
	margin: 0 auto;
	flex-wrap: nowrap;
	align-items: center; /* Vertically align items */
	justify-content: space-between; /* Space out elements horizontally */
	padding: 0; /* Match the content padding */
	max-width: 1720px; /* Match your content width */
	width: 100%;
}

.headerrows {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.navbar {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	padding-left: 1.5rem;
	justify-content: flex-end; /* Changed from space-between */
	align-items: center;
	gap: 1.5rem;
}

/* .header { background: rgba(0,0,255,0.2); }
.header-inner { outline: 1px solid red; }
.logo { outline: 1px solid green; }
.navbar { outline: 1px solid orange; } */

.navbtn {
	flex: 0 0 auto;
	min-width: max-content;
	font-family: inter;
	letter-spacing:-0.03rem; 
	font-weight: 800;
	font-optical-sizing: 32;
	height: auto;
	font-size: 3rem;
	border-radius: 0.5rem;
	padding: 0 1rem;
	color: hsl(194, 85%, 51%);
	background: linear-gradient(in srgb 0deg, hsl(201, 72%, 47%), hsl(166, 91%, 52%));
	background-clip: text;
	color: transparent;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	text-align: center;
	isolation: isolate;
	/* Add positioning for the pseudo-element */
	position: relative;
}

.navbtnlite{
	flex: 1;
	min-width: max-content;
	height: auto;
	border-radius: 0.5rem;
	padding: 0 1rem;
	color: hsl(194, 85%, 51%);
	background: linear-gradient(in srgb 0deg, hsl(201, 72%, 47%), hsl(166, 91%, 52%));
	background-clip: text;
	color: transparent;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	text-align: center;
	isolation: isolate;
	/* Add positioning for the pseudo-element */
	position: relative;
}

/* Create the border effect using pseudo-element */
.navbtn::before,
.navbtnlite::before
{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: repeating-linear-gradient(75deg, hsl(150, 70%, 50%), hsla(140, 90%, 80%, 0.6), hsla(150, 70%, 50%, 0.1), hsla(190, 75%, 50%, 0.6), hsl(150, 70%, 50%));
	animation: ctashine 8s ease-in infinite;
	background-size: 220% auto;
	border-radius: 0.5rem; /* Match the button's border-radius */
	mask: 
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
	mask-composite: xor;
	mask-composite: exclude;
	padding: 1px; /* Thinner border - reduced from 2px */
	transition: opacity 0.3s ease;
	z-index: -1; /* Behind the text */
	opacity: 0.2; /* Start with subtle visibility */
}

/* Keep your existing hover states */
.navbtn:hover,.navbtnlite:hover {
	background: linear-gradient(in srgb 135deg, hsl(201, 72%, 47%), hsl(166, 91%, 52%));
	color: black;
	-webkit-text-fill-color: black;
	transition-duration: 0.6s;
	transition-timing-function: ease-out;
}

/* Enhance the border on hover */
.navbtn:hover::before, .navbtnlite:hover::before {
	opacity: 1;
	background-image: repeating-linear-gradient(75deg, hsl(150, 70%, 50%), hsl(140, 90%, 80%), hsl(150, 70%, 50%), hsl(190, 75%, 50%), hsl(150, 70%, 50%));
}
.navbtnactive {
	background: linear-gradient(in srgb 0deg, hsl(25, 95%, 45%), hsl(40, 83%, 55%));
	color: black;
}

.navbreadcrumb{
	margin:0.5rem 0 0 3rem;
	font-family: jetbrains;
	/* font-size: 1.6rem; */
	font-weight: 350;
}

/* // CONTENT */

.content {
	width: 1720px; /* projects, default */
	margin: 7rem auto 2rem;
	padding-top: 0.25rem;
}

.content-1550 {width:1550px;}

/* CONTENT // */


/* FOOTER BEGIN, progress bar works as divider */

/* Footer container */
.footer-container {
	width: 100%;
	position: relative;
	}

	/* Progress bar that stays fixed at bottom until footer scrolls into view */
	.progress-container {
		width: 100%;
		height: 4px;
		background: hsl(220, 25%, 3%);
	}

	/* Fixed progress bar always spans full viewport */
	.progress-container#fixedProgressContainer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}

	.progress-bar {
		height: 100%;
		background: linear-gradient(in srgb 90deg, hsl(210, 60%, 25%) 35%, hsl(195, 10%, 85%) 100%);
		width: 0%;
	}

	/* Footer itself - scrolls into view normally */
	footer {
		width: 100%;
		background: hsla(190, 80%, 15%, 0.300);
		/* background: hsla(220, 80%, 2%, 0.4); */
		/* backdrop-filter: blur(0.8rem); */
		padding-top: 4px; /* Space for progress bar */
		margin-bottom: 0; /* Ensure no extra space at bottom */
	}

	/* This will be positioned correctly when the footer scrolls into view */
	footer .progress-container {
		position: absolute;
		top: 0;
		bottom: auto;
	}

	.footer-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: padding 0.3s ease;
		width: 100%; /* Ensure full width */
		max-width: 1620px; /* Constrain maximum width */
		margin: 0 auto; /* Center it */
		box-sizing: border-box;
	}

/* CTA Section */

/* CTA Button */
.cta-blubutton {
	display: inline-block;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 12px;
	transition: all 0.2s ease;
	isolation: isolate;
	position: relative;
	cursor: pointer;
	background-image: repeating-linear-gradient(75deg, hsla(200, 70%, 30%, 0.25), hsla(220, 70%, 30%, 0.1), hsla(190, 75%, 30%, 0.2), hsla(200, 70%, 30%, 0.25));
	animation: ctashine 16s ease-in infinite;
	background-size: 440% auto;
}

/* pseudo-element that creates the blue background on hover */
.cta-blubutton::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: repeating-linear-gradient(75deg, hsl(150, 70%, 50%), hsla(140, 90%, 80%, 0.6), hsla(150, 70%, 50%, 0.1), hsla(190, 75%, 50%, 0.6), hsl(150, 70%, 50%));
	animation: ctashine 8s ease-in infinite;
	background-size: 220% auto;
	border-radius: 12px;
		mask: 
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
		mask-composite: xor;
		mask-composite: exclude;
		padding: 2px; /* hollow border for button */
	transition: opacity 0.3s ease;
	z-index: -1; /* behind the text */
}

.cta-blubutton:hover::before{
	background-image: repeating-linear-gradient(75deg, hsl(150, 70%, 50%), hsl(140, 90%, 80%),hsl(150, 70%, 50%), hsl(190, 75%, 50%), hsl(150, 70%, 50%));
	mask: none;
	padding: 0;
}
.cta-blubutton:hover .cta {
	color: black;
}

/* CTA */

.ctacol {
	background-image: linear-gradient(60deg, hsl(25, 95%, 55%), hsl(40, 83%, 65%), hsl(25, 95%, 55%));
	background-clip: text;
	color: transparent;
		animation: ctascroll 6s ease infinite;
		background-size: 300% auto;
	position: relative;
	z-index: 1;
}

.ctacolblu {
	background-image: repeating-linear-gradient(75deg, hsl(150, 70%, 50%), hsl(140, 90%, 80%),hsl(150, 70%, 50%), hsl(190, 75%, 50%), hsl(150, 70%, 50%));
	background-clip: text;
	color: transparent;
		animation: ctascroll 6s ease infinite;
		background-size: 300% auto;
	position: relative;
	z-index: 1;
}

.ctacolblubg {
	background-image: repeating-linear-gradient(75deg, hsl(150, 70%, 50%), hsl(140, 90%, 80%),hsl(150, 70%, 50%), hsl(190, 75%, 50%), hsl(150, 70%, 50%));
	animation: ctascroll 6s ease infinite;
	background-size: 300% auto;
	position: relative;
}

.cta {
	display: inline-block;
	font-size: 4rem;
	font-weight: 680;
	font-family: inter;
	letter-spacing:-0.1rem;
	font-optical-sizing: 32;
	background-image: linear-gradient(60deg, hsl(25, 95%, 55%), hsl(40, 83%, 65%), hsl(25, 95%, 55%));
	background-clip: text;
	color: transparent;
		animation: ctascroll 6s ease infinite;
		background-size: 300% auto;
	position: relative;
	z-index: 1;
	padding: 0.5rem;
}

.cta.hov:hover, .ctacol:hover {
	background-image: repeating-linear-gradient(75deg, hsl(150, 70%, 50%), hsl(140, 90%, 80%),hsl(150, 70%, 50%), hsl(190, 75%, 50%), hsl(150, 70%, 50%));
}

@keyframes ctascroll {
	0% { background-position: 0% center; }
		50% { background-position: 100% center; }
		100% { background-position: 0% center; }
}

@keyframes ctashine {
	0% { background-position: -100% center; }
	50% { background-position: 100% center; }
	100% { background-position: -100% center; }
}

.bktopbtn {
background: linear-gradient(in srgb 180deg, hsla(210, 40%, 30%, 0.8), hsla(210, 40%, 30%, 0.1));
backdrop-filter: blur(2px);
opacity: 0.5;
padding: 0.4rem 0.1rem;
border-radius: 0.5rem;
height: 3.2rem;
width: 3rem;

position: fixed;
bottom: 1rem;
right: 0.6rem;

z-index: 102;
text-align: center;
transition-duration: 0.3s;
transition-timing-function: ease-out;

display: flex;
align-items: flex-start;
justify-content: center;
}

.bkpagebtn {
background: linear-gradient(in srgb 180deg, hsla(0, 40%, 30%, 0.8), hsla(10, 40%, 30%, 0.1));
backdrop-filter: blur(2px);
opacity: 0.5;
padding: 0.6rem 0.1rem;
border-radius: 0.5rem;
border: 1px solid var(--col-or0);
height: 3.2rem;
width: 3rem;
cursor:pointer;

position: fixed;
bottom: 1rem;
left: 0.6rem;

z-index: 102;
text-align: center;
transition-duration: 0.1s;
transition-timing-function: ease-out;

display: flex;
align-items: flex-start;
justify-content: center;
}

.bktopbtn:hover {
opacity: 1;
height: 8rem;
transition-duration: 0.02s;
transition-timing-function: ease-out;
}

.bkpagebtn:hover {
opacity: 1;
transform: scale(1.15);
transition-duration: 0.02s;
transition-timing-function: ease-out;
}

/* image padding to keep it on top */
.bktopbtn img {
	padding-top: 0.2rem;
}

.bkpagebtn img {
	padding-top: 0.2rem;
	transform:rotate(-90deg);
}

/* FOOTER END ------------------------------ */

/* HEADINGS AND PARAGRAPH TAGS ------------- */

h1 {
	color: hsl(0, 0%, 100%);
	font-family: inter;
	display: block;
	font-weight: 700;
	font-size: 4rem;
}

h2 {
	color: hsl(0, 0%, 85%);
	font-family: figtree;
	display: block;
	font-weight: 600;
	font-size: 1.8rem;
}

h3 {
	color: hsl(200, 20%, 72%);
	font-family: figtree;
	display: block;
	font-weight: 350;
	font-size: 1.8rem;
}


h4 {
	color: #6279b1;
	font-family: figtree;
	font-size: 3rem;
	display: block;
	margin: 1%;
}

h4:hover {
	color: white;
	font-family: figtree;
	font-size: 3rem;
	display: block;
	margin: 1%;
}

p {
	display: block;
	font-family: figtree;
	color: #bbc0c4;
	font-size: 1.3rem;
	font-weight: 200;
	line-height: 1.5;
	text-align: left;
	margin: 1rem auto 0 auto;
}

/* FONT SIZE/ weight rems */
.fint{font-family: inter;}
.fjet{font-family: jetbrains;}
.ffig{font-family: figtree;}
.fcal{font-family: calsans;}
.fddi{font-family: ddinc;}
.fddb{font-family: ddincbold;}
.fnot{font-family: noto;}

.r05{font-size: 0.5rem;}
.r075{font-size: 0.75rem;}
.r1{font-size: 1rem;}
.r11{font-size: 1.1rem;}
.r12{font-size: 1.2rem;}
.r13{font-size: 1.3rem;}
.r14{font-size: 1.4rem;}
.r15{font-size: 1.5rem;}
.r16{font-size: 1.6rem;}
.r17{font-size: 1.7rem;}
.r18{font-size: 1.8rem;}
.r19{font-size: 1.9rem;}
.r2{font-size: 2rem;}
.r21{font-size: 2.1rem;}
.r22{font-size: 2.2rem;}
.r23{font-size: 2.3rem;}
.r24{font-size: 2.4rem;}
.r25{font-size: 2.5rem;}
.r26{font-size: 2.6rem;}
.r27{font-size: 2.7rem;}
.r28{font-size: 2.8rem;}
.r29{font-size: 2.9rem;}
.r3{font-size: 3rem;}
.r32{font-size: 3.2rem;}
.r35{font-size: 3.5rem;}
.r4{font-size: 4rem;}
.r45{font-size: 4.5rem;}
.r5{font-size: 5rem;}
.r55{font-size: 5.5rem;}
.r6{font-size: 6rem;}
.r65{font-size: 6.5rem;}
.r7{font-size: 7rem;}
.r75{font-size: 7.5rem;}
.r8{font-size: 8rem;}
.r85{font-size: 8.5rem;}
.r9{font-size: 9rem;}
.r95{font-size: 9.5rem;}


.fw1{font-weight: 100;}
.fw15{font-weight: 150;}
.fw2{font-weight: 200;}
.fw25{font-weight: 250;}
.fw3{font-weight: 300;}
.fw35{font-weight: 350;}
.fw4{font-weight: 400;}
.fw45{font-weight: 450;}
.fw5{font-weight: 500;}
.fw55{font-weight: 550;}
.fw6{font-weight: 600;}
.fw65{font-weight: 650;}
.fw7{font-weight: 700;}
.fw75{font-weight: 750;}
.fw8{font-weight: 800;}
.fw85{font-weight: 850;}
.fw9{font-weight: 900;}

.chroma{text-shadow: 3px 1px 1px hsla(0, 100%, 50%, 0.5), -3px -1px 1px hsla(215, 100%, 50%, 0.25);
}
.projtitle {
	color: white;
	font-family: inter;
	font-weight: 680;
	font-optical-sizing: 32;
	font-size: 6rem;
	margin: 0 auto 0.4rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-transform: uppercase;
	letter-spacing: -0.16rem;
}

.subhead{
	letter-spacing:-0.06rem;
	position: relative;
	bottom:18px;
	margin-bottom: -18px;
}

/* LISTS START */

/* Base list item styling */
li {
	list-style-type: none;
	color: #d5dbde;
	font-size: 1.2rem;
	font-weight: 350;
	line-height: 1.4;
	padding: 8px 8px 8px 0;
	position: relative; /* Required for absolute positioning of pseudo-elements */
}

/* Apply padding-left only to list items that use bullets */
li.bullet, li.cut, li.good {
	padding-left: 2rem; /* Create space for the bullet */
}

/* Good list items */
li.good::before {
	content: "✔️";
	position: absolute;
	left: 0;
	top: 0.5em;
	padding-right: 0.2rem;
}


/* Cut list items */
li.cut::before {
	content: "✂";
	position: absolute;
	left: 0;
	top: 0.5em;
	color: var(--col-bl0);
}

li.empty::before {
	position: absolute;
	left: 0;
	top: 0.5em;
	color: var(--col-bl0);
}

li.cut {
	font-size: 1.2rem;
	font-weight: 300;
}

/* Data-bullet approach for dynamic emoji bullets */
li[data-bullet] {
	padding-left: 2rem; /* Create space for the bullet */
}
li[data-bullet]::before {
	content: attr(data-bullet); /* Gets the value from data-bullet attribute */
	position: absolute;
	left: 0;
	top: 0.5rem; /* Match your existing bullet alignments */
	color: inherit; /* Use the inherited color by default */
}

/* extra class for bullet colors */
li[data-bullet].blred::before { color: hsl(10, 90%, 50%); }
li[data-bullet].blcta::before { color: hsl(40, 83%, 65%); }
li[data-bullet].blgreen::before { color: hsl(150, 70%, 50%); }
li[data-bullet].blblue::before { color: hsl(190, 75%, 50%); }

.bullet {
    display: inline-flex;
    justify-content: center;
    align-items: center;
	margin-right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-image: linear-gradient(135deg, hsl(200, 90%, 50%),hsl(227, 96%, 60%));
    color: #ffffff;
    font-weight: 700;
    transform: translateY(-1px);
    font-size: 1rem;
	font-family: figtree;
}


/* LISTS END */

/* A HREF LINKS CSS --------- */

a:link { 
	text-decoration: none; 
	color: hsl(194, 85%, 51%);
} 
a:visited { 
	text-decoration: none; 
	color: hsl(216, 85%, 60%);
} 
a:hover { 
	text-decoration: none; 
	color: white;
} 
a:active { 
	text-decoration: none; 
	color: inherit;
}

/* TAG CLOUD OWN TICKER START ----------------- */

.tagticker{
	background-color: hsla(204, 100%, 11%, 0.395);
	padding:0em 0em;
	bottom:0;
	margin: 1rem auto 1rem auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;	
}

.hashtag{
	color: hsl(194, 85%, 51%);
	padding: 0.6em;
	height: auto;
	font-size: 1.1rem;
}

.hashtag:hover{color: white;}

/* TAG CLOUD OWN TICKER END ------------------- */

/* Toggle START ------------------------------- */

details {
	margin: 2rem auto;
	padding: 0.5em 1.5em;
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='transparent' rx='12' ry='12' stroke='%231487BA73' stroke-width='6' stroke-dasharray='16%2c24' stroke-dashoffset='21' stroke-linecap='square'/%3e%3c/svg%3e"), linear-gradient(hsla(204, 100%, 11%, 0.395), hsla(204, 100%, 11%, 0.874));
	border-radius: 12px;
}

summary {
	color: var(--col-bl0);
	font-family: figtree;
	font-weight: 400;
	font-size: 2.2rem;
	text-align: left;
	margin: -0.25em -0.5em 0;
	padding: 0.5em;
	cursor: var(--crs-summary);
	transition-duration: 0.1s;
	transition-timing-function: ease-in-out;
	pointer-events: none;
}

details[open] {padding: 0.5em 1.5em;}

details[open] summary {
	color: white;
	margin-bottom: 0.5em;
}

summary:hover{color:white;}

summary:hover::after{
	content: " ✂ ✂";
	transition-duration: 0.04s;
	transition-timing-function: ease-out;
}

/* Toggle END -------- */

/* Horizontal Rule <hr> */

hr {
	margin: 1rem auto;
	border: 0;
height: 1px; /* 0.14rem;*/ 
	opacity: 0.6;
background: var(--bluegradient);
			
}

hr.dashed{
	border-width: 4px;
	border-style: dashed;
	border-image: linear-gradient(to right, var(--col-bl0), hsla(0, 0%, 0%, 0)) 1;
}

hr.default {
	display: block;
	margin: 0.5rem auto;
	border: 0.12rem solid hsla(194, 30%, 80%, 0.3);
}

/* https://kovart.github.io/dashed-border-generator/ */ 

/* CTA Button styles */
.cta-button {
height: 6rem !important;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-weight: bold;
font-size: 1.25rem;
color: white;
text-shadow: 0px 0px 3px hsla(0, 0%, 0%, 0.5);
}

.iframe-parent{
	width: 100%;
	height: 50vh;
}

/* Expand to the entire container */
iframe{
	width: 100%;
	height: 100%;
}

.post-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 2rem 0;
}

.post-content {
	display: flex;
	gap: 2rem;
	margin-bottom: 2rem;
}

.post-meta {
	color: var(--col-bl0);
	font-weight: 400;
}

.column {flex: 1;}

/* ------------------------------------------------------ */

/* Tooltip container */
[data-tooltip] {
position: relative;
	/* cursor: help; */
	display: inline-block;
}

/* Global tooltip element use with lgfx-tooltip.js */
#global-tooltip {
	/* Positioning */
	position: fixed;
	overflow-wrap: break-word;
	hyphens: auto;
	line-height: 1.5;
	z-index: 9999;
	pointer-events: none;

	/* Visibility */
	opacity: 0;
	visibility: hidden;

	/* Styling */
	background: hsl(210, 100%, 12%);
	color: #fff;
	padding: 6px 10px;
	border: solid;
	border-width: 2px;
	box-shadow: 8px 8px 12px hsla(0, 0%, 0%, 0.5);
	border-radius: 8px;
	border-color: hsl(190, 70%, 45%) var(--col-bl0) var(--col-bl0);
	white-space: nowrap;
	font-size: 1.2rem;
	font-family: figtree;
	font-style: italic;
	font-weight: 200;
	transition: opacity 0.1s;
}

/* Image tooltip styles */
#global-tooltip.image-tooltip {
	padding: 0 !important;
	background: transparent !important;
}

#global-tooltip.image-tooltip img {
	display: block;
	border-radius: 6px;
	box-shadow: none;
}

/* Text tooltip with width constraint */
#global-tooltip.text-with-width {
	white-space: normal;
	overflow-wrap: break-word;
	word-wrap: break-word; /* For IE support */
	line-height: 1.5;
}

/* Special class just for text tooltips with width */
#global-tooltip.text-with-width {
	overflow-wrap: break-word;
	hyphens: auto;
	line-height: 1.4;
	white-space: normal;
}

/* Borderless and shadowless tooltip option */
#global-tooltip.borderless {
  border: none !important;
  box-shadow: none !important;
}

/* For image tooltips */
#global-tooltip.image-tooltip.borderless img {
  border: none !important;
  box-shadow: none !important;
}
.ttspan{
	background: linear-gradient(to right, var(--col-bl0), var(--col-bl1));
	background-clip: text;
	color:hsla(0, 0%, 100%, 0.3);
}

.ttspan:hover{
	color: hsl(200, 80%, 80%);
	border-radius:6px;
	opacity: 1;
}

.thighlight{
	background: linear-gradient(30deg, hsla(195, 80%, 50%, 0.95), hsla(165, 80%, 60%, 0.95));
	color: black;
	border-radius: 4px;
	font-weight: 600;
	margin: 0 -0.1rem; /* Negative margin to expand past bounds */
	padding: 0 0.2rem; /* Padding to maintain original text spacing */
}

.icosoft64 {max-height: 64px; width:auto; object-fit: contain;}
.icosoft48 {max-height: 48px; width:auto; object-fit: contain; margin-left:0; padding-right:2px;}
.h2soft48{display: inline; font-size:1.4rem; font-weight:450; vertical-align: 15px;}
.h2soft64{display: inline; font-size:1.6rem; font-weight:450; vertical-align: 24px; padding-left:10px;}
.h2proj{display: inline; font-size:1.6rem; font-weight:450; vertical-align: 16px; padding-left:2px;}
.h1softtext{margin-right:12px; font-size:2rem; font-family:figtree; font-weight:300;}

/* LGFXwind BITS */
/* everything floats to the top, for spacing add margins to top, not under */

.mta{margin-top: auto;}
.mt0{margin-top: 0rem;}
.mt05{margin-top: 0.5rem;}
.mt1{margin-top: 1rem;}
.mt15{margin-top: 1.5rem;}
.mt2{margin-top: 2rem;}
.mt25{margin-top: 2.5rem;}
.mt3{margin-top: 3rem;}
.mt35{margin-top: 3.5rem;}
.mt4{margin-top: 4rem;}s
.mt45{margin-top: 4.5rem;}
.mt5{margin-top: 5rem;}
.mt55{margin-top: 5.5rem;}
.mt6{margin-top: 6rem;}
.mt65{margin-top: 6.5rem;}
.mt7{margin-top: 7rem;}
.mt75{margin-top: 7.5rem;}
.mt8{margin-top: 8rem;}
.mt85{margin-top: 8.5rem;}
.mt9{margin-top: 9rem;}
.mt95{margin-top: 9.5rem;}

.mra{margin-right: auto;}
.mr0{margin-right: 0rem;}
.mr05{margin-right: 0.5rem;}
.mr1{margin-right: 1rem;}
.mr15{margin-right: 1.5rem;}
.mr2{margin-right: 2rem;}
.mr25{margin-right: 2.5rem;}
.mr3{margin-right: 3rem;}
.mr35{margin-right: 3.5rem;}
.mr4{margin-right: 4rem;}
.mr45{margin-right: 4.5rem;}
.mr5{margin-right: 5rem;}
.mr55{margin-right: 5.5rem;}
.mr6{margin-right: 6rem;}
.mr65{margin-right: 6.5rem;}
.mr7{margin-right: 7rem;}
.mr75{margin-right: 7.5rem;}
.mr8{margin-right: 8rem;}
.mr85{margin-right: 8.5rem;}
.mr9{margin-right: 9rem;}
.mr95{margin-right: 9.5rem;}

.mba{margin-bottom: auto;}
.mb0{margin-bottom: 0rem;}
.mb05{margin-bottom: 0.5rem;}
.mb1{margin-bottom: 1rem;}
.mb15{margin-bottom: 1.5rem;}
.mb2{margin-bottom: 2rem;}
.mb25{margin-bottom: 2.5rem;}
.mb3{margin-bottom: 3rem;}
.mb35{margin-bottom: 3.5rem;}
.mb4{margin-bottom: 4rem;}
.mb45{margin-bottom: 4.5rem;}
.mb5{margin-bottom: 5rem;}
.mb55{margin-bottom: 5.5rem;}
.mb6{margin-bottom: 6rem;}
.mb65{margin-bottom: 6.5rem;}
.mb7{margin-bottom: 7rem;}
.mb75{margin-bottom: 7.5rem;}
.mb8{margin-bottom: 8rem;}
.mb85{margin-bottom: 8.5rem;}
.mb9{margin-bottom: 9rem;}
.mb95{margin-bottom: 9.5rem;}

.mla{margin-left: auto;}
.ml0{margin-left: 0rem;}
.ml05{margin-left: 0.5rem;}
.ml1{margin-left: 1rem;}
.ml15{margin-left: 1.5rem;}
.ml2{margin-left: 2rem;}
.ml25{margin-left: 2.5rem;}
.ml3{margin-left: 3rem;}
.ml35{margin-left: 3.5rem;}
.ml4{margin-left: 4rem;}
.ml45{margin-left: 4.5rem;}
.ml5{margin-left: 5rem;}
.ml55{margin-left: 5.5rem;}
.ml6{margin-left: 6rem;}
.ml65{margin-left: 6.5rem;}
.ml7{margin-left: 7rem;}
.ml75{margin-left: 7.5rem;}
.ml8{margin-left: 8rem;}
.ml85{margin-left: 8.5rem;}
.ml9{margin-left: 9rem;}
.ml95{margin-left: 9.5rem;}

.pra{padding-right: auto;}
.pr0{padding-right: 0rem;}
.pr05{padding-right: 0.5rem;}
.pr1{padding-right: 1rem;}
.pr15{padding-right: 1.5rem;}
.pr2{padding-right: 2rem;}
.pr25{padding-right: 2.5rem;}
.pr3{padding-right: 3rem;}
.pr35{padding-right: 3.5rem;}
.pr4{padding-right: 4rem;}
.pr45{padding-right: 4.5rem;}
.pr5{padding-right: 5rem;}
.pr55{padding-right: 5.5rem;}
.pr6{padding-right: 6rem;}
.pr65{padding-right: 6.5rem;}
.pr7{padding-right: 7rem;}
.pr75{padding-right: 7.5rem;}
.pr8{padding-right: 8rem;}
.pr85{padding-right: 8.5rem;}
.pr9{padding-right: 9rem;}
.pr95{padding-right: 9.5rem;}
.pr10{padding-right: 10rem;}

.pla{padding-left: auto;}
.pl0{padding-left: 0rem;}
.pl05{padding-left: 0.5rem;}
.pl1{padding-left: 1rem;}
.pl15{padding-left: 1.5rem;}
.pl2{padding-left: 2rem;}
.pl25{padding-left: 2.5rem;}
.pl3{padding-left: 3rem;}
.pl35{padding-left: 3.5rem;}
.pl4{padding-left: 4rem;}
.pl45{padding-left: 4.5rem;}
.pl5{padding-left: 5rem;}
.pl55{padding-left: 5.5rem;}
.pl6{padding-left: 6rem;}
.pl65{padding-left: 6.5rem;}
.pl7{padding-left: 7rem;}
.pl75{padding-left: 7.5rem;}
.pl8{padding-left: 8rem;}
.pl85{padding-left: 8.5rem;}
.pl9{padding-left: 9rem;}
.pl95{padding-left: 9.5rem;}

.pta{padding-top: auto;}
.pt0{padding-top: 0rem;}
.pt05{padding-top: 0.5rem;}
.pt1{padding-top: 1rem;}
.pt15{padding-top: 1.5rem;}
.pt2{padding-top: 2rem;}
.pt25{padding-top: 2.5rem;}
.pt3{padding-top: 3rem;}
.pt35{padding-top: 3.5rem;}
.pt4{padding-top: 4rem;}
.pt45{padding-top: 4.5rem;}
.pt5{padding-top: 5rem;}
.pt55{padding-top: 5.5rem;}
.pt6{padding-top: 6rem;}
.pt65{padding-top: 6.5rem;}
.pt7{padding-top: 7rem;}
.pt75{padding-top: 7.5rem;}
.pt8{padding-top: 8rem;}
.pt85{padding-top: 8.5rem;}
.pt9{padding-top: 9rem;}
.pt95{padding-top: 9.5rem;}

.pba{padding-bottom: auto;}
.pb0{padding-bottom: 0rem;}
.pb05{padding-bottom: 0.5rem;}
.pb1{padding-bottom: 1rem;}
.pb15{padding-bottom: 1.5rem;}
.pb2{padding-bottom: 2rem;}
.pb25{padding-bottom: 2.5rem;}
.pb3{padding-bottom: 3rem;}
.pb35{padding-bottom: 3.5rem;}
.pb4{padding-bottom: 4rem;}
.pb45{padding-bottom: 4.5rem;}
.pb5{padding-bottom: 5rem;}
.pb55{padding-bottom: 5.5rem;}
.pb6{padding-bottom: 6rem;}
.pb65{padding-bottom: 6.5rem;}
.pb7{padding-bottom: 7rem;}
.pb75{padding-bottom: 7.5rem;}
.pb8{padding-bottom: 8rem;}
.pb85{padding-bottom: 8.5rem;}
.pb9{padding-bottom: 9rem;}
.pb95{padding-bottom: 9.5rem;}


.italic{font-style: italic;}
.tgood{color: hsl(140, 80%, 50%);}

.tbad {
	color: hsl(10, 90%, 50%);
	animation: tbad-pingpong 2.2s cubic-bezier(0.4,0,0.6,1) infinite alternate;
}

@keyframes tbad-pingpong {
	0% {color: hsl(10, 90%, 50%);}
	100% {color: hsl(15, 90%, 50%);}
}

.rag-left{text-align: right; hyphens: none;}
.rag-right{text-align: left; hyphens: auto;}
.rag-center{text-align: center;}

.contribution{
	background-image: linear-gradient(180deg, hsla(204, 100%, 11%, 0.395), hsla(0, 0%, 0%, 0));
	border-radius: 12px;
}

.contributiontag{
	display:block;
	background-image: linear-gradient(-30deg,hsla(160, 90%, 30%, 0.4), hsla(200, 70%, 45%, 0.1));
	height:3.5rem;
	margin:1rem auto;
	font-family: inter;
	font-weight: 600; 
	font-size: 3rem; 
	padding:0 0.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cursor-blink {
	margin-left:2px;
	animation: blink 1.5s steps(1) infinite;
}

@keyframes blink {
	0%, 100% { opacity: 0; }
	50% { opacity: 1; }
}

.hash{scroll-margin-top: 116px;}

/* Bullet Library 

• ∙ ▪ ◉ ○ ◦ ⦾ ⦿ ⦰ ⦻ ⦾ ⦿ ⧈ ◎ ◽ ⓿ ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ */

/* Displays */

.inline{display:inline;}
.inline-block{display:inline-block;}
.block{display:block;}
.hidden{display:none;}
.hidehover:hover{display:none;}
.flex{display:flex;}

/* Audio thingamajig */

audio {
	width: 520px;
	outline: none;
}

/* Chrome, Safari, Edge (WebKit) */
audio::-webkit-media-controls-panel {
	background-image: linear-gradient(30deg, hsl(165, 90%, 50%) 0%, hsl(200, 70%, 45%) 90%);
}

audio::-webkit-media-controls-panel:hover {
	background-image: linear-gradient(45deg, hsl(165, 90%, 50%) 20%, hsl(200, 70%, 45%) 90%);
	transition: background-image 0.4s ease;
}

/* Play button */
audio::-webkit-media-controls-play-button {
	background-color: hsl(23, 70%, 65%);
	border-radius: 32px;
	scale:1.5;
	margin:0 1rem 0 0.125rem;
}
audio::-webkit-media-controls-play-button:hover {
	background-color: hsl(165, 90%, 80%);
	border-radius: 50%;
}

/* Highlight borders */

.borderfx {
    position: relative;
    transition: all 0.3s ease;
    z-index: 15; /* Higher than your grid system's z-index: 10 */
}

.borderfx::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(90deg, #ff0080, #00ffff, #8000ff, #ff8000, #ff0080);
    background-size: 300% 100%;
    animation: hlightswim 6s linear infinite;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
    z-index: 12; /* Above your overlay icos z-index: 10 */
    opacity: 0.8;
    transition: all 0.3s ease;
    pointer-events: none;
}

.borderfx:hover::after {
    padding: 4px;
    opacity: 1;
    animation-duration: 3s;
}

@keyframes hlightswim {
    to { background-position: 300% 0; }
}

.borderfx.red::after {
	background: linear-gradient(90deg, hsl(0, 98%, 36%), hsl(10, 82%, 43%),hsl(0, 0%, 0%), hsl(0, 98%, 36%));
	background-size: 300% 100%;
}

.borderfx.green::after {
	background: linear-gradient(90deg, hsl(170, 98%, 36%), hsl(175, 82%, 43%),hsl(0, 0%, 0%),hsl(170, 98%, 36%));
	background-size: 300% 100%;
}

.borderfx.mono::after {
	background: linear-gradient(90deg, hsl(0, 0%, 0%), hsl(51, 0%, 100%), hsl(30, 0%, 50%), hsl(51, 0%, 100%), hsl(0, 0%, 0%));
	background-size: 300% 100%;
}

.borderfx.lite::after {
    padding: 1.5px;
}
.borderfx.lite:hover::after {
    padding: 1px;
}

.bradius05 {border-radius: 0.5rem;}
.bradius1 {border-radius: 1rem;}
.bradius2 {border-radius: 2rem;}
.bradius3 {border-radius: 3rem;}
.bradius4 {border-radius: 4rem;}

.bwidth1 {border-width: 1px;}
.bwidth2 {border-width: 2px;}
.bwidth3 {border-width: 3px;}

.noclick{pointer-events: none;}

.bborder{
	border-bottom: solid 2px var(--col-or0);
}



/* // MEDIA QUERY FUCKERY */

#viewport-wrapper {transform-origin: top left;}

@media (max-width: 1440px) {
	#viewport-wrapper {
		transform: scale(0.6);
		width: calc(100vw / 0.65); /* Makes it "feel" normal size */
		/* DO NOT set height or overflow here */
	}
	.header{
	top:-10.8rem;
	width:106.95%;
	}
	.footer-container {
	width: 106.95%;}
}

.header-warn{display:none}

@media (max-width:1079px){
	.header-warn{display: flex;} 
}

/* MEDIA QUERY FUCKERY // */

/* top gradient */

.top-grad{
background: radial-gradient(ellipse at top center, hsla(189, 81%, 31%, 0.2) 0%, transparent 70%) center top / 100% 40vh no-repeat;
}

.ls0{letter-spacing:0rem;}
.ls-01{letter-spacing:-0.1rem;}
.ls-02{letter-spacing:-0.2rem;}
.ls-03{letter-spacing:-0.2rem;}
.ls01{letter-spacing:0.1rem;}
.ls02{letter-spacing:0.2rem;}

.platformico64{
max-height: 60px;
max-width: 16%;
object-fit: contain;
}


.pulse-btn {
	position: relative;
}

.pulse-dot {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	width: 8px;
	height: 8px;
	background: var(--col-or0);
	border-radius: 50%;
	animation: pulse-dot 1s infinite ease-in-out;
	display: block; /* hidden by default */
}

.pulse-dot-nav {bottom: 0.5rem; right: 0.5rem;}
.pulse-dot-art {bottom: 1.3rem; left: -1rem;}

@keyframes pulse-dot {
	0%, 100% {
    transform: scale(1);
    opacity: 1;
	}
	50% {
	transform: scale(1.1);
	background: var(--col-or1);
	opacity: 1;
	}
}