/* base.css */

@font-face {
	font-family: 'public-sans-regular';
	src: url('/static/fonts/public-sans/public-sans-regular.woff2') format('woff2'), url('/static/fonts/public-sans/public-sans-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'public-sans-light';
	src: url('/static/fonts/public-sans/public-sans-light-regular.woff2') format('woff2'), url('/static/fonts/public-sans/public-sans-light-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'public-sans-thin';
	src: url('/static/fonts/public-sans/public-sans-thin-regular.woff2') format('woff2'), url('/static/fonts/public-sans/public-sans-thin-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

:root {
	--color-pink: rgb(255, 102, 153);
	--color-blue: rgb(131, 214, 247);
	--color-orange: rgb(255, 123, 57);
	--color-asphalt: #333333;
	--color-void: #808080;
	--color-meh: #c4c4c4;
	--color-pale: #f2f2f2;

	--action-color: var(--color-pink);
	--alert-color: var(--color-orange);

	--border-color-dark: var(--color-blue);
	--border-color-light: var(--color-blue);
	--text-color-dark: var(--color-void);
	--text-color-light: var(--color-meh);

	--header-height: 50px;
	--row-vertical-spacing: 5px;
	--row-horizontal-spacing: 15px;
	--inner-padding: 15px;
	--border-width: 1px;
	--section-margin: 20px;

	--light-font-weight: 300;
	--medium-font-weight: 400;
	--heavy-font-weight: 600;

	--font-weight-base: var(--light-font-weight);
	--line-height-base: 1.1em;
	--letter-spacing-base: 0.017;
	--font-size-base: 20px;

	--font-weight-5: var(--light-font-weight);
	--line-height-5: 1.1em;
	--letter-spacing-5: var(--letter-spacing-base);
	--font-size-5: calc(var(--font-size-base) + 1.6em);

	--font-weight-4: var(--light-font-weight);
	--line-height-4: 1.1em;
	--letter-spacing-4: var(--letter-spacing-base);
	--font-size-4: calc(var(--font-size-base) + 1.2em);

	--font-weight-3: var(--light-font-weight);
	--line-height-3: 1.1em;
	--letter-spacing-3: var(--letter-spacing-base);
	--font-size-3: calc(var(--font-size-base) + 0.8em);

	--font-weight-2: var(--light-font-weight);
	--line-height-2: 1.1em;
	--letter-spacing-2: var(--letter-spacing-base);
	--font-size-2: calc(var(--font-size-base) + 0.4em);

	--font-weight-0: var(--light-font-weight);
	--line-height-0: 1.1em;
	--letter-spacing-0: var(--letter-spacing-base);
	--font-size-0: calc(var(--font-size-base) - 0.4em);
}

body, html, div, section, p, h1, h2, h3, h4, h5, img, ul, ol, li {
	margin: 0;
	padding: 0;
	color: var(--text-color-dark);
	font-weight: var(--font-weight-base);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-base);
	font-size: var(--font-size-base);	
	font-family: 'public-sans-light', sans-serif;
}

a {
	color: var(--color-orange);
	text-decoration: none;
}

hr {
	border-top: solid 1px var(--border-color-light);
}

ol , ul {
	list-style: none;
}

strong {
	font-weight: var(--heavy-font-weight);
}

h1, h2, h3, h4 {
	font-family: 'public-sans-thin', sans-serif;
	margin-bottom: 0.2em;
}

h1 {
	font-size: var(--font-size-4);
	line-height: var(--line-height-4);
}
h2 {
	font-size: var(--font-size-3);
	line-height: var(--line-height-3);
}
h3 {
	font-size: var(--font-size-2);
	line-height: var(--line-height-2);
}
h4 {
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

fieldset {
	margin: 0; 
	padding: 0;
	border: 0;
}

form label {
	display: block;
	font-size: 1rem;
	color: var(--text-color-dark);
	padding: 0;
	margin: 0 0 var(--row-vertical-spacing) 0;
}

form div.form-error {
	margin-top: calc(3 * var(--row-vertical-spacing));
	color: var(--color-red-warm);
}

form input[type=text], input[type=email], form input[type=password] {
	padding: 5px;
	font-size: 1rem;
	margin: 0 0 calc(2 * var(--row-vertical-spacing)) 0;
}

form button {
	padding: 5px;
	font-size: 1rem;
	border: 0;
	background-color: var(--action-color);
}

form button:hover {
	background-color: var(--alert-color);
}

th {
	font-family: 'public-sans-thin', sans-serif;
}

header {
	position: relative;
	background-color: white;
	height: var(--header-height);
	padding: var(--row-vertical-spacing) var(--row-horizontal-spacing);
	border-bottom: solid var(--border-width) var(--border-color-dark);
}

header > a:first-child {
	font-size: var(--font-size-4);
	font-family: public-sans-thin, sans-serif;
	line-height: 1em;
	color: var(--color-pink);
}

header > .links {
	position: absolute;
	right: var(--row-horizontal-spacing);
	top: 50%;
	transform: translate(0, -50%);
	color: var(--text-color-light);
}

header > .links > li {
	display: inline-block;
	vertical-align: top;
	text-align: right;
	padding-left: var(--inner-padding);
}

header > .links > li > a {
	color: var(--text-color-dark);
	text-decoration: none;
}

/* below 768 */
@media (max-width: 767px) {
	header {
		height: inherit;
	}

	header > .links {
		position: relative;
		right: 0;
		top: 0;
		transform: none;
		margin: var(--row-vertical-spacing) 0;
	}

	header > .links > li:first-child {
		display: none;
	}

	header > .links > li {
		padding: 0;
		text-align: left;
		margin-right: 0.1em;
	}
}


#page {
	position: relative;
	background-color: white;
	min-height: 100vh;
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
}

#content {
	position: relative;
}

.row {
	position: relative;
}

.row.inner-padded {
	padding: var(--row-vertical-spacing) var(--row-horizontal-spacing);
}

.post-list > * {
	margin-bottom: var(--section-margin);
}

.post-content > p {
	margin-bottom: var(--inner-padding);
}

.post-content img {
	max-width: 100%;
	height: auto;
	max-height: 800px;
}

.post-content ul {
	padding-left: 1em;
	list-style: disc;
	margin-bottom: var(--inner-padding);
}