doctype html
html
	head
		title {% block title %}{{ subject }}{% endblock %}
		style.
			@import url('https://fonts.googleapis.com/css?family=Roboto');

			html, body {
				font-family: 'Roboto', 'Noto Sans', sans-serif;
				font-size: 11pt;
				background-color: #eaebec;
				color: black;
			}

			section {
				max-width: 522px;
				/*width: 522px;*/
				margin: 0 auto 15px auto;
				padding: 10px 25px;
				box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
				background-color: white;
			}

			a:link {
				color: #2e99b8;
			}

			a:link, a:visited {
				text-decoration: none;
			}

			section.about, p.ps {
				color: #888;
				font-size: smaller;
			}

			section.about a:link, p.ps a:link {
				color: #7297ab;
			}

			h1 {
				text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.6);
				color: white;
				font-size: 30px;
				background: #d5d0cb url('https://cloud.blender.org/static/assets/img/email/background_caminandes_3_03.jpg') no-repeat top center;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				padding: 35px 25px;
				max-width: 522px;
				/*width: 522px;*/
				margin: 15px auto 0 auto;
			}

			h2, h3 {
				font-weight: 300;
				color: #eb5e28;
				position: relative;
			}

			p {
				line-height: 150%;
			}

			p.closing {
				margin-top: 2.5em;
			}

			p.buttons {
				text-align: center;
				margin: 4ex;
			}

			a.button {
				text-align: center;
				max-width: 30ex;
				padding: 5px 30px;
				text-decoration: none;
				border-radius: 3px;
				border: thin solid #2e99b8;
				color: #2e99b8;
				background-color: transparent;
				text-shadow: none;
				transition: color 350ms ease-out, border 150ms ease-in-out, opacity 150ms ease-in-out, background-color 150ms ease-in-out;
			}

			a.button:hover {
				color: white;
				background-color: #2e99b8;
			}
	body
		| {% block body %}{% endblock %}
