:root {
	--bg-color: #222;
	--font-color: #fff;
	--a-color: #fff;
	--button-bg: #222;
	--button-bg-hover: #3C68B0;
}

/* pt-serif-regular - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-serif-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('PT Serif'), local('PTSerif-Regular'),
       url('../fonts/pt-serif-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-serif-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-serif-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-serif-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-serif-v11-latin-regular.svg#PTSerif') format('svg'); /* Legacy iOS */
}

/* pt-serif-700 - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/pt-serif-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local('PT Serif Bold'), local('PTSerif-Bold'),
       url('../fonts/pt-serif-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-serif-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-serif-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-serif-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-serif-v11-latin-700.svg#PTSerif') format('svg'); /* Legacy iOS */
}


body {
	background: var(--bg-color);
	display: flex;
	align-items: center;
	font-family: 'PT Serif', serif;
	letter-spacing: .025em;
	margin: 0;
	height: 100vh;
}

#content {
	background: #fff;
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin: 0 auto;
	width: 100%;
	max-width: 768px;
}

header {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
	position: relative;
}

header > h1 {
	color: #666;
	font-size: 2.6rem;
	font-weight: 700;
	margin: 1rem 0 0 0;
}

img {
	width: 100%;
	max-width: 288px;
	height: auto;
	margin: 0 auto;
}

img:hover {
	-webkit-filter: blur(.035em) grayscale(100%);filter: blur(.035em) grayscale(100%);
}

main {
    background: #333;
	color: var(--font-color);
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

footer {
	display: flex;
	justify-content: center;
}

h1, h2 {
	color: #fff;
	font-size: 1.5rem;
}

h2 {
	margin-bottom: 1rem;
}

h3 {
	margin-bottom: 0;
}

p {
	line-height: 1.5;
	font-weight: 700;
}

span {
	color: #666;
	margin: 0 5px;
}

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

a:hover,
a:focus {
	color: #ddd;
}

ul {
	display: flex;
	list-style: none;
	padding-left: 0;
}

li {
	padding: 1rem;
}

button {
	background: var(--button-bg);
	border: none;
	color: #fff;
	cursor: pointer;
	font-family: 'PT Serif', serif;
	letter-spacing: 1px;
	min-width: 130px;
	padding: 10px;
}

button:hover,
button:focus {
	background: var(--button-bg-hover);
}

button:active,
button:visited {
	background: var(--button-bg-hover);
}

.button-a {
	color: #fff;
	letter-spacing: 1px;
}