/* ROOT VARIABLES */
:root {
	/* COLOR VARIABLES */
	--color-white: #ffffff;
	--color-black: #000000;
	
	--color-gray-0:#333333;
	--color-gray-1:#666666;
	--color-gray-2:#888888;
	--color-gray-3:#aaaaaa;
	--color-gray-4:#cccccc;
	--color-gray-5:#dddddd;
	--color-gray-6:#e3e3e3;
	--color-gray-7:#eeeeee;
	--color-gray-8:#f3f3f3;
	--color-gray-9:#fafafa;
	
	--color-blue:#0A3F4B; /* DARK BLUE */
	

	/* FONT VARIABLES */
	--font-body:"Alegreya Sans",sans-serif;
	--font-title:"BioRhyme",Courier;
	--hero-end:30;
	}

/* ANIMATION */
@keyframes fadeIn {
  	0% { opacity: 0; }
  	100% { opacity: .8; }
	}

/* BODY STYLES */	
body {
	margin:0;
	font-family: var(--font-body);
	font-size:1em;
	line-height:1.5em;
	color:var(--color-gray-0);
	text-align:center;
	margin:auto;
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(255,255,255,1) 8%, rgba(236,234,231,1) 88%);
	border:1px solid var(--color-gray-4);
	margin:20px;
	height:calc(100vh - 42px);
	}

h1 {
	position:relative;
	width:50%;
	left:25%;
	margin-top:50px;
	color: var(--color-blue);
	font-size:20px;
	line-height:1.4em;
	font-weight:normal;
	text-align:center;
	animation:fadeIn;
	animation-duration:2s;
	}

div.logo {
	position:relative;
	width:40%;
	left:30%;
	margin-top:150px;
	opacity:80%;
	animation:fadeIn;
	animation-duration:2s;
	}
		
	div.logo::before {
			content:"";
			position:absolute;
			background-image:url("/images/lineweight_logo.svg");
			background-repeat:no-repeat;
			background-size:100%;
			filter:blur(4px);
			width:100%;
			height:300px;
			opacity:35%;
			top:2px;
			left:2px;
			}


div.note {
	position:absolute;
	right:41px;
	bottom:41px;
	color:var(--color-gray-3);
	font-size:14px;
	line-height:14px;
	}
	
	div.note a {
		text-decoration:none;
		color:var(--color-gray-1);
		}
		
	div.note a:hover {
		text-decoration:none;
		color:var(--color-gray-0);
		}