/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
	html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
	margin: 0;	
	padding: 0;	
	border: 0;	
	font-size: 100%;	
	font: inherit;	
	vertical-align: baseline;}
	
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
	display: block;}
	
	body {	
	line-height: 1.5;
	}
	
	ol, ul {	
	list-style: none;
	}
	
	blockquote, q {	
	quotes: none;
	}
	
	blockquote:before, blockquote:after,q:before, q:after {	
	content: '';	
	content: none;
	}
	
	table {	
	border-collapse: collapse;	border-spacing: 0;
	}	 
	
	/* end reset*/

/*default for mobile*/
body, html {
	height:100%;
	margin:0;
	font-size:2vw;
	font-weight:400;
	line-height: 1.5em;
	color: black;
	scroll-behavior: smooth;
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: #D8D9D7;
}

h1 {
	font-family: "Montserrat";
	font-weight: 900;
	font-size: 5vw;
	letter-spacing: 7px;
	color: black;
	position: absolute;
	top: 15%;
	left: 4%;
	width: 100%;
	text-align: left; 
  	-webkit-text-stroke-width: 2px;
  	-webkit-text-stroke-color: black;
  	mix-blend-mode: screen;
}

nav {
	position: relative;
	text-align: center;
	width: 100%;
	height: auto;
	padding: 1%;
	margin: 1% auto;
	color: white;
	background-color: #darkgray;
}

nav ul  {
	width: 100%;
	height: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

nav li {
	display: block;
	text-align: center;
	float: left;
	width: 100%;
	border: 1px beige;
	font-size: 1.5em;
	opacity: 50%;
}

nav li a {
	text-align: center;
	text-decoration: none;
	padding: 1%
}

nav li a:link, nav li a:visited {
	color: black;
	background: darkgray;
	border: 2px solid white;
}

nav li a:hover, nav li a:focus {
	color: white;
	background: #darkgray;
	border: 2px solid #black;
}

h2 {
	font-family: "Montserrat";
	font-weight: 900;
	font-size: 4vw;
	letter-spacing: 7px;
	color: black;
	position: absolute;
	top:30%;
	left: 4%;
	width:100%;
	text-align: left; 
}

.sowhat h2 {
	font-family: "Montserrat";
	left: 0;
	width: 600px;
	font-weight: 900;
	font-size: 4vw;
	letter-spacing: 7px;
	color: white;
	text-align: center; 
	padding: 8px;
	background-color: #0D0D0D;
	border: 6px solid #D9C6B0;
	opacity: 0.7;
}

.sowhat h3 {
	font-family: 'Lucida Handwriting', cursive;
	font-style: italic;
	font-size: 2vw;
	color: darkgray;
	text-align: left;
	top: 60%;
	left: 30%;
}

.sowhat p {
	font-family: 'Lucida Handwriting', cursive;
	font-style: italic;
	font-size: 3vw;
	color: darkgray;
	text-align: left;
	top: 60%;
	left: 30%;
}

.icecreamtea h2 {
	font-family: "Montserrat";
	font-weight:900;
	font-size: 4vw;
	letter-spacing: 7px;
	color: black;
	text-align: center; 
	left: 15%;

}

.dance h2 {
	font-family: "Montserrat";
	font-weight: 900;
	font-size: 4vw;
	letter-spacing: 7px;
	color: black;
	text-align: left; 
	top: 20%;
	left: 5%;

}

p {
	font-family: "Raleway";
	color: #A68776;
	position: absolute;
	top:40%;
	left: 4.2%;
	width:100%;
	text-align: left; 
}

.icecreamtea p {
	font-family: 'Cedarville Cursive', cursive;
	font-style: italic;
	font-size: 3vw;
	color: #A68776;
	text-align: left;
	top: 40.3%;
	left: 54%;

}

.laugh p {
	font-family: "Raleway";
	color: #ffffff;
	font-size: 3vw;
	text-align: center;
	top: 68%;
	left: 0%;

}

.dance p {
	font-family: 'Cedarville Cursive', cursive;
	font-style: italic;
	font-size: 3vw;
	color: #A68776;
	text-align: left;
	top: 38%;
	left: 5%;
}

.happybirthday p {
	font-family: 'Lucida Handwriting', cursive;
	font-style: italic;
	font-size: 3vw;
	color: darkgray;
	text-align: left;
	top: 60%;
	left: 30%;
}

.horserider {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-image: url("img/horserider.jpg");
	min-height: 100%;
	min-width: 100%;
	left: 0%;
}

.happybirthday {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-image: url("img/happyface.jpg");
	min-height: 100%;
	min-width: 100%;
	left: 0%;
}

.sowhat {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-image: url("img/sowhat.jpg");
	color: #D9C6B0;
	min-height: 100%;
	min-width: 100%;
	left: 0%;
}

.icecreamtea {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-image: url("img/horserider.png");
	min-height: 100%;
	min-width: 100%;
	left: 0%;
}

.laugh h2{
	color: #000000;
	font-size: 4vw;
}

.laugh {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-image: url("img/laugh.jpg");
	min-height: 100%;
	min-width: 100%;
	left: 0%;
}

.dance {
	position:relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-image:url("img/dance.gif");
	min-height:100%;
	min-width: 100%;
	left: 0%;
}

footer {
	color: white;
	padding: 10px;
	background-color: #000000;
	text-align: center;
}

a {
  color: lightgrey;
}
  @media only screen and (max-width: 1024px) {
    .sowhat, .laugh, .icecreamtea, .building, .dance, .horserider {
      	background-attachment: scroll;
     	width: 100%;
    }
  }

  @media only screen and (max-width: 600px) {
  	h1, h2, p, footer, body, html{
  		flex-wrap: wrap;
  		overflow: auto;
  	}
  }