/* add this to every new page. this file imports basic CSS and FONTS used throughout the website */
@import url(/assets/css/body.css);

:root {
	--border: 5px ridge #455270;
}

body {
	background: var(--pink-d);
	background-color: rgba(185, 105, 180, 0.997);
	background-image: url(/assets/bgs/algae-bg.png);
	background-blend-mode: screen;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	background-attachment: fixed;
}

/* wrapper for the whole thing! */
div#wrapper {
	margin: 15px auto 0 auto;
	max-width: 1200px;
	height: 95vh;
	display: grid;
	grid-template-areas:
		"nav nav"
		"header header"
		"nav-articles main"
		"footer footer"
		"arrows arrows";
	grid-template-rows: min-content min-content auto min-content min-content;
	grid-template-columns: 1fr 4fr;
}

nav#icons {
	padding-top: 13px;
	grid-area: nav;
	flex: 140px;
	display: flex;
	justify-content: right;
	margin-bottom: 10px;
	flex-wrap: wrap;
	a {
		line-height: 0;
		margin: 0 4px;
		/* styles each of the icons' imgs */
		img {
			border: 2px solid var(--white);
			border-radius: 50%;
			width: 60px;
			box-shadow: 1px 1px 3px var(--purple-d);
			&:hover {
				box-shadow:
					-1px -1px 3px var(--white),
					1px 1px 3px var(--white);
			}
		}
	}
}

button {
	color: #d4d4ffd3;
	border: 0px;
	border-radius: 5px;
}

header {
	grid-area: header;
	border: var(--border);
	background-color: #9a7499e6;
	h1 {
		margin: 0;
		color: var(--white);
		padding: 5px;
		font-size: 1.5em;
		&::before {
			color: var(--white);
			content: "✎∿ ";
		}
	}
}

nav.articles {
	grid-area: nav-articles;
	overflow: auto;
	padding: 5px;
	border: var(--border);
	border-top: 0;
	border-right: none;
	background-color: #b3cbbeac;
	background-size: cover;
	background-blend-mode: screen;
	a {
		color: rgb(131, 58, 131);
		text-decoration: none;
		&:hover {
			color: rgb(55, 55, 121);
		}
	}
	ul {
		margin: 0;
		padding: 0;
		li {
			display: list-item;
			list-style-position: inside;
			&:hover {
				&::marker {
					content: ">";
					color: rgb(55, 55, 121);
				}
			}
		}
		li::marker {
			color: rgb(131, 58, 131);
			content: "> ";
		}
	}
}

main {
	grid-area: main;
	overflow: auto;
	padding: 20px;
	background-color: #d4d4ffd3;
	border: var(--border);
	border-top: 0;
	p {
		margin: 0;
	}
}

div#arrows {
	padding: 0 10px;
	display: flex;
	grid-area: arrows;
	justify-content: space-between;
	a.prev,
	a.next {
		display: block;
		filter: drop-shadow(1px 1px 2px rgb(55, 55, 121))
			drop-shadow(-1px -1px 2px rgb(55, 55, 121));
		color: white;
		line-height: 25px;
		font-size: 2.5em;
		text-decoration: none;
		&:hover {
			color: rgb(55, 55, 121);
		}
	}
}

footer {
	grid-area: footer;
	text-align: center;
	border: var(--border);
	border-top: 0;
	background-color: #d2d2d2;
	p {
		margin: 0;
		padding: 0;
	}
}

@media screen and (max-width: 1206px) {
	div#wrapper {
		max-width: 90vw;
	}
}

@media screen and (max-width: 500px) {
	div#wrapper {
		grid-template-areas:
			"nav nav"
			"header header"
			"main main"
			"nav-articles nav-articles"
			"footer footer"
			"arrows arrows";
		grid-template-rows:
			min-content min-content minmax(min-content, 30px)
			max-content min-content;
	}

	nav.articles {
		border-right: var(--border);
		li {
			margin: 2px 4px;
		}
	}

	nav#icons {
		justify-content: space-evenly;
		a {
			margin: 1px;
			img {
				width: 50px;
			}
		}
	}
}