:root {
	--primary: #556B2F;
	--dark: #1F1F1E;
	--light: #fff;
}
body {
	font-family: "Lexend", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}
canvas {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
}
* {
	box-sizing: border-box;
}
html,
body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
html {
	scroll-behavior: smooth;
}
img,
svg {
	display: block;
	width: 100%;
	height: auto;
}
h2 {
	font-weight: 300;
	font-size: 2.5em;
}
header {
	position: fixed;
	width: 100%;
	z-index: 1111;
	overflow: hidden;
	max-height: 100px;
	transition: all 0.5s;
}
header .spacing-container {
	width: 100%;
	display: flex;
	justify-content: space-between;
	/* justify-content: flex-end; */
}
header.minimized-header {
	height: 0;
	max-height: 0;
}
.hero {
	min-height: 80dvh;
	display: flex;
	align-items: center;
}
.flex {
	display: flex;
	gap: 20px;
}
footer {
	background-color: var(--dark);
	color: var(--light);
	padding: 2em 0;
	color: #ccc;
	position: relative;
}
footer:before {
	content:'-✄┈┈┈┈';
	font-size: 3em;
	position: absolute;
	top: 0;
	line-height: 0;
	mix-blend-mode: difference;
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-end;
}
.logo {
	max-width: 70px;
	transition: all 0.3s;
}
.logo svg {
	transition: all 0.3s;
}
.logo:hover svg {
	transform: rotate(-45deg);
}
/* .logo:after {
	content: '';
	position: absolute;
	top:-15px;
	left:-15px;
	width: 30px;
	height: 30px;
	background-color: var(--dark);
	transform: rotate(-45deg);
} */
.spacing-container {
	padding: 2em;
}
.flex.work .col {
	width: 33%;
}
.flex.work p {
	margin: 0;
}
.flex.work strong {
	display: inline-block;
	/* text-transform: uppercase; */
	font-weight: 400;
	font-size: 1.5em;
	margin-bottom: 0.5em;
}
.block {
	margin-bottom: 2em;
}
.work span.tag {
	display: inline-block;
	border: 1px solid var(--dark);
	border-radius: 50px;
	padding: 0.2em 0.6em;
	margin-bottom: 0.2em;
	cursor: default;
	color: var(--dark);
}
a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
	color: var(--dark);
	position: relative;
}
a:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 4px;
	border-radius: 4px;
	background-color: var(--dark);
	bottom: 0;
	left: 0;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform .3s ease-in-out;
}
a:hover:before {
	transform-origin: left;
	transform: scaleX(1);
}
footer a:link,
footer a:visited,
footer a:active {
	color: var(--light);
}
footer a:before {
	background-color: var(--light);
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
::selection {
	background: var(--dark);
	color: var(--light);
}
svg {
	overflow: visible;
}
#mokka path {
	transition: all 0.5s;
	/* fill:var(--light); */
	stroke-width: 2;
	stroke: var(--dark);
	pointer-events: all;
	transition: 0.5s;
	overflow: hidden;
}
/* #mokka path:hover {
	stroke: var(--primary);
	stroke-width: 3;
} */

@media (max-width: 768px) {
	h2 {
		font-size: 1.5em;
	}
	.flex.work {
		flex-wrap: wrap;
		gap: 0;
	}
	.flex.work .col {
		width: 100%;
	}
	.spacing-container {
		padding: 1em;
	}
}
@media (max-width: 370px) {
	h2 {
		font-size: 1.15em;
	}
}


/* .rainbow_text_animated {
	background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
	background-clip: text;
	color: transparent;
	animation: rainbow_animation 6s ease-in-out infinite;
	background-size: 400% 100%;
}
@keyframes rainbow_animation {
	0%, 100% {background-position: 0 0;}
	50% {background-position: 100% 0;}
} */


.rainbow-bg {
	background-image: linear-gradient(to right top, #e0dfd6, #fff);
	animation: rainbow_animation 8s ease-in-out infinite;
	background-size: 400% 100%;
}
@keyframes rainbow_animation {
	0%, 100% {background-position: 0 0;}
	50% {background-position: 100% 0;}
}


/* splitting */
.splitting .char {
	animation: slide-in 1s cubic-bezier(.5, 0, .5, 1) both;
	animation-delay: calc(60ms * var(--char-index));
}
@keyframes slide-in {
	from {
		opacity: 0;
	}
}

/* splitting */
.items > * {
	animation: appear 1s cubic-bezier(.5, 0, .5, 1) both;
	animation-delay: calc(90ms * var(--item-index));
}
@keyframes appear {
	from {
		opacity: 0;
		transform: scale(2);
	}
}