html {
	box-sizing:border-box;
}

body {
	margin: 0;
	background: #0a0a0a;
	color:rgba(255,255,255,0.7);
	font-family:"Manrope", sans-serif;
	font-weight:200;
	font-size:clamp(16px,1vw,24px);
}

a, a:hover, a:focus, a:active, a:visited {
	text-decoration:none;
	color:rgba(255,255,255,0.7);
}


/* HEADER
------------------------*/
#header {
	/*border-bottom:1px solid rgba(255,255,255,0.1);*/
	position:fixed;
	z-index:99;
	top:0;
	left:0;
	width:94vw;
	height:auto;
	padding:3vw 3vw;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	gap:2vw;
}
h1 {
	font-size:100%;
	margin:0;
	padding: 0;
}
#header h1 span {
	opacity:0;
	display:block;
	width:1px;
	height:1px;
}
#header h1::before {
	display:block;
	content: "<Mihael-Zadravec />";
	font-weight:300;
	text-transform:uppercase;
	/*color:#ADB688;*/
}


/* FOOTER
------------------------*/
footer#footer {
	/*border-top:1px solid rgba(255,255,255,0.1);*/
	position:fixed;
	z-index:99;
	bottom:0;
	left:0;
	width:94vw;
	height:auto;
	padding:3vw 3vw;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	gap:2vw;
}

/* Tilt - Mouse Follow
------------------------*/
.tilt_MF {
	transform-style: preserve-3d;
}


/* LOGO with SHADER
------------------------*/
.logoWrap {
    display:flex;
    flex-direction: row;
    gap:7vw;
    justify-content: center;
    align-items: center;
    width:100vw;
    height:100vh;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
	@media screen and (max-width:1024px) {
		.logoWrap {
			flex-direction:column;
		    width:100%;
		    height:100%;
		}
	}
	
.logoPart {
    position:absolute;
    inset: 0;
    width:510px;
    height:510px;
}
	@media screen and (max-width:1024px) {
		.logoPart {
			width:390px;
			height:390px;
		}
	}
	@media screen and (max-width:480px) {
		.logoPart {
			width:220px;
			height:220px;
		}
	}
.logoPart svg,
.logoPart img {
    display: block;
    preserveAspectRatio: none;
    width:100%!important;
    height:100%!important;
	z-index:2;
}
	@media screen and (max-width:480px) {
		.logoPart img {
			width:221px!important;
			height:221px!important;
		}
	}

	.logoCanvasWrap {
		/*
		position: absolute;
		left: 100px; top: 100px;
		*/
		position:relative;
		width: 500px;
		height: 500px;
		z-index: 1;
		overflow:hidden;
	  }
		  @media screen and (max-width:1024px) {
			  .logoCanvasWrap {
				  width:380px;
				  height:380px;
			  }
		  }
		  @media screen and (max-width:480px) {
			  .logoCanvasWrap {
				  width:220px;
				  height:220px;
			  }
		  }
	  .logoCanvasWrap canvas {
		  width:calc(100% - 1px)!important;
		  height:calc(100% - 1px)!important;
		  z-index:1;
	  }

/**
* CURSOR BOX
**/
.cursor-box {
	position: fixed;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	background-color: rgb(154, 237, 112);
	mix-blend-mode: difference;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: 9999;
	border-radius: 0px;
	opacity: 0; /* skrito dokler ni prvi mousemove */
  }


  /**
* DECODE TEXT
**/
/*
.textDecode {
	display: flex;
	position: relative;
	opacity:0;
}
*/
.textDecode {
    /*font-family: monospace;*/
	opacity:0;
}
.char {
    display: inline-block;
    width: auto; /* 1ch */
    text-align: left;
}