/* 
 JFS - All lefts deserved. (copyleft)2025
*/

:root{
	--color0:#000;
	--color1:#00ffff;
	--color2:#ff00ff;
	--color3:#ffff00;
}
@media (prefers-color-scheme: dark) {
	--color0:#fff;
}

/* ==================================================================
Basic Stylings
These will affect every size of the site.
================================================================== */
*, *:before, *:after { 
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
}
html {
	font-size: 100%;
	cursor: default;
	overflow-y: scroll;
	-webkit-tap-highlight-color: transparent;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* color-scheme: light dark; */
}

body{
	font-size: 100%;
	margin: 0;
}

/* ===============================================
	body 
=============================================== */
body,
input,
select,
textarea,
form button,
button {
  font-family: 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
}
svg {
  display: inline-block;
}
body {
  color: #000;
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 1300px) {
  body {
	font-size: 20px;
  }
}

/* ===============================================
	h family || hfam 
=============================================== */
h1,
/* h2:not(.topic),
h3:not(.topic), */
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
  line-height: 1;
  text-align: left;
  text-rendering: auto;
  /* margin: 0 0 1.44em; */
}

h1{
	line-height:2;
	font-size:~'min(10vw, 10em)';
	display:block;
	position:relative;
	z-index:420;
}
h1 .trait{
	display:block;
	position:relative;
	
}
h1 .trait:after{ content:'';
	display:block;
	position:absolute;
	inset:-10px;
	z-index:-1;
	mix-blend-mode:overlay;
	opacity:0.9;
}
h1 .trait--top:after{
	background-color:var(--color1);
}
h1 .trait--mid{ z-index:-1; }
h1 .trait--mid:after{
	background-color:var(--color3);
}
h1 .trait--bot:after{
	background-color:var(--color2);
}