/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap");
/* ------- */

:root {
	font-size: 20px;
	font-family: "Quicksand", sans-serif;

	/* COLOR PALETTE */
	--c-palette-white-rgb:				245, 254, 255;
	--c-palette-white-hex:				#f5feff;

	--c-palette-black-rgb:				27, 30, 36;
	--c-palette-black-hex:				#1b1e24;

	--c-palette-red-rgb:					255, 0, 64;
	--c-palette-red-hex:					#ff0040;

	--c-palette-green-rgb:				0, 255, 98;
	--c-palette-green-hex:				#00ff62;

	--c-palette-blue-rgb:					0, 140, 255;
	--c-palette-blue-hex:					#008cff;
	
	--c-palette-violet-rgb:				98, 63, 237;
	--c-palette-violet-hex:				#623fed;

	--c-palette-dark-teal-rgba:		64, 122, 124;
	--c-palette-dark-teal-hex:		#407a7c;


	/* COMMON VALUES */
	--v-default-padding:				1em;
	--v-default-border-radius:	1em;

	/* EASING */
	--easing-out-elastic:				cubic-bezier(0.6, 1.7, 0.5, 1);
	--easing-in-out-expo:				cubic-bezier(0.87, 0, 0.13, 1);
}


.DEBUG * {
	outline: 1px solid #ff00ff !important;
	background: rgba(255,0,255,0.05);
}

* {
	margin: 0;
	padding: 0;
	font: inherit;
	box-sizing: border-box;
}
*::before, *::after {box-sizing: border-box;}

html {
	color-scheme: dark light;
}

body {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	font-size: 100%;
	color: var(--c-palette-white-hex);
	background: linear-gradient(to bottom, var(--c-palette-black-hex) 0%, var(--c-palette-blue-hex) 300%);
	background-color: rgba(var(--c-palette-blue-rgb), 0.3);
	background-repeat: no-repeat;
}

img, picture, svg, video {display: block;}

h1			{font-size: 1.9em;	font-weight: 700;	letter-spacing: -1px;}
h2			{font-size: 1.5em;	font-weight: 700;	letter-spacing: -1px;}
h3			{font-size: 1.1em;	font-weight: 600;	letter-spacing: 0px;}
h4			{font-size: 0.75em;	font-weight: 400;	letter-spacing: 0px;}
p				{font-size: 0.85em;	line-height: 1.5;}
a				{color: inherit;		text-decoration: none;}


/* preloader */
div#preloader {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, var(--c-palette-white-hex) -50%, var(--c-palette-blue-hex) 100%);
	background-color: var(--c-palette-blue-hex);
	z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s linear;
}
div#preloader.loaded {opacity: 0;pointer-events: none;}
div#preloader .loading-icon {
	border: 0.3rem solid rgba(var(--c-palette-black-rgb), 0.5);
	border-top-color: var(--c-palette-white-hex);
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	animation: spin 1s ease-in-out infinite;
}



/* Landscape */
.landscape {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	pointer-events: none;
}

.landscape img.element {
	position: absolute;
	object-fit: cover;
	object-position: left 40% bottom 80%;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.landscape img.element#left-leaves			{z-index: 5; object-position: left 20% top 0%; scale: 0.5; transform-origin: 0% 0%; transform: translateX(-12%);}
.landscape img.element#right-leaves			{z-index: 5; object-position: 65% top; scale: 0.5; transform-origin: 100% 0%; transform: translateX(40%);}
.landscape img.element#land							{z-index: 4; transform: translateY(20%);}
.landscape img.element#tower						{z-index: 3; transform: translateY(20%);}
.landscape img.element#sky							{opacity: 1; z-index: -1;}



/* Main */
main {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 1em;
	width: 100%;
	height: 100%;
}


/* Logo section */
section#logo {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 1em;
	width: 60%;
	height: 40%;
}

section#logo .logo {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
}

section#logo .logo .letters {
	position: absolute;
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	width: 100%;
	height: 100%;
	mix-blend-mode: luminosity;
	transform: translateY(-100%);
}

section#logo .logo .letters.outline {
	z-index: 10;
}

section#logo .logo img.letter {
	width: 10vw;
}


/* Content section */
section#content {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 1em;
	width: 100%;
	height: 100%;
	padding: 1em;
}







/* ICONS */
[icon]::before {
	content: "\e421";
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1em;
	font-family: "Material Symbols Rounded";
	font-variation-settings: "FILL" 1, "wght" 500, "opsz" 48;
}
[icon-style="no-fill"]::before			{font-variation-settings: "FILL" 0, "wght" 500, "opsz" 48;}

[icon-scale="1.1"]::before					{font-size: 1.1em;}
[icon-scale="1.2"]::before					{font-size: 1.2em;}
[icon-scale="1.3"]::before					{font-size: 1.3em;}
[icon-scale="1.5"]::before					{font-size: 1.5em;}
[icon-scale="1.7"]::before					{font-size: 1.7em;}
[icon-scale="2"]::before						{font-size: 2em;}


[icon="call-active"]::before				{content: "\e61d";}
[icon="call-end"]::before						{content: "\e9cc";}
[icon="call-pause"]::before					{content: "\e620";}
[icon="call-incoming"]::before			{content: "\e0b5";}
[icon="call-outgoing"]::before			{content: "\e0b2";}
[icon="calendar"]::before						{content: "\ebcc";}
[icon="timer"]::before							{content: "\e425";}
[icon="mute"]::before								{content: "\e02b";}
[icon="chat"]::before								{content: "\e0b7";}
[icon="schedule"]::before						{content: "\e8b5";}
[icon="sparks-heavy"]::before				{content: "\e65f";}
[icon="sparks-light"]::before				{content: "\f136";}
[icon="sparks-graph"]::before				{content: "\f092";}
[icon="magic-wand"]::before					{content: "\e662";}
[icon="info-circle"]::before				{content: "\e88e";}
[icon="phone"]::before							{content: "\e0b0";}
[icon="envelope"]::before						{content: "\e158";}
[icon="house"]::before							{content: "\e88a";}
[icon="map"]::before								{content: "\e55b";}
[icon="map-pin"]::before						{content: "\e0c8";}
[icon="party-hat"]::before					{content: "\ea65";}
[icon="cake"]::before								{content: "\e7e9";}
[icon="flag"]::before								{content: "\e153";}
[icon="briefcase"]::before					{content: "\e8f9";}
[icon="heart-hand"]::before					{content: "\ea70";}
[icon="baby"]::before								{content: "\eb41";}
[icon="search"]::before							{content: "\e8b6";}
[icon="chevron-right"]::before				{content: "\e5e1";}
[icon="chevron-down"]::before				{content: "\e5e1"; rotate: 90deg;}
[icon="filter"]::before							{content: "\e152";}
[icon="loading"]::before						{content: "\e9d0";}
[icon="newspaper"]::before					{content: "\eb81";}
[icon="forward"]::before						{content: "\e154";}



/* ANIMATIONS */

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}