/* 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: 73vw;
	--max-w: 2000px;
	--border: 2px solid rgb(121, 101, 196);
}

body {
	background-blend-mode: color-burn;
	background-color: #7a8eb785;
	background-image: url(/assets/bgs/bg2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	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;
		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 {
				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;

	figure {
		flex: 1 1 290px;
		max-width: 500px;
		border-radius: 5px;
		border: var(--border);
		background: linear-gradient(
			180deg,
			rgb(172, 160, 226) 0%,
			rgb(152, 156, 227) 100%
		);
		padding: 15px;
		width: 20vw;
		transition-duration: 1s;
		&:hover {
			box-shadow: 8px 8px 0px var(--pink-d);
			img {
				mix-blend-mode: normal;
			}
		}

		img {
			border-radius: 5px 5px 0 0;
			border: 2px solid var(--green-l);
			max-width: 100%;
			transition-duration: 1s;
			&.no-border {
				border: 0;
			}
			&:hover {
				z-index: 10;
				transform: scale(1.2);
			}
		}

		figcaption {
			background: var(--lilac);
			border: 2px solid var(--green-l);
			padding: 30px 0 0 0;
			border-radius: 0 10px 10px 10px;
			width: 100%;
			/* little wrapper on the inside incase you want longer texts */
			.inside {
				padding: 10px;
				max-height: 5lh;
				overflow: auto;
			}

			h3 {
				position: absolute;
				right: -10px;
				top: -5px;
				background: var(--green-l);
				color: var(--dark);
				padding: 6px 30px;
				border-radius: 20px;
				margin: 0;
			}
			p {
				margin: 0;
			}
		}
	}
}

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-radius: 10px;
	padding: 5px;
	width: var(--width);
	max-width: var(--max-w);
	margin: 50px auto 30px auto;
	background: var(--lilac);
	text-align: right;
	border: var(--border);
	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;
	}
}