:root {
	--color-bg: #282828;
	--color-bg-invisible: #28282800;
	--color-fg: #ccc;
	--color-link-fg: #98971a;
	--color-link-holo: #689d6a;
	--shadow-link-holo: 0 0 .3em #000;

	--link-border: .3ch solid var(--color-link-holo);
	--link-border-inactive: .3ch solid #444;

	--grid-filter: brightness(.3);
}

@media (prefers-color-scheme: light) {
	:root {
		--color-bg: #ccc;
		--color-bg-invisible: #ccc0;
		--color-fg: #111;
		--color-link-fg: #535c00;
		--color-link-holo: #458588;
		--shadow-link-holo: 0 0 .3em #0004;
		--link-border-inactive: .3ch solid #aaa;

		--grid-filter: brightness(.7);
	}
}

:focus {
	outline: .2em solid;
	outline-offset: .1em;
}


html {
	padding: 0;
	margin: 0;
	height: 100vh;
	overflow: hidden;
	text-align: center;
	color: var(--color-fg);
	background-color: var(--color-bg);
}

body {
	margin: 0;
	height: 100vh;
	overflow: scroll;
	display: flex; /*vertical centering is that easy!*/
	/* It even behaves correctly when there isn't enough space!*/
}

html::after {
	position: absolute;
	content: '';
	top: 45vh;
	bottom: 0;
	left: 0;
	right: 0;
	
	margin: 0;
	background-image: url("./grid_backdrop.svg");
	background-size: auto 200%;
	background-repeat: no-repeat;
	background-position: bottom;
	z-index: -20;
	overflow: hidden;
	mask-image: linear-gradient(to top, #fff, #fff0);
	filter: var(--grid-filter);
}

main {
	max-width: 60ch;
	margin: auto;
}

a {
	color: var(--color-link-fg);
}

ul.hologram-links {
	list-style: none;
	padding: 0;
	max-width: 40ch;
	margin: auto;
	font-size: 1.2em;
}

ul.hologram-links > li {
	margin: .5em .2em;
}

.hologram-links a {
	box-sizing: border-box;
	display: block;
	min-width: 10ch;
	text-align: center;
	margin: auto;
	position: relative;
	text-decoration: none;
	text-shadow: var(--shadow-link-holo);
}

.hologram-links a::before {
	position: absolute;
	top: 50%;
	right: -10%;
	bottom: 50%;
	left: -10%;
	background-image:
		linear-gradient(90deg, var(--color-bg-invisible) 50%, 82%, var(--color-link-holo) 91.5%, 93.5%, var(--color-bg-invisible) 100%), 
		linear-gradient(-90deg, var(--color-bg-invisible) 50%, 82%, var(--color-link-holo) 91.5%, 93.5%, var(--color-bg-invisible) 100%);
	background-position: center;
	background-size: 97%;
	background-repeat: no-repeat;
	content: "";
	opacity: 0;
	transition: opacity .5s ease-out, top .3s ease-in-out, bottom .3s ease-in-out, background-size .5s ease-in-out;
	z-index: -10;
}

.hologram-links a::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-left: var(--link-border-inactive);
	border-right: var(--link-border-inactive);
	content: "";
	z-index: -20;
	transition: border 1.5s linear, opacity 0.5s;
}

.hologram-links a:hover::after, .hologram-links a:focus::after {
	border-left: var(--link-border);
	border-right: var(--link-border);
	opacity: 0;
}

.hologram-links a:hover::before, .hologram-links a:focus::before {
	top: -5%;
	bottom: -5%;
	opacity: 1;
	background-size: 100%;
}