:root {
	--page-margin : 5vw;
	--accent-main : radial-gradient(ellipse at bottom, #eee 0%, #fff 100%);
	--color-text : #000;
	--color-grey:rgb(161, 161, 170);
	--color-orange: #ff8f00;
	--color-blue: #0097ff;
	--color-green: lime;
	--color-purple: #f918ff;
}

[data-mode="dark"] {
	--accent-main : radial-gradient(ellipse at bottom, #0d1651 0%, #020b1a 100%);
	--color-text  : #fff;
}

/** SKELETON **/
* {
    margin: 0px;
    padding: 0px;
}

html, body {
	--doc-height: 100%;
}

html{
	color: var(--color-text);
	background : var(--accent-main);
	min-height: 100vh;
}

body {
	font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
	overflow-y: scroll;
    font-style: normal;
	font-size: 12px;
}

body.menu-open{
	overflow-y: hidden;
}

.va {
	display: block;
	position: relative;
}

.va > div {
	left: 0;
	top: 0;
	height: 100dvh;
	position: fixed;
}

.vm {
	left: 0;
	top: 0;
	height: 100dvh;
	height: -webkit-fill-available;
	position: fixed;
	background-color: transparent;
	display: grid;
    justify-content: space-between;
    grid-template-columns: 100%;
	grid-template-rows: 8dvh 84dvh 8dvh;
	z-index: 1;
}

.menu-open .vw {
	opacity: 0;
	visibility: hidden;
}

.vw {
	opacity: 1;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: hidden;  
	align-items: center;
	visibility: visible;
	gap: 0 18px;
}

.v-md {
	display: none;
}

@media only screen and (min-width: 800px) {

	.vw {
		gap: 0 20px;
	}

	.v-md {
		display: block;
	}
}

@media only screen and (min-width: 1280px) {
	
	body {
		font-size: 15px;
	}

	.vm {
		grid-template-rows: 9vh 82vh 9vh;
	}

	.vw {
		gap: 0 22px;
	}
}

@media only screen and (min-width: 1440px) {

	body {
		font-size: 16px;
	}

	.vm {
		grid-template-rows: 10vh 80vh 10vh;
	}

	.vw {
		gap: 0 24px;
	}
}


/* TYPOGRAHPY */

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fz-hero{
	font-size: 2.7em;
	font-weight: 400;
}

.fz-name{
	font-size: 1.15em;
	font-weight: 400;
}

.fz-task{
	font-size: 1.05em;
	font-weight: 300;
}

a {
	color: var(--color-text);
	text-decoration: none;
}

@media only screen and (min-width: 810px) {
	.fz-hero{
		font-size: 3.75em;
	}

	.fz-name{
		font-size: 1.3em;
	}

	.fz-task{
		font-size: 1.1em;
	}
}

@media only screen and (min-width: 1280px) {
	.fz-hero{
		font-size: 4em;
	}

	.fz-name{
		font-size: 1.4em;
	}

	.fz-task{
		font-size: 1.2em;
	}
}

@media only screen and (min-width: 1440px) {

	.fz-hero{
		font-size: 5em;
	}

	.fz-name{
		font-size: 1.55em;
	}

	.fz-task{
		font-size: 1.2em;
	}
}

/* LAYOUT */
.flx {
	display: flex;
}

.grd {
	display: grid;
}

.aic {
	align-items: center;
}

.jcc {
	justify-content: center;
}

.dnone {
	visibility: hidden;
}

.hide {
	position: fixed;
	opacity: 0;
}

img {
	width: auto;
	margin: auto;
}

html[data-mode="dark"] img.icon {
	-webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
}

.cl-orange{
	color: var(--color-orange);
}

.cl-grey{
	color: var(--color-grey);
}

.bg-orange{
	background-color: var(--color-orange);
}

.bg-blue{
	background-color: var(--color-blue);
}

.bg-green{
	background-color: var(--color-green);
}

.bg-purple{
	background-color: var(--color-purple);
}

/* ACCENT */
.globe {
	--size: 72vh;
	position: absolute;
	top: 0;
    bottom: 0;
	left: 3vw;
    margin: auto;
	font-size: calc(var(--size)/100);
	width: var(--size);
	height: var(--size);
	isolation: isolate;
	opacity:0.35;
	pointer-events: none;
    z-index: -1;
	transform: scale(1);
	animation: maploader 3.7s ease-in-out;
}

.globe .earth {
	position: absolute;
	top: -15%;
	left:-15%;
	width: 130%;
	height:130%;
}

.globe .halo, .globe .edge {
	width: 100em;
	height: 100em;
	position: absolute;
	left: 0;
	top: 0;
	transform: rotate(-52deg);
	border-radius: 50%;
	box-shadow: #1e85db52 -0.8em 0 5.8em -1.5em inset;
	pointer-events: all;
}

.globe .halo {
	font-size: 106%;
	margin: -3em;
	box-shadow: #2172ffe0 -2.2em 0 3.1em -0.5em inset, #001426d9 -2.9em 0 3.8em -0.9em inset, #0084ff30 -59em 0 18em -41em inset;
	mix-blend-mode: color-dodge;
	color: #5291ff9e;
	filter: drop-shadow(0.4em 0 4.6em) blur(0.25em);
	touch-action: none;
}

.globe .halo::before, .globe .halo::after{
	content: '';
	display: block;
	height: 100%;
	border-radius: 50%;
	box-shadow: #309bff -1.3em 0 0.9em -0.8em inset;
	mix-blend-mode: color-dodge;
}

.globe .halo::after{
	margin-top: -100%;
}

@keyframes maploader {
	0% {
		opacity: 0;
	  	transform:  scale(.1);
	}
	80% {
		opacity: .5;
	 	transform: scale(1.12) ;
	}
	100% {
		opacity: .3;
	 	transform: scale(1) ;
	}
}

/** SPACING **/
.mt-half {
	margin-top: .5em;
}

.mt-1{
	margin-top: 1em;
}

.mt-2{
	margin-top: 2em;
}

.mt-3{
	margin-top: 3em;
}

.mt-4{
	margin-top: 4em;
}

.mt-5 {
	margin-top: 5em;
}

.pl-3 {
	padding-left: 3em;
}


/* HEADER */
header{
	padding: 0 var(--page-margin ) ;
}

header .panel {
	justify-content: space-between;
	align-items: end;
	height: 100%;
	height: -webkit-fill-available;
}

.brand .left{
	margin-right: 10px;
}

.brand h1{
	font-size: 1em;
}

.tagline {
    line-height: 0.75;
	margin-top: 7px;
}

.tagline p {
	line-height: .8;
	color: var(--color-grey);
	position: absolute;
	margin-left: 18px;
}

/** FOOTER **/
.menus,
footer,
.dotbrand,
header .action {
	opacity: 0;
}