@charset "UTF-8";
/* CSS Document */

body {
	background-color: #4E8183;
	font-family:  Rubik, Verdana, Arial, sans-serif; 
	font-weight: 400;
	font-style: normal;
	font-size: 100%;
	margin: 0;
	padding: 0;
	background-image: url("bg.svg");
	background-repeat: repeat;
	background-size: 27%;
}

#container {
	margin: 0 auto;
	width: 76%;
	min-width: 860px;
	max-width: 1400px; 
	display: grid;
	grid-template-columns: repeat(12, 1fr); 
	grid-template-rows: auto;
	background-color: gainsboro;
}

header {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
 	grid-row-end: 2;
	text-align: center;
	background-color: #000;
	padding-left: 40px;
}

h1 {
	text-transform: uppercase;
	font-size: 1.6em;
	font-weight: 300;
	color: magenta;
	padding-top: 6px;
}

h1 a {
	text-decoration: none;
	color: magenta;
	
}

nav {
	grid-column-start: 4;
	grid-column-end: 13;
	grid-row-start: 1;
 	grid-row-end: 2;
	text-transform: uppercase;
	font-size: 1.3em;
	font-weight: 300;
	background-color: #000;
}

nav ul {
	text-align: right;
	margin: 0;
	padding: 40px 0;
}

nav ul li {
	list-style: none;
	display: inline;
	padding: 40px 20px;
}

nav ul li a {
	text-decoration: none;
	background-color: #000;
	color: cyan;
	width: 100%; height: 100%;
	padding: 30px 20px; 
	border-radius: 2px;
	
}

nav ul li a:hover, nav ul li a.onthispage {
	text-decoration: none;
	background-color: cyan;
	color: #000;
	width: 100%; height: 100%;
}

a {
	color: darkolivegreen;
}

a:hover {
	color: orangered;
	text-decoration: none;
}

#intro {
	grid-column-start: 1;
	grid-column-end: 8;
	grid-row-start: 2;
 	grid-row-end: 3;
	padding-top: 40px;
	padding-left: 40px;
}

#photo {
	grid-column-start: 8;
	grid-column-end: 13;
	grid-row-start: 2;
 	grid-row-end: 3;
	padding: 40px;
}

#photo img.border {
	border-radius: 5px;
	border: 1px solid orangered;
	width: 100%;
}

p {
	font-size: 1.3em;
	font-weight: 300;
	line-height: 1.4;
}

p.intro {
	font-size: 1.6em;
	font-weight: 300;
	color: darkmagenta;
}

p.indent {
	padding-left: 20px;
	font-weight: 400;
}

.divider {
	grid-column-start: 1;
	grid-column-end: 13;
	padding: 10px 0;
	
}

.divider p {
	padding: 0 10px;
	line-height: 0.4;
	color: #F4320B;
	
}

#dresscode  {
	grid-column-start: 1;
	grid-column-end: 13;
	padding: 0 40px;
	
}

#rsvp {
	grid-column-start: 1;
	grid-column-end: 13;
	padding: 0 40px;
	
}

#stories {
	grid-column-start: 1;
	grid-column-end: 13;
	padding: 0 40px;
	
}


/* 
    =============
	media queries 
    =============
*/

/* === RWD smaller === */
@media only screen and (max-width: 859px), (max-device-width: 859px) {

	#container {
		width: 90%;
		min-width: 320px;
		max-width: 859px;
	}
	
	header {
		grid-column-start: 1;
		grid-column-end: 13;
		padding: 0 20px;
	}
	nav {
		grid-column-start: 1;
		grid-column-end: 13;
		grid-row-start: 2;
 		grid-row-end: 3;
	}
	nav ul {
	text-align: center;
	margin: 0;
	padding: 20px 0;
	font-size: 0.9em;
	}

	nav ul li {
	padding: 10px 3px;
	}

	nav ul li a {
	padding: 10px; 
	
	}
	#intro {
	grid-column-start: 1;
	grid-column-end: 13;
	grid-row-start: 3;
 	grid-row-end: 4;
	padding-right: 40px;
	}

	#photo {
	grid-column-start: 1;
	grid-column-end: 13;
	grid-row-start: 4;
 	grid-row-end: 5;
	padding: 40px;
	}

	
} /* end media query */

@media only screen and (max-device-width: 859px) {

	body {
		font-size: 220%;
	}
	
}