/* Extra small devices (portrait phones, less than 576px) */
:root {
	/* Global Variables for easy access */
	--bg-color: #121212;
	--font-size: 21px;

	--text-color-ascii: rgba(255, 255, 255, 0.5);
	--text-color: #ffffff;
	--link-color: #ffffff;
	--link-color-hover: #ffffff;
	--link-deco: none;
	--link-deco-hover: underline;

	--gutter: 17px;
	--border-radius: 6px;

	/* Based on material design studies */
	--dp01: rgba(255, 255, 255, 0.05);
	--dp03: rgba(255, 255, 255, 0.08);
	--dp08: rgba(255, 255, 255, 0.12);
	--dp24: rgba(255, 255, 255, 0.16);

	--text-shadow-ascii: rgba(0,0,0,0.5);

	/* The `rem` sizes will refer to this definition */
	font-size: var(--font-size);
	font-family: monospace;
}

* {
	box-sizing: border-box;
	color: var(--text-color-ascii);
}

small {
	font-size: 0.6rem;
}

small a {
	font-size: inherit;
}

body {
	margin: 0;
	/* padding: var(--gutter); */
	padding: 0;
	background-color: var(--bg-color);
	font-size: 1rem;
	color: var(--font-size);
	display: flex;
	flex-direction: column;
	align-items: center;
}


a {
	color: var(--link-color);
	text-decoration: var(--link-deco);
	font-size: 0.8rem;
}

a:hover {
	color: var(--link-color-hover);
	text-decoration: var(--link-deco-hover);
	/* text-shadow: 0 0 15px var(--link-color-hover); */
}

hr {
	border-color: var(--dp03);
	width: 100%;
	border-width: 1px 0 0 0;
	margin: var(--gutter) 0;
}

/********************/
/****** Header ******/
/********************/

header#hero {
	width: 100%;
	max-width: 1200px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--gutter);
}

header#hero > nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 2vh 0;
}

header#hero > nav > a {
	flex-grow: none;
	padding: var(--gutter);
	/* text-shadow: 0 0 10px var(--text-shadow-ascii); */
}


/********************/
/****** Tiles *******/
/********************/

div.tile {
	background-color: var(--dp01);
	padding: var(--gutter);

	/* box-shadow: var(--dp01) 0 0 10px; */
}

div.tile h2 {
	margin-top: 0;
}


/********************/
/****** Main ********/
/********************/

main {
	width: 100%;
	max-width: 800px;
	padding: 0 var(--gutter) 10vh;
}


/********************/
/****** Footer ******/
/********************/

footer {
	background-color: var(--dp01);
	padding: var(--gutter);
	text-align: justify;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* border-top-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius); */
}

footer * {
	max-width: 500px;
	/* text-shadow: 0 0 4px var(--text-shadow-ascii); */
}

footer p:first-of-type {
	margin-top: 0;
}

footer p:last-of-type {
	margin-bottom: 0;
	text-align: center;
}

footer > nav {
	/* Implemented this with grid but doesnt look good imo. */
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 100%;
}

footer > nav a {
	margin: var(--gutter) 0;
	display: block;
}


/***********************/
/****** SVG Stuff ******/
/***********************/

svg.ascii-art > text tspan.logo-vx {
	/* fill: var(--text-color); */
}

svg.ascii-art > text tspan.logo-underground {
	/* fill: var(--dp24); */
}

svg.ascii-art > text > tspan {
	white-space: pre;
	font-family: monospace;
	fill: var(--text-color-ascii);
	/* text-shadow: 0 0 10px var(--text-shadow-ascii); */
}

svg.ascii-art > text .col-red {
	fill: #ff0000;
	text-shadow: 0 0 10px #ff0000;
	animation: heartbeat 20s infinite both;
	animation-delay: 2s;
}

@keyframes heartbeat {
	0% {
		fill: #ff0000;
	}
	0.5% {
		fill: #000000;
	}
	1% {
		fill: #ff0000;
	}
	1.5% {
		fill: #000000;
	}
	2% {
		fill: #ff0000;
	}
	100% {
		fill: #ff0000;
	}
}


/************************************/
/****** Responsive Breakpoints ******/
/************************************/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	footer > nav {
		/* Implemented this with grid but doesnt look good imo. */
		flex-direction: row;
		text-align: start;
		justify-content: space-between;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

	header > nav {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	header > nav > a {
		padding: var(--gutter);
		flex-grow: 1;
		text-align: center;
	}
	
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

}