/* css for Jenny Gunnarssons portfolio */

body { font: 500 1.1em/1.5 "Quicksand", sans-serif; background-color: #e36f6f; color: #f5f5f5; margin: 0; -webkit-font-smoothing: antialiased; }
main { display: block; max-width: 1000px; margin: 0 auto; padding: 0 2em; }
h1 { font-size: 3.3em; line-height: 1; font-weight: 400; margin: 0 0 0.4em; -webkit-transition: all 0.2s; transition: all 0.2s; }
h1 > span { display: block; font-size: 0.6em; line-height: 1.8; font-weight: 300; }
h2 { font-size: 1.6em; font-weight: 400; margin: 0 0 .4em; }
p { margin: 0 0 1em; font-weight: 400; }
a { text-decoration: none; color: #f5f5f5; -webkit-transition: color 0.4s; transition: color 0.4s; }
a:focus, a:hover { color: #5a5a5a; }
p a { font-weight: 600; }
ul { padding: 0; margin: 0; list-style: none; }

/*********
Header
*********/
header { padding: 2.7em 2em 0; max-width: 1000px;  margin: 0 auto; }
.intro { margin-bottom: 2.5em; }
.link-list > li, .list > li { display: inline-block; margin: 0 .8em .8em 0; }
.link-list a { display: block; border: 1px solid #f5f5f5; border-radius: 10px 10px 0 10px; padding: .7em 1em; -webkit-transition: all 0.4s; transition: all 0.4s; }
.link-list a:focus, .link-list a:hover { background: #f5f5f5; color: #e36f6f;}
.list { margin: 0 0 1em; }
.list > li { border: 1px solid #f5f5f5; border-radius: 10px 10px 0 10px; padding: .7em 1em; }

/*********
Footer
*********/
footer { padding: 0 0 1.2em; }
footer > a { display: block; font-size: 1.5em; font-weight: 400; max-width: 1000px; margin: 0 auto; padding: 0 1.334em; }
.contact-list { background: #f5f5f5; margin: 2em 0 1.4em; }
.contact-list > ul { max-width: 1000px; margin: 0 auto; padding: 1.2em 2em; }
.contact-list > ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contact-list li { display: inline; margin: 0 1em 0 0; }
.contact-list a { width: 59px; height: 59px; display: inline-block; background: #e36f6f url(../img/social-icons.png) no-repeat 0 0; text-indent: -9999px; transition: all 0.2s linear; -webkit-transition: all 0.2s linear; }
.contact-list a:focus, .contact-list a:hover { background-color: #5a5a5a; }
#twitter { background-position: -83px 0; }
#linkedin { background-position: -245px 0; }
#github { background-position: -326px 0; }

@media screen and (max-width: 540px){
	body { font-size: 90%; }
}

@media screen and (max-width: 440px){
	h1 { font-size: 2.8em; }
	footer > a { font-size: 1.4em; }
}

@media screen and (max-width: 375px){
	h1 { margin-bottom: .4em; }
	h1 > span { font-size: 0.5em; }
	.list { margin-bottom: .5em; }
	.link-list > li, .list > li { margin: 0 0.4em 0.7em 0; }
	header { padding: 1.5em 1.3em 0; }
	.contact-list > ul { padding-left: 1.5em; }
	footer > a { padding-left: 0.9em; }
	main { padding: 0 1.3em; }
}