@font-face {
	font-family: 'sans-serif';
	src: url('../fonts/DuNord-Medium.woff2') format('woff2');
}

:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
  -webkit-user-select: none;
  -webkit-text-size-adjust: 100%;
}

::-webkit-scrollbar {
  display: none;
}

html,
body {
	background-color: #000000;
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100% !important;
	overflow: hidden !important;
}

body, h1, p, a {
	font-family: 'sans-serif', monospace;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: baseline;
	text-rendering: optimizeLegibility;
	font-weight: normal;
	font-optical-sizing: auto;
	font-feature-settings: "kern";
	font-kerning: normal;
	font-smooth: always;
}

.text {
	display: flex;
	width: 100vw;
	height: 100%;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	z-index: 2;
	mix-blend-mode: difference;
	text-align: center;
	max-width: 400px;
	margin: auto;
	opacity: 0;
	animation: fadeIn 0.6s ease-out 0.2s forwards;
}

.text-small {
	display: flex;
	width: 100vw;
	height: 100%;
	position: absolute;
	align-items: center;
	justify-content: center;
	margin-top: 98px;
	z-index: 2;
	mix-blend-mode: difference;
	opacity: 0;
	animation: fadeIn 0.6s ease-out 0.2s forwards;
}

p {
	font-size: 24px;
	letter-spacing: 0.7px;
	line-height: 140%;
	font-weight: normal;
	color: #ffffff;
}

a {
	font-size: 18px;
	letter-spacing: 0.042em;
	line-height: 120%;
	font-weight: normal;
	color: #ffffff;
	text-decoration: none;
	padding: 12px 18px 14px 20px;
	border: 1px solid currentcolor;
	/* border-radius: 80px; */
	/* background-color: rgba(30, 30, 30, 1); */
	transition: background-color 0.3s ease;
	/* border-bottom: 1px solid #333333; */
}

a:hover {
	background-color: rgba(30, 30, 30, 0.9);
}

#sketch-container {
	position: absolute;
	display: flex;
	width: 100vw;
	height: 100% !important;
	margin: 0;
	padding: 0;
	align-items: center;
	justify-content: center;
	z-index: 0;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media only screen and (max-width: 768px) {
	
	canvas {
		width: calc(100vw - 40px);
		height: 100% !important;
		overflow: hidden;
	}

	p {
		font-size: 24px;
		letter-spacing: 0.5px;
		line-height: 138%;
	}
	
}