/* Author: Paweł Błaszczuk */

/* ----------------------------------------------------------- */
/* Primary styles */

:root
{
	--white: #ffffff;
	--black: #323232;
	--light-warm-gray: #f7f5f3;
	--teal-100: #2d7a67; 
	--teal-80: #579585; /* 80% of #2d7a67 */
	--teal-20: #d5e4e1; /* 20% of #2d7a67 */
	--pink: #e5cac7;
	/* Note: There are some redundancies in the CSS code for color declaration for IE11 support */
}

*, *:after, *:before
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html
{
	height: 100%;
}

body
{
	font-family: 'Kodchasan', 'Verdana', sans-serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.5em;
	letter-spacing: 0.0125em;
	color: #323232; /* IE11 support */
	color: var(--black);
	background-color: #f7f5f3; /* IE11 support */
	background-color: var(--light-warm-gray);
	min-height: 100%;
	margin: 0;
	padding: 0;
}

main, header
{
	display: block; /* Workaround for IE11 */
}

.container
{
	margin: 0 auto;
	max-width: 550px;
	width: 90%;	
}

::selection
{
	background-color: #e5cac7; /* IE11 support */
	background-color: var(--pink);
}

/* ----------------------------------------------------------- */
/* Page header */

header
{
	text-align: center;
	padding: 5em 0;
	background-color: #ffffff; /* IE11 support */
	background-color: var(--white);
}

.logo
{
	width: 100%;
	max-width: 21.5em; /* It allows to scale logo with proper proportion */
}

.logo-tagline
{
	margin: 1em 0 0 0;
}

/* ----------------------------------------------------------- */
/* Page content */

main
{
	padding: 5em 0;
}

main h1
{
	font-family: 'Baloo', 'Verdana', sans-serif;
	margin: 0;
	word-wrap: break-word;
	line-height: 1em;
}

main p
{
	margin: 1em 0;
}

main ul
{
	list-style: none;
	margin: 3em 0;
	padding: 0;
}

main ul li
{
	margin-bottom: 2em;
	display: flex;
	flex-direction: row;
}

main ul li:last-child
{
	margin-bottom: 0;
}

.contact-details
{
	display: flex;
	flex-direction: column;
}

.contact-details > div:first-child
{
	margin-bottom: 0.4em;
}

.icon
{
	margin-top: 0.1em;
	margin-right: 1.5em;
	width: 100%;
	max-width: 1.25em; /* It allows to scale icons with proper proportion */
}

.link
{
	color: #2d7a67; /* IE11 support */
	color: var(--teal-100);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid;
	border-bottom-color: #579585; /* IE11 support */
	border-bottom-color: var(--teal-80);
	padding: 0.125em 0;
}

.link:hover,
.link:focus
{
	outline: 4px solid;
	outline-color: #d5e4e1; /* IE11 support */
	outline-color: var(--teal-20);
	outline-offset: 0;
	background-color: #d5e4e1; /* IE11 support */
	background-color: var(--teal-20);
}

/* ----------------------------------------------------------- */
/* Styles for mobile viewport */

@media screen and (max-width: 500px) 
{
	.contact-details
	{
		flex-basis: 13em;
	}
}

@media screen and (max-width: 320px) 
{
	body
	{
		font-size: 18px;
	}
}