// Fonts
$font-family:					Prompt, sans-serif

$font-weight-normal:			500
$font-weight-bold:				700

// Container
$container-width:				600px

// A unit to use for padding
$pad:							20px

// Borders
$border-radius:					4px

// Colours
$black:							hsl(0, 0%, 4%)
$white:							hsl(0, 0%, 100%)
$grey:							hsl(0, 0%, 97%)
$light:							hsl(0, 0%, 80%)

$primary:						#ff2e52
$primary-inverted:				$white

// Background Colours
$bg-light:						$white
$bg-dark:						$grey

// Text Colour
$text:							$black
$link:							$primary

// Font sizes
$font-size-small:				12px
$font-size-normal:				16px
$font-size-large:				20px

$line-height-small:				16px
$line-height-normal:			22px
$line-height-large:				28px

// Headings
$title-1:						30px
$line-height-title-1:			40px

// Remove spaces around the email design added by some email clients
html, body
	margin: 0 auto !important
	padding: 0 !important
	height: 100% !important
	width: 100% !important

// Stop email clients resizing small text
*
	-ms-text-size-adjust: 100%
	-webkit-text-size-adjust: 100%

// Centers email on Android 4.4
div[style*="margin: 16px 0"]
	margin: 0 !important

// forces Samsung Android mail clients to use the entire viewport
#MessageViewBody, #MessageWebViewDiv
	width: 100% !important

// Stop Outlook from adding extra spacing to tables
table, td
	mso-table-lspace: 0pt !important
	mso-table-rspace: 0pt !important

// Fix a webkit padding issue
table
	border-spacing: 0 !important
	border-collapse: collapse !important
	table-layout: fixed !important
	margin: 0 auto !important

// Use a better rendering method when resizing images in IE
img
	-ms-interpolation-mode: bicubic

// Prevent Windows 10 Mail from underlining links despite inline CSS
a
	text-decoration: none

// A work-around for email clients meddling in triggered links
a[x-apple-data-detectors], .unstyle-auto-detected-links a, .aBn
	border-bottom: 0 !important
	cursor: default !important
	color: inherit !important
	text-decoration: none !important
	font-size: inherit !important
	font-family: inherit !important
	font-weight: inherit !important
	line-height: inherit !important

// Prevent Gmail from displaying a download button on large, non-linked images
.a6S
	display: none !important
	opacity: 0.01 !important

// Prevent Gmail from changing the text color in conversation threads.
.im
	color: inherit !important

// If the above doesn't work, add a .g-img class to any image in question.
img.g-img + div
	display: none !important

// Set font
*
	font-family: $font-family
	font-weight: $font-weight-normal

body
	mso-line-height-rule: exactly

// Links
a
	color: $link

	&:hover
		text-decoration: underline

// Center all content
center
	width: 100%

// Visually Hidden Pre-header Text
.pre-header
	max-height: 0
	overflow: hidden
	mso-hide: all

// Some whitespace
.whitespace
	display: none
	font-size: 1px
	line-height: 1px
	max-height: 0px
	max-width: 0px
	opacity: 0
	overflow: hidden
	mso-hide: all

// The main container
.container
	max-width: $container-width
	margin: 0 auto

	// Improve readability on small screens
	@media screen and (max-width: 600px)
		p
			font-size: 17px !important;

// Make tables fill the entire viewport horizontally
table
	width: 100%
	margin: auto

	// The header box
	tr.header
		td
			padding: $pad 0
			text-align: center

			h1
				margin: 0 0 10px 0
				font-size: 50px
				line-height: 60px
				font-weight: $font-weight-bold

				span
					color: $primary
					font-weight: i$font-weight-bold

	// The hero unit
	tr.hero
		td
			img
				display: block
				border: 0
				width: 100%
				max-width: $container-width
				height: auto
				background: $grey
				margin: auto

	// Content (i.e. the big box)
	tr.content
		td
			background-color: $bg-dark
			color: $text

			@media (prefers-color-scheme: dark)
				background-color: $bg-light

			table
				// One block in the box
				tr.section
					td
						padding: $pad
						font-size: $font-size-normal
						line-height: $line-height-normal

						// Headings
						h1
							margin: 0 0 10px 0
							font-size: $title-1
							line-height: $line-height-title-1

						// Text
						p
							padding: 8px 0
							margin: 0

							&:last-child
								padding: 0

						// Links
						a
							color: $link

							&:hover
								text-decoration: underline

				// Buttons
				tr.button
					td
						a
							display: block
							border: 1px solid $primary
							border-radius: $border-radius
							text-align: center
							font-size: $font-size-large
							font-weight: $font-weight-bold
							line-height: $line-height-large
							text-decoration: none
							padding: 16px 20px
							color: $white

							&.primary
								background-color: $primary
								color: $primary-inverted

								&:hover
									background-color: $primary-inverted
									color: $primary

				// Change the padding on the last element
				//tr:last-child
				//	td
				//		padding: 0 $pad

	// Footer
	tr.footer
		td
			padding: $pad
			font-size: $font-size-small
			line-height: $line-height-small
			color: $light
			text-align: center

			// Make links grey, too
			a
				color: inherit