@font-face {
	font-family: Inter;
	src: url(../resources/fonts/inter.woff2) format("woff2-variations");
	font-display: swap;
	font-weight: 125 950;
	font-stretch: 75% 125%;
	font-style: normal
}

:root {
	--rosewater: #f5e0dc;
	--flamingo: #f2cdcd;
	--pink: #f5c2e7;
	--mauve: #cba6f7;
	--red: #f38ba8;
	--maroon: #eba0ac;
	--peach: #fab387;
	--yellow: #f9e2af;
	--green: #a6e3a1;
	--teal: #94e2d5;
	--sky: #89dceb;
	--sapphire: #74c7ec;
	--blue: #89b4fa;
	--lavender: #b4befe;
	--text: #cdd6f4;
	--subtext1: #bac2de;
	--subtext0: #a6adc8;
	--overlay2: #9399b2;
	--overlay1: #7f849c;
	--overlay0: #6c7086;
	--surface2: #585b70;
	--surface1: #45475a;
	--surface0: #313244;
	--base: #1e1e2e;
	--mantle: #181825;
	--crust: #11111b;
	--inverted-text: var(--crust);
	--selection-color: var(--mauve)
}

body {
	color: var(--text);
	font-family: Inter, system-ui, sans-serif;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background-color: var(--base);
	display: grid;
	grid-template-rows: auto 1fr auto;
}

main {
	margin-inline: auto;
	width: 90vw;
	max-width: min(90vw, 1100px);
}

footer {
	background-color: var(--mantle);
	width: 100%;
}

footer .info,
.legal {
	margin-inline: auto;
	text-align: center;
	margin-top: 2.0em;
	margin-bottom: 2.0em;
}

footer .legal a {
	font-size: unset;
	padding: unset;
}

main.homepage article {
	box-sizing: border-box;
	width: 100%;
	transition: box-shadow 0.5s ease-out, transform .4s ease-out;
	font-size: 1.2rem;
	border-radius: 8px;
	padding: 0.1em;
	padding-inline: 1.5rem;
	border: 2px solid var(--fg);
	display: block;
	background-color: var(--mantle);
	margin-bottom: 0.8em;
}

main.homepage article:hover,
main.homepage article:active {
	transition: box-shadow 0.10s ease-in, transform .15s ease-in;
	transform: scale(1.012);
	box-shadow: 0 0 10px 3px color-mix(in srgb, var(--peach), transparent 20%), 0 0 0px 1.5px color-mix(in srgb, var(--pink), transparent 20%);
}

main.homepage article > h3 {
	color: var(--text) !important;
}

main.homepage article > p {
	font-size: clamp(1rem, 2.0vw, 1.3rem);
	color: var(--subtext0);
}

main.homepage article .date {
	font-size: clamp(.8rem, 1vw, 1.0rem);
	color: var(--subtext1);
}

a {
	color: color-mix(in srgb, var(--blue), var(--text) 60%);
	text-decoration: none;
	padding: 0.9rem;
	font-size: clamp(1.2rem, 1.2vw, 1.2rem);
}

blockquote {
	border-left: 5px solid var(--blue);
	margin-left: 0;
	padding-left: 1em;
}

blockquote a {
	padding: 0;
}

.title {
	margin-inline: auto;
	width: 90vw;
	max-width: min(90vw, 1100px);
}

.title h1 {
	text-align: left;
	background-image: linear-gradient(120deg, var(--peach), var(--mauve));
	background-clip: text;
	color: transparent;
	font-size: clamp(4rem, 4vw, 4rem);
	margin-block: 0.2em;
	cursor: pointer;
}

.cat {
	position: relative;
	width: fit-content;
	background-image: linear-gradient(120deg, var(--peach), var(--mauve));
	background-clip: text;
	color: transparent;
	font-size: clamp(1.2rem);
	padding: 0;
	margin: -2em 0 -2em 0;
	letter-spacing: 0.9px;
	margin-inline: auto;
	font-weight: 900;
	font-family: monospace;
	text-shadow: 0px 0px 7px var(--peach);
	z-index: 2;
}

h1.article-title {
	margin-top: 0;
}

.article-body {
	transition: unset;
	box-shadow: unset;
	background: var(--mantle);
	border-radius: 1em;
	padding: 1em;
	margin-bottom: 2em;
	font-size: larger;
}

.info a:hover .arrow {
	display: inline-block;
	animation: linear 0.8s shoot;
}

.accent {
	display: grid;
	grid-template-columns: repeat(14, 1fr);
	width: 100%;
	height: 8px;
	background-color: var(--mauve);
	background-image: linear-gradient(90deg, var(--rosewater), var(--flamingo), var(--pink), var(--mauve), var(--red), var(--maroon), var(--peach), var(--yellow), var(--green), var(--teal), var(--sky), var(--sapphire), var(--blue), var(--lavender), var(--rosewater), var(--flamingo), var(--pink), var(--mauve), var(--red), var(--maroon), var(--peach), var(--yellow), var(--green), var(--teal), var(--sky), var(--sapphire), var(--blue), var(--lavender), var(--rosewater));
	background-size: 400% 100%;
	background-position: left;
	animation: gradient 20s linear infinite forwards;
}

.arrow {
	font-size: 60%;
	vertical-align: super;
}

.heart {
	font-size: 35%;
	vertical-align: super;
	letter-spacing: -8px;
	transform: translateY(-13px);
	display: inline-block;
	text-wrap: nowrap;
}

.pink {
	color: var(--blue);
	filter: saturate(80%);
}

.quotes{
	color: var(--pink);
}

::selection {
	background-color: color-mix(in srgb, var(--selection-color), transparent 70%)
}

@keyframes gradient {
	to {
		background-position: right
	}
}

@keyframes shoot {
	15% {
		transform: translateX(-2px) translateY(2px);
	}

	30% {
		transform: translateX(3px) translateY(-3px);
	}

	42% {
		transform: translateX(-0.75px) translateY(0.75px);
	}

	45% {
		transform: translateX(0px) translateY(0px);
	}
}