:root {
	--text-colour: #F5F5F5;
	--link-colour: cyan;
	--active-link-colour: red;

	--text-glow: 0 0 2px var(--text-colour);
	--link-glow: 0 0 2px var(--link-colour);
	--active-text-glow: 0 0 2px var(--active-link-colour);
	--border-glow: var(--text-glow), var(--text-glow) inset;
	
	--border: ridge white 4px;
	--button-border: solid grey 1px;
	--button-gradient: linear-gradient(180deg,rgba(255, 255, 255, 1) 25%, rgba(170, 170, 170, 1) 75%);
	--button-gradient-active: linear-gradient(0deg,rgba(255, 255, 255, 1) 25%, rgba(170, 170, 170, 1) 75%);

	--hr-border: solid var(--text-colour) 1px;
}
			
body {
	background-color: black;
	color: var(--text-colour);
	text-shadow: var(--text-glow);
	margin: 10px auto;
	width: 1000px;
}

div.foreground {
	display: grid;
	grid-template:
		"header header header header header"
		"nav main main main main"
		"aside main main main main"
		"footer footer footer footer footer";
	grid-template-columns: repeat(5, 1fr);
	gap: 5px;
}

div.foreground > * {
	border: var(--border);
	border-radius: 12px;
}

header, nav, main, footer {
	padding: 5px;
}

header {
	background-image: url("../img/CoolBackground.bmp");
	padding: 5px 5px;
	grid-area: header;
}

nav {
	display: flex;
	flex-direction: column;
	grid-area: nav;
	background-image: url(../img/backgroundpink.bmp);
}

a {
	color: var(--link-colour);
	text-shadow: var(--link-glow);
}

nav a {
	color: var(--text-colour);
	text-shadow: var(--text-colour);
}

header a {
	color: var(--text-colour);
	text-decoration: none;
}

a:active {
	color: var(--active-link-colour);
	text-shadow: var(--active-text-glow);
}

ul {
	padding-left: 17px;
	margin: 0;
}

main {
	background-image: url("../img/CoolBackground.bmp");
	padding: 5px 5px;
	flex: 1;
	grid-area: main;
}

aside {
	padding: 5px 5px;
	border-left: var(--border);
	grid-area: aside;
	background-image: url(../img/backgroundcyan.bmp);
}

footer {
	padding: 5px 5px;
	border-top: var(--border);
	grid-area: footer;
	background-image: url("../img/CoolBackground.bmp");

	display: flex;
}

footer > *:first-child {
	flex: 1;
}

hr {
	border: var(--hr-border);
	border-radius: 1px;
	box-shadow: var(--text-glow);
}

button, input[type="submit"], input[type="button"] {
	border: var(--border);
	border-radius: 12px;
	background: var(--button-gradient);
	width: 100px;
}

button:active, input:active[type="submit"], input:active[type="button"]  {
	background: var(--button-gradient-active);
}

ul h4 {
	margin: 0;
}

ul p {
	margin: 0;
}

nav h3, aside h3 {
	margin: 7px 0;
}

label, input, textarea {
	display: block
}

fieldset {
	margin: 7px;
	border: solid var(--text-colour) 2px;
	border-radius: 12px;
	box-shadow: var(--border-glow);
}

form h3 {
	margin: 10px 0;
}

textarea, input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	
	border: solid var(--text-colour) 2px;
	box-shadow: var(--border-glow);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.5);

	padding: 4px;
	
	color: var(--text-colour);
	text-shadow: var(--text-glow);
}

textarea {
	overflow: none;
	resize: vertical;
}

@media screen and (width < 1000px) {
	body {
		width: 100%;
	}
}

@media screen and (width < 700px) {
	div.foreground {
	grid-template:
		"header header header header"
		"nav main main main"
		"aside main main main"
		"footer footer footer footer";
	grid-template-columns: repeat(4, 1fr);
	}
}