:root {
  --bg-color: black;
  --light-green: #9fe945;
  --text-bg: rgba(67,144,45,0.90);
  --text-color: white;
  --text-font-size: 1em;
}

* {
	margin: 0 auto;
}

body {
	background-color: var(--bg-color);
	text-align: center;
	background-image: url('../assets/bottombg.webp');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom;
	background-size: 100%;
	font-family: sans-serif;
	color: var(--text-color);
}


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

a:hover {
	text-shadow: 1px 2px 5px gray;
}

img {
	max-width: 100%;
	height: auto;
}

p, h1, h2 {
	margin-bottom: .5em;
}

h1, h2 {
	color: var(--light-green);
}

h2 {
	margin-top: 1em;
}

#wrapper {
	max-width: 697px;
	height: auto;
}

.logo {
	margin-top: 1em;
}

.text {
	background-color: var(--text-bg);
	border: 4px solid white;
	border-radius: 2em;
	box-shadow: inset 0 0 10px #000000;
	padding: 1em;
	margin: 1em;
	font-size: var(--text-font-size);
	text-shadow: 1px 2px 5px black;
	line-height: 1.5em;
	letter-spacing: .0625em;
	text-align: left;
}

.text-intro::first-letter {
	color: var(--light-green);
	font-size: 2em;
}

#link-list {
	width: 100%;
	display: grid;
	grid-gap: 1em;
	text-align: left;
}

.link-title {
	font-weight: bold;
	margin: 0px;
}
.link-title a {
	color: var(--light-green);
}

.link-description {
	background-color: rgba(0,0,0, 50%);
	border: 2px solid var(--light-green);
	border-radius: .5em;
	padding: 1em;
	margin-bottom: 1.5em;
	box-shadow: inset 0 0 8px #000000;
}

#copyright {
	text-shadow:
	0 0 5px #a0f6a4,
    0 0 10px #a0f6a4,
    0 0 20px #a0f6a4,
    0 0 40px #a0f6a4;
}

@media (orientation: portrait) {	
	#link-list {
		display: block;
	}
	
	.link-list title {
		width: 100%;
		text-align: left;
	}
}

@media (orientation: landscape) {
	#link-list {
			grid-template-columns: auto auto;
	}
}