@import url("common.css");

@import url("assets/fonts/giphurs.css");

:root {
	--surface: #060312;
	--on-surface-faint: #666561;
	--on-surface: #E6E3DA;
	--on-surface-bright: #FFFCF2;
	--primary: #FF672B;
	--secondary: #5C7AFF;
}

html {
	background: no-repeat url("assets/images/background.png") var(--surface);
	background-size: 600px;
	background-position: bottom right;
	background-origin: padding-box;
	background-attachment: fixed;

	transition: background-size 0.25s;
}

body {
	font-family: "Giphurs", sans-serif;
	font-size: 1.25rem;
	color: var(--on-surface);

	backdrop-filter: blur(20px);
}

@media (max-width: calc(800px + 32px)) {
	html {
		background-size: 500px;
	}
}

a {
	color: var(--secondary);
}

a:visited {
	color: var(--secondary);
}

.name {
	font-weight: bold;
	color: var(--primary);
}

code {
	border: 1px solid var(--on-surface-faint);
	border-radius: 8px;
	padding: 2px 4px;
	background-color: var(--surface);
}

ul li {
	padding: 4px 0px;
}

#footer {
	font-size: 1rem;
}