@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/Roboto-Regular.ttf') format('truetype');
	font-display: fallback;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/Roboto-Bold.ttf') format('truetype');
	font-display: fallback;
}

@font-face {
	font-family: 'Dancing-Script';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/DancingScript-Regular.ttf') format('truetype');
	font-display: fallback;
}

.roboto {
	font-family: 'Roboto';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-feature-settings: 'liga';
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

.dancing-script {
	font-family: 'Dancing-Script';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-feature-settings: 'liga';
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

:root {
	--horizon-top: max(8%, 90px);
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/*
body {
    background: linear-gradient(to left, #d3f2ff, #f4f8fa) no-repeat;
    background-size: 100% 101px;
    background-position: right top;	
}
*/

#root {
	position: relative;
	width: 100%;
	height: 100%;
}

#three-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to top, #fffef9, #f3fff3);
	background-size: 100% calc(100% - var(--horizon-top) - 12px);
	background-position: bottom;
	background-repeat: no-repeat;
    height: 100dvh;
}

/* HTML overlay layer */
#ui-layer {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: transparent;
	pointer-events: none;
}

#overlay {
	pointer-events: none;
}

.application-logo {
	position: absolute;
}