:root
{
	--light:#fff;
	--dark:#000;
	--accent:#FF2600;

	--page-width:1400px;
	--page-padding:25px;
	
	--spacing:15px;
	--spacing-double:30px;
	
	--default-font:"calibri", sans-serif;
	--default-type:20px;
	--default-line:26px;

	--small-type:16px;
	--small-line:21px;

	--curve:cubic-bezier(.23,.34,.18,1);	
}

html
{
	height:100%;
	scroll-behavior: smooth;
}
body
{
	margin:0;
	padding:0;
	height:100%;
	
	font-family:var(--default-font);
	font-size:var(--default-type);
	line-height:var(--default-line);
	font-weight:700;
	font-style:normal;

	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	
	background-color:var(--light);
	color:var(--dark);
	
	overflow:hidden;
}
body.dark
{
	--light:#000000;
	--dark:#faf8f5;
	--accent:#0000FF;
}

body *
{
	box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.is-hidden
{
	display:none !important;
}
.no-pointer-events
{
	pointer-events:none;
}
.pointer-events
{
	pointer-events:all;
}
.clickable
{
	cursor:pointer;
}
.dimmed
{
	opacity:.4;
}
.no-transition
{
	transition:none !important;
}
.no-scrollbar
{
	scrollbar-width: none; /* FF */
	-ms-overflow-style: none; /* Edge */
}
.no-scrollbar::-webkit-scrollbar
{
	display: none;
}
.flex
{
	display:flex;
}
.flex.center
{
	justify-content: center;
}
.flex-center-vertical
{
	align-items: center;
}
.flex-wrap
{
	flex-wrap:wrap;
}
.flex-break
{
	flex-basis:100%;
	height:0;
}
.clear:after
{
	content:'';
	display:table;
	clear:both;
}
.full-width
{
	width:100% !important;
}
.nowrap
{
	white-space:nowrap;
}
a
{
	color:inherit;
}
.accent
{
	color:var(--accent);
}
.outline
{
	color: transparent;
  -webkit-text-stroke: 1px var(--dark);
  text-stroke: 1px var(--dark);
}


#page
{
	padding:10px;
	width:100%;
	height:100%;
	display:flex;
	justify-content: center;
	align-items: center;
}

#dot
{
	position:absolute;
	left:0;
	top:5%;
	height:80%;
	aspect-ratio:1;
	background: radial-gradient(circle, rgba(100, 180, 180, .8) 0%, rgba(100, 180, 180, 0.4) 55%, transparent 70%);
	z-index:-1;
	transform-origin: 50% 50%;
}

#contact
{
	position:absolute;
	right:10%;
	bottom:5%;
	text-align:center;
	line-height:1;
	text-decoration:none;
	transition:opacity .4s ease 0s;
}
#contact.off
{
	opacity:0;
}

h1
{
	font-size:7.6vw;
	margin:0;
	margin-top:-1em;
	pointer-events:none;
}

.words
{
	position:absolute;
	line-height:.8;
	pointer-events:none;
}
.words span
{
	transition:opacity .4s ease 0s;
}
.words .hide
{
	opacity:0;
}

.words.t1
{
	left:-.6%;
	top:10%;
	font-size:max(55px,8vw);
}

.words.t2
{
	top:-5%;
	left:15%;
	font-size:38.5vh;
	line-height:.68;
}

.words.t3
{
	right:-3.5%;
	top:-5%;
	font-size:max(70px,8vw);
}

.words.t4
{
	left:15%;
	bottom:20%;
	font-size:max(34px,2vw);
}

.words.t5
{
	right:14%;
	top:52%;
	font-size:max(65px,8vw);
}

/* responsive layouts */

@media (max-width:900px)
{
	h1
	{
		font-size:min(13.5vw,68px);
	}
	.words.t3
	{
		right:-8%;
		top:-4%;
	}
}

@media (max-width:600px)
{
	#dot
	{
		top:10%;
		left:-60%;
		height:70%;
	}

	.words.t1
	{
		top:6%;
	}
	.words.t2
	{
		left:0%;
		top:3.5%;
		font-size:31vh;
	}
	.words.t4
	{
		left:7%;
		bottom:8%;
		font-size:4vh;
	}
	.words.t5
	{
		right:5%;
	}

	#contact
	{
		right:5%;
		bottom:2%;
		font-size:22px;
	}
}