:root {
	--bg: rgb(239, 239, 239);
	--grad: rgb(220, 222, 239);
	--rad: rgb(31, 31, 42);
	--text: rgb(51, 51, 51);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 3.5vw;
}

body {
	padding: 0.75rem 1.5rem 2rem 1rem;

	background: var(--bg);
	color: var(--text);

	font-family: titling-gothic-fb, sans-serif;
	font-weight: 300;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--text);
	color: var(--bg);
	opacity: 1;
}

p {
	font-family: freight-display-pro, serif;
	font-weight: 500;
}

p a {
	font-family: titling-gothic-fb;
	font-size: 0.8em;
}

.head {
	margin-bottom: 0.75rem;

	color: var(--text);

	font-family: titling-gothic-fb, sans-serif;
	font-weight: 700;
	line-height: 1;
}

h1 {
	display: inline-block;
	font-size: 0.6em;
	background: -webkit-linear-gradient(left, var(--grad), var(--rad));
	opacity: 0.2;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.3s ease-out;
	cursor: default;
}

a {
	color: inherit;
	text-decoration: underline;
}

a:hover {
	color: inherit;
	text-decoration: none;
}

@media all and (max-width: 768px) {
	html {
		font-size: 28px;
	}

	body {
		padding: 0.8rem;
	}
}