/* maple-mono-latin-400-italic */
@font-face {
	font-family: 'Maple Mono';
	font-style: italic;
	font-display: swap;
	font-weight: 400;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-italic.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-italic.woff) format('woff');
}

/* maple-mono-latin-800-normal */
@font-face {
	font-family: 'Maple Mono';
	font-style: normal;
	font-display: swap;
	font-weight: 800;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-800-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-800-normal.woff) format('woff');
}

/* nunito-latin-wght-normal */
@font-face {
	font-family: 'Nunito Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 200 1000;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/nunito:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
	/* font configuration */
	--title-font: 'Maple Mono', monospace;
	--text-font: 'Nunito Variable', sans-serif;
	--link-weight: 500;
	--default-weight: 400;
	--title-weight: 700;

	/* container and hover configuration */
	--radius: 28px;
	--transparency: 15%;
	--blur: 3.7px;
	--hover-transparency: 85%;
	--gaps: 10px;

	/* Rosé Pine theme */
	--rp-base: #191724;
	--rp-surface: #1f1d2e;
	--rp-overlay: #26233a;
	--rp-muted: #6e6a86;
	--rp-subtle: #908caa;
	--rp-text: #e0def4;
	--rp-love: #eb6f92;
	--rp-gold: #f6c177;
	--rp-rose: #ebbcba;
	--rp-pine: #31748f;
	--rp-foam: #9ccfd8;
	--rp-iris: #c4a7e7;
}

html, body {
	height: 100%;
	font-size: 1.2rem;
}

body {
	display: flex;
	margin: 0px;
	flex-direction: column;
	background-image: url('./assets/pond-bg.avif');
	background-color: var(--rp-base);
	background-position: center;
	font-family: var(--text-font);
	font-weight: var(--default-weight);
	color: var(--rp-text);
}

p {
	font-weight: var(--link-weight);
	text-align: center;
	margin-bottom: 0px;
	padding-bottom: var(--gaps);
}

.container {
	border-radius: var(--radius);;
	padding: var(--gaps);
	gap: 0.5rem;
	background: color-mix(in srgb, var(--rp-overlay), transparent var(--transparency));
	backdrop-filter: blur(var(--blur));
	-webkit-backdrop-filter: blur(var(--blur));

	margin: auto;
	display: flex;
	align-items: stretch;
	justify-content: space-evenly;
	flex-direction: row;
	gap: 1rem;
	flex-wrap: wrap;
}


.title {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-direction: column;
	margin: auto;
}

.logo {
	width: 50%;
	height: 50%;
	padding-top: var(--gaps);
	margin: auto;
	border-radius: 25%;
}

h2 {
	font-family: var(--title-font);
	font-style: italic;
	text-align: center;
	margin-bottom: 0px;
	color: var(--rp-gold);
	font-weight: var(--default-weight);
}

h1 {
	font-family: var(--title-font);
	font-weight: bold;
	color: #aaabdb;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
}

.links {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 2rem;
	margin: auto;
}

.links > a {
	background-color: var(--rp-overlay);
	border: 1px solid var(--rp-muted);  /* NOTE: border required for high contrast mode */
	border-radius: var(--radius);
	padding: var(--gaps);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.5s;
	width: 100%;
	height: 100%;
	gap: 0.5rem;
	background: var(--rp-overlay);

	margin: auto;
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 1rem;

	color: var(--rp-text);
	font-family: var(--text-font);
	font-weight: var(--link-weight);
}

.iris:hover {
	background-color: color-mix(in srgb, var(--rp-iris), transparent var(--hover-transparency));
}

.love:hover {
	background-color: color-mix(in srgb, var(--rp-love), transparent var(--hover-transparency));
}

.foam:hover {
	background-color: color-mix(in srgb, var(--rp-foam), transparent var(--hover-transparency));
}

.pine:hover {
	background-color: color-mix(in srgb, var(--rp-pine), transparent var(--hover-transparency));
}

.rose:hover {
	background-color: color-mix(in srgb, var(--rp-rose), transparent var(--hover-transparency));
}


.social-icon {
	width: 24pt;
	height: 24pt;
	padding-left: var(--gaps);
}

/* handle smaller screens by making the container take up the full page (remove
 * rounded corners) */
@media screen and (max-width: 914px)  {
	.container {
		border-radius: 0px;
	}
}