:root
{
    --pointmap-color:  				hsla(200, 100%, 40%, 1);
    --pointmap-color-hover:  		hsla(200, 100%, 34%, 1);
    --pointmap-color-active:  		hsla(200, 100%, 22%, 1);

    --text-color:                   #FFF;
}


html
{
	width:		100%;
	height:		100%;
	margin:		0px;
	border:		0px;
	font-family: Arial,sans-serive;
}

body
{
	width:			100%;
	height:			100%;
	margin:			0px;
	border:			0px;
	color:			var(--pointmap-color-hover);
	background:		linear-gradient(var(--pointmap-color), #FFF);
}

h1
{
	color:			var(--pointmap-color);
	font-family: 	'nasalization';
	font-size: 		300%;
	margin: 		10px 0px 0px 0px;
}


a
{
	color:				var(--pointmap-color);
	text-decoration: 	none;
	margin-top:			5px;
	display: 			inline-block;
}
a.login
{
	margin-top:			0px;
	text-decoration: 	underline;
	font-size: 			120%;
}


p
{
	margin:			20px 50px 10px 50px;
}


.logo
{
	position: 	absolute;
    left:		calc(50vw - 225px);
    top:		calc(20vh);
	width:		450px;
}
img#logo_icon
{
	height:			80px;
	margin-right:	10px;
}
img#logo_text
{
	height:		80px;
}
img#flag
{
	height:		40px;
	margin:		0px 0px 38px 5px;
}

.speech-bubble
{
    position: 			absolute;
    left:				calc(50vw - 225px);
    top:				calc(45vh);
    width:				450px;
    height:				180px;
	padding-top: 		20px;
	background:			rgba(255,255,255,0);
	border-radius: 		12px;
	font-family: 		'nasalization';
	font-size:			400%;
	text-align: 		center;
	color:			white;
	z-index:			100;
	user-select: 		none;
	-webkit-user-select: none;
}


.speech-bubble::after
{
  content: 	"";
  position: absolute;
  bottom: 	-60px;
  right: 	40px;
  width: 	0;
  height: 	0;
  border: 	30px solid transparent;
  border-top-color: rgba(255,255,255,0);
}

input
{
	position: 		relative;
	height:			30px;
	width:			calc(300px - 20px);
	font-size: 		100%;
	margin:			10px 50px 0px 50px;
	padding:		0px 10px 0px 10px;
	background:		rgba(255,255,255,0.8);
	border:			0px;
	border-radius:	8px;
}

input:focus
{
	outline: none;
  	box-shadow: 0 0 0 3px orange;
}

button
{
	position: 		relative;
	height:			34px;
	width:			300px;
	font-size: 		120%;
	color:			#FFF;
	margin:			20px 50px 0px 50px;
	background:		var(--pointmap-color);
	border:			0px;
	border-radius:	8px;
}
button:hover
{
	background:		var(--pointmap-color-hover);
}
button:active
{
	background:		var(--pointmap-color-active);
}





/*  === fonts ====================================================== */
/*  ================================================================ */

/*  Nasalization =========== */

@font-face {
  font-family: 'nasalization';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/nasalization.eot");
  src: url("fonts/nasalization.eot?#iefix") format("embedded-opentype"),
       url("fonts/nasalization.woff") format("woff"); 
}


/*  sourcesanspro ======== */

@font-face {
    font-family: 'sourcesanspro-regular';
    src: url('fonts/sourcesanspro.eot');
    src: url('fonts/sourcesanspro.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-bold';
    src: url('fonts/sourcesanspro-bold.eot');
    src: url('fonts/sourcesanspro-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-light';
    src: url('fonts/sourcesanspro-light.eot');
    src: url('fonts/sourcesanspro-light.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-thin';
    src: url('fonts/sourcesanspro-extralight.eot');
    src: url('fonts/sourcesanspro-extralight.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}