@font-face {
	font-family: "Alumni Sans";
	src: url("/assets/fonts/subset-AlumniSans-Bold.woff2") format("woff2"),
		url("/assets/fonts/subset-AlumniSans-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("/assets/fonts/subset-DMSans-Medium.woff2") format("woff2"),
		url("/assets/fonts/subset-DMSans-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("/assets/fonts/subset-DMSans-Regular.woff2") format("woff2"),
		url("/assets/fonts/subset-DMSans-Regular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-display: "Alumni Sans", "Impact", sans-serif;
	--font-body: "DM Sans", "Helvetica", "Arial", sans-serif;

	--color-page: #fcfaf7;
	--color-body: #1b1b1b;
	--color-header: #dfdfd8;
	--animation-timing: 0.6s;
}

html, body {
	font-family: var(--font-body);
	line-height: 1.4;
}


img {
	max-width: 100%;
}

.font-display {
	font-family: var(--font-display);
	font-weight: bold;
	text-transform: uppercase;
}

#wrap { background: var(--color-page); padding: 50px 0; }

/* HEADER */

.head { background: black; padding: 20px 0; width: 100%; text-align: center; }
.head img { width: 100px }

/* PAGE */

.cont, .foot, .post { max-width: 750px; margin: 0px auto; padding: 0 20px; }

.item { margin-bottom: 50px; }

.center { text-align: center; }

.cont h2, .post h2 { font-size: 1.3em; font-weight: 500; }

.post img { width: 100%; }
.post ul { list-style-type: circle; }
.post li { padding: 0 0 10px 0; }


/* FOOTER */

footer { background: white; padding: 50px 0; }

footer p { margin: 0; }

.cont h1, .post h1, footer h1 { font-family: var(--font-display); text-transform: uppercase; margin: 0;
  font-size: 1.5em; }

footer ul.sponsors {  list-style-type: none; padding: 0; }
footer ul.sponsors li { width: 24%; display: inline-block; }
footer ul.sponsors li.img { width: 100%; }


a.link_button {
	display: inline-block;
	background-color: var(--color-body);
	color: var(--color-page, white);
	line-height: 1;
	padding: 1em;
	text-decoration: none;
	margin-top: 1em;
	margin: 5px 10px;
	border: 1px solid var(--color-body);
	border-radius: 5px;
}

a.link_button:hover {
	background-color: white;
	color: var(--color-body);
	border: 1px solid var(--color-body);
}


@media only screen and (max-width: 800px) {

	.head img { width: 50px }
	.cont h2, .post h2 { font-size: 1em; }
	a.link_button { padding: 0.7em; }

}