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

/* this CSS sheet are for plain pages such as contact and updates! */

:root {
	--bg: linear-gradient(
		180deg,
		rgba(148, 193, 201, 0.7) 0%,
		rgb(255, 255, 255, 0.7) 100%
	);
	--width: 60vw;
	--max-w: 900px;
	--border: 2px solid #485f7b;
}

/* background: https://unsplash.com/photos/school-of-fish-in-body-of-water-C8X9mV6JlEA */
body {
	background-color: rgba(148, 193, 201, 0.834);
	background-blend-mode: screen;
	background-image: url(/assets/bgs/school.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/* site header */
header {
	border-radius: 10px;
	padding: 5px 15px;
	margin: 30px auto 10px auto;
	width: var(--width);
	max-width: var(--max-w);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row;

	/* left side area of the header */
	#site {
		flex: 1.5;
		display: flow-root;
		min-width: 370px;
		h1 {
			color: var(--dark);
		}
		p {
			color: var(--dark);
		}
	}

	/* right side area of the header */
	#icons {
		text-align: center;
		flex: 140px;
		display: flex;
		justify-content: space-evenly;
		align-items: flex-start;
		flex-wrap: wrap;

		a {
			margin: 5px 0;
			flex: 1;
			line-height: 0;
			/* 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);
				}
			}
		}
	}
}

main {
	padding: 20px;
	border-radius: 10px;
	background: var(--bg);
	margin: auto;
	width: var(--width);
	max-width: var(--max-w);
	border: var(--border);

	a {
		color: #cc7cc4;
	}
}

h2 {
	color: var(--dark);
}

footer {
	border-radius: 10px;
	padding: 5px;
	width: var(--width);
	max-width: var(--max-w);
	margin: 50px auto 30px auto;
	background: #e4f1f6;
	text-align: right;
	border: var(--border);
	p {
		margin: 5px;
	}
}

@media screen and (max-width: 1200px) {
	:root {
		--width: 95vw;
	}
}

@media screen and (max-width: 500px) {
	header #site {
		min-width: 100%;
	}

	header #icons a img {
		width: 50px;
	}
}