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

:root {
	/* sizes */
	--width: 70vw;
	--max-w: 2000px;
}

body {
	background-image:
		url(/assets/bgs/jelly.png), url(/assets/bgs/jelly-alt.png),
		url(/assets/bgs/jelly-pattern.png);
	background-color: #5e5c6d;
	background-repeat: no-repeat, no-repeat, repeat;
	background-size: contain, contain, 300px;
	background-attachment: fixed;
	background-position: right, left;
}

/* site header */
header {
	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;
		min-width: 370px;

		p {
			color: var(--white);
		}
	}

	/* 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 {
				margin: 0 5px;
				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 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: auto;
	width: var(--width);
	max-width: var(--max-w);
	text-align: center;
}

article {
	flex: 1 1 390px;
	max-width: 500px;
	border-radius: 5px;
	background: #9ee9d4eb;
	padding: 15px;
	padding-top: 3ch;
	width: 20vw;
	margin: 20px;
	transition-duration: 1s;

	img.cover {
		float: left;
		margin: 10px;
	}

	&:hover {
		filter: drop-shadow(-1px -1px 5px var(--pink-d))
			drop-shadow(1px 1px 5px var(--pink-d));
	}

	ul,
	ol {
		text-align: left;
		li::marker {
			color: var(--pink-d);
		}
	}

	h2 {
		position: absolute;
		right: -10px;
		top: -10px;
		background: white;
		color: var(--pink-d);
		padding: 6px 30px;
		border-radius: 20px;
		margin: 0;
	}
	h3 {
		color: var(--dark);
	}
}

button {
	background: var(--dark);
	color: var(--pink-d);
	border: 3px ridge var(--green-d);
	&:hover,
	&:focus {
		color: var(--dark);
		background: var(--pink-d);
	}
}

footer {
	border: 1px solid white;
	border-radius: 10px;
	padding: 5px;
	width: var(--width);
	max-width: var(--max-w);
	margin: 50px auto 30px auto;
	background: rgba(255, 255, 255, 0.886);
	text-align: right;
	p {
		margin: 5px;
	}
}

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

	footer {
		width: 95vw;
	}
	header #site {
		min-width: 100%;
	}

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