@import url('https://fonts.googleapis.com/css?family=PT+Sans');

@keyframes fadeIn {
	0% {
		opacity:0;
		transform: translateY(100px);
	}
	100% { 
		opacity:1;
		transform: translateY(0px);
	}
}

body {
	font-family: 'PT Sans', sans-serif;
	font-size: 18px;
	line-height: 1.4em;
	color: #666666;
}

/* Designed mobile first using CSS Grid */

h2 {
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1.2em;
	margin-bottom: 0.2em;
	color: #0069B4;
}

::selection {
	background: #e30613; /* WebKit/Blink Browsers */
	color: #ffffff;
}
::-moz-selection {
	background: #e30613; /* Gecko Browsers */
	color: #ffffff;
}

#laugh {
	grid-area: laugh;
}

#health {
	grid-area: health;
}

#skills {
	grid-area: skills;
}

/* Set copy to light colour when on a dark background */
.light h2, .light p {	
	color: #ffffff;
}

/* Conatiner to support CSS Grid and layout grid using grid templates */
.container {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 1fr;
 	grid-template-areas: 
    	"nav"
    	"hero"
    	"main"
    	"footer";
}

/* Navigation bar across top of page */
.navigation {
	grid-area: nav;
	background-color: #0A4167;
	padding: 20px;
	color: #ffffff;
}

/* Spread navigation elements across nav bar */
.navigation ul {
	display: flex;
	justify-content: space-between;
}

/* no link styling required as the signifer to tap these links is the placement within a navigation bar */
.navigation a {
	color: #ffffff;
	text-decoration: none;
}

/* Large logo on homepage */
.logo {
	display: flex;
	grid-area: logo;
	justify-content: center;
	opacity:0;  /* make things invisible upon start */
    animation:fadeIn 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    animation-duration:0.4s;
    animation-delay: 0.2s
}

/* Homepage intro */
.intro {
	grid-area: intro;
	color: #ffffff;
	padding-top: 20px;
}

.hero-container {
	display: flex;
	justify-content: center;
	grid-area: hero;
	background-image: url(/img/dark-blue-skipping-group.jpg);
	background-size: cover;
}

.hero {
	display: grid;
	padding: 20px;
	grid-gap: 0px;
 	grid-template-areas:
    	"logo"
    	"intro";
}

#home-page-container {
	display: grid;
	grid-area: main;
	justify-self: center;
	grid-template-areas:
    	"laugh"
    	"health"
    	"skills";
}

.social {
	grid-area: social;
	padding: 20px;
}

.promo {
	margin: 20px;
}

.promo-image img{
	width: 100%;
	object-fit: cover;
}

.footer-container {
	display: grid;
	background-color: #222222;
	width: 100%;
	min-height: 300px;
	grid-area: footer;
}

.footer {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
    	"footer-1"
    	"footer-2"
    	"footer-3";
}

.footer-1 {
	grid-area: footer-1;
	padding: 20px;
}

.footer-2 {
	grid-area: footer-2;
	padding: 20px;
}

.footer-3 {
	grid-area: footer-3;
	padding: 20px;
}

/* Mobile specific */
@media (max-width: 599px) {

	.promo-image {
		max-height: 160px;
		overflow: hidden;
		margin-bottom: 20px;
	}

	#laugh .promo-image img {
	}

}

/* First breakpoint */
@media (min-width: 600px) {

	/* Place logo and Intro side by side */
	.hero {
		padding: 80px 20px 80px 20px;
		grid-template-columns: 1fr 2fr;
	    grid-template-areas: 
	    	"logo 	intro";
		width: 100%;
		max-width: 1040px;
	}

	.logo {
		justify-content: flex-start;
	}

	.navigation ul {
	    display: flex;
	    justify-content: flex-end;
	}

	.navigation ul li {
	    padding-left: 30px;
	}

	.intro {
		padding: 0;
	}

	#home-page-container {	
		width: 100%;
		max-width: 1080px;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:
	    	"laugh	health	skills";
	}

	.page-container {
		padding-top: 20px;
	}

	.footer {	
		justify-self: center;
		padding-top: 20px;
		width: 100%;
		max-width: 1080px;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:
	    	"footer-1	footer-2	footer-3";
	}


}