@import url('https://fonts.googleapis.com/css2?family=Aldrich&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	font-size: 120%;
	--color1: black;
	--color2: rgb(243, 243, 243);
	--background: rgb(244, 238, 238);
	--background-light: rgba(5, 5, 5, 0.645);
	--padding: 1.5rem;
	--body-copy: 1rem;
	--footer-height: 5rem;
	--shadow: 0 0 0.8rem rgb(255, 255, 255);
	--line-height: 1.4rem;
}

body {
	padding-block-start: var(--padding);
	padding-block-end: var(--footer-height);
}

.background {
	width: 100%;
	height: 100%;
	position: fixed;
	inset-inline-start: 0;
	inset-block-start: 0;
	z-index: -10;

	/* I was looking for an interesting gradient for a background of my index */
	/* Saw this technique for gradient mixing with blend modes on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Images/Using_gradients */
	/* By layering gradients in opposite directions and using a blend mode, the result is a nice complex blend */

	background:
	linear-gradient(to right, #717171, #191919),
	linear-gradient(to top, rgb(96, 96, 96), rgb(20, 20, 20));
	background-blend-mode: overlay;
}

.border {
	height: 0.35rem;
	width: 100%;
	background-color: rgba(0, 0, 0, 0);
	box-shadow: var(--shadow);
	margin-block: var(--padding);
}

footer .border {
	margin-block: 0;
	position: fixed;
	inset-block-start: 0;
}

img, .project p {
	padding-inline: 25%;
}

h1 {
	font-weight: 700;
	font-size: calc(3* var(--body-copy));
	font-family: "Aldrich", sans-serif;
	color: var(--background);
	text-shadow: var(--shadow);
}

header p {
	font-style: italic;
	max-width: 38ch;
}

em {
	font-style: italic;
	font-weight: 500;
}

button h2 {
	color: var(--color1);
}

h2, p {
	font-family: "Libre Franklin", sans-serif;
	color: var(--background);
}

h2 {
	font-weight: 700;
}

p {
	line-height: var(--line-height);
}

button {
	background: radial-gradient(ellipse,rgb(221, 255, 251) 0%, rgba(255, 255, 255, 1) 80%);
	padding-block: calc(var(--padding)/2);
	padding-inline: var(--padding);
	margin-inline-start: 25%;
	border-radius: 3rem;
	margin-block-end: var(--padding);
	box-shadow: var(--shadow);
}

button:hover {
	background: linear-gradient(0deg,rgba(206, 224, 224, 0.45) 0%, rgba(201, 201, 201, 0.4) 23%, rgba(235, 232, 232, 0.4) 43%, rgba(201, 201, 201, 0.45) 74%, rgba(206, 224, 224, 0.4) 100%);;
	color: var(--color2);
	transition: 200ms ease-in-out;
	box-shadow: none;
	mix-blend-mode: lighten;
}

header h1 {
	margin-block-end: calc(var(--padding) / 4);
}

header {
	margin-block-end: calc(1*var(--padding));
	padding-inline-start: var(--padding);
}

footer {
	display: flex;
	position: fixed;
	width: 100%;
	justify-content: left;
	padding-block-end: calc(var(--padding) / 2);
	padding-block-start: calc((var(--padding) / 2));
	inset-block-end: 0;
	inset-inline-start: 0;
	column-gap: var(--padding);
	background-color: var(--background-light);
	backdrop-filter: blur(0.2rem);
	box-shadow: var(--shadow);
}

footer button {
	margin-block-end: 0;
	padding-block: calc(var(--padding)/4);
}

img {
	padding-block-start: var(--padding);
	display: block;
	width: 100%;
	height: auto;
}

/* Bringing in cursor effect from my manuscript project for fun */

.cursor {
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
	opacity: 0;
  }
}

@media (width < 1200px) {
	img, .project p {
		padding-inline: 0;
		margin-inline: var(--padding);
	}

	.project button {
		margin-inline-start: 0;
		margin-inline: var(--padding);
	}

	img {
		width: calc(100% - (2 * var(--padding)));
	}
}

@media (width < 550px) {
	:root {
		font-size: 90%;
	}

	h1 {
		font-size: calc(2* var(--body-copy));
	}

	header p {
	max-width: none;
	margin-inline-end: var(--padding);
	}
}