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

: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 {
	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;
}

.text {
	display: flex;
	width: 100vw;
	height: 100%;
	position: absolute;
	align-items: center;
	justify-content: center;
	z-index: 2;
	mix-blend-mode: difference;
}

.text-small {
	display: flex;
	width: 100vw;
	height: 100%;
	position: absolute;
	align-items: center;
	justify-content: center;
	margin-top: 60px;
	z-index: 2;
	mix-blend-mode: difference;
}

p {
	font-size: 24px;
	letter-spacing: 0.04em;
	line-height: 120%;
	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: 10px 18px 12px 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;
}

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