/* TABLE OF CONTENTS

Reset 
General Styling
  Header
  Body 
  Main
  Nav 
  Footer 
Home Page 
Details
Travel
Our Story 
Registry 
RSVP

*/

/* Reset CSS */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

/* General Styling */
html { background-color: #f3eddd; }
@font-face { font-family: cantoni;
	     src: url(cantoniproregular.ttc) format("ttc"); }
@font-face { font-family: coniferous;
	     src: url(coniferous.otf) format("otf"); }
@font-face { font-family: Noteworthy;
	     src: url(fonts/noteworthy.ttc) format("ttc"); }


/* Header Styling */
header { height: 300px;
	 width: 100%; }
header nav { width: 100%;}
header a { text-decoration: none;
	    color: #95997e;
	} 
header a:hover { color: #333525 }
#header { height: 150px; width: 100%;
	  display: flex;
	  flex-direction: column;
	  justify-content: center; 
	  align-items: center;
	  text-align: center;
	  padding-top: 60px;
	  padding-bottom: 5px; }
#header img { display: block; 
		margin: 20px auto 0 auto; 
		max-width: 100%;
		height: auto; }

/* Body Styling */

body { background-color: #f3eddd;
	height: 100%; 
	margin: 0; 
	padding: 0; 
	 }
 
/* Main Styling */


h1 { color: #95997e;
	text-align: center;
	font-family: cantoni, cursive;
	font-size: 85px;
	text-shadow: -.5px -.5px 0px #333525, .5px -.5px 0px #333525, .5px .5px 0 #333525, -.5px .5px 0 #333525, -1px -1px 6px #333525;
	margin-top: -20px; }
h2 { color: #95997e;
	text-align: center;
	font-family: coniferous, cursive;
	font-size: 50px;
	text-shadow: -1px -1px 2.5px #333525; } 
main { padding-bottom: 50px; } 

/* Nav Styling */ 

nav { text-align: center;
      font-size: 30px;
      font-family: Noteworthy, sans-serif;
}
nav ul { list-style-type: none;
	 display: flex;
	 justify-content: center;
	 padding: 0 10px;
}
nav li { display: inline-block;   
         margin: 0 auto;  
}
nav a { text-decoration: none;
	   color: #333525; }
/*REQUIRED: dynamic nav styling, 2-24-25 */
nav a:hover { color: #95997e; }

/* Footer Styling */ 
footer { background-color: #333525;
	 height: 100px; 
	 width: 100%;
	 position: fixed;
	 bottom: 0; 
	 left: 0;
	 display: flex; 
	 flex-direction: row; 
	 align-items: center;
	 justify-content: space-between; 
	 padding: 0 5px; 
}
/*REQUIRED: CSS float, 2-24-25*/
footer img { height: 80px;
		width: auto;
		float: left; 
}
footer nav { display: flex;
		flex-wrap: wrap;
		justify-content: flex-end; 
		text-align: right;
		gap: 15px; 
		font-family: Noteworthy, sans-serif;
		padding-right: 5px;
		padding-top: 125px;
		height: 100px;
}
footer nav li { align-content: flex-end; }
footer a { text-decoration: none; 
	   color: #f3eddd;
	   font-size: 18px;
	   margin: 0 10px; 
}
footer p { color: #f3eddd; 
		font-family: "FormaDJRDeck Light", sans-serif;
		font-size: 16px; 
		margin: -1px; 
}

.contactsection { display: flex;
			align-items: center; 
			gap: 5px; 
			margin: auto 0;
			flex-wrap: wrap; 
}
.contactinfo { text-align: left;
		height: 80px;
}
.contactme { font-family: "La Parisienne Script Casual", Noteworthy, cursive;
		font-size: 24px; 
		font-weight: bold; 
}



/* Home Page */

.main { text-align: center; 
	margin-bottom: 50px; 
	padding-bottom: 50px; }
.main img {
    display: block;
    margin: 20px auto;
    width: 583px;
    height: auto;
    max-width: 80%;
/*REQUIRED: border, 2-24-25*/
    border: 15px double #F3EDDD;
    background-color: #333525;
}
.cdlrg { font-size: 55px;
	font-family: "La Parisienne Script Casual",cursive;
	text-align: center;
	text-shadow: -1.5px -1.5px 3px #333525;
	
} 
.p1 { text-align: center;
	color: #726a55;
	font-size: 36px;
	font-family:  Noteworthy, sans-serif;
	display: flex; 
	flex-direction: column;
	justify-content: center;
	align-items: center; 
	padding: 20px 5px 40px;
	line-height: 15px; 
	text-shadow: .5px .5px 1px #000000; 
}
.p1 p { margin: -30px 0; 
}
.p2 { text-align: center; 
	color: #726a55; 
	font-size: 28px;
	font-family: noteworthy, sans-serif; 
	text-shadow: .5px .5px 1px #000000;
}

/* Details 3-4-25 */
h3 { 
	color: #95997e; 
	font-family: Coniferous, cursive; 
	font-size: 36px; 
	margin: 0 auto; 
	text-shadow: -1px -1px 2px #333525;
}
b { text-align: left; 
	color: #95997E;
	text-shadow: 1px 1px 1px #333525; }
caption { 
	color: #95997e; 
	font-family: Coniferous, cursive; 
	font-size: 36px; 
	font-weight: bold; 
	margin: 5px auto; 
	text-shadow: -1px -1px 2px #333525; 
}
table { text-align: center; 
	margin: 0 auto; 
	border: 6px solid #333525; 
	border-spacing: 3px;
}
th { font-family: Noteworthy, sans-serif; 
	font-size: 18px; 
	background-color: #333525; 
	color: #95997E;
	padding: 05px; 
	width: 200px; 
	height: 50px;
	line-height: 22px;
	text-shadow: 2px 2px 2px #000000; 
}
td { font-family: "FormaDJRDeck Light", sans-serif; 
	font-size: 18px; 
	background-color: #95997e; 
	color: #333525;
	padding: 0px 15px; 
	vertical-align: middle; 
	
}
.detailslist { width: 100%;
	list-style-type: none; 
	font-family: Noteworthy, sans-serif; 
	text-align: left;
	font-size: 20px;
	line-height: 40px; 
	color: #333525;
}
.details { display: grid;
	grid-template-columns: 35% 30% 35%;
	grid-template-rows: 50% 50%;
	gap: 15px 0px; 
	align-items: center;
	margin: 50px auto 150px; 
}
.detailstitle { grid-column: span 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between; 
	gap: 5px; 
}
.detailstitle img { width: 90%;
	
}
.detborder { margin-top: -20px; }
.detloc {
    line-height: 30px;
	text-align: left;}
.detloc b {
	display: block;
   text-align: left; 
}
.detailsimg { grid-column: span 1;
	display: flex;
	justify-content: center; 
}
.detailsimg img { 
	width: 85%;
	height: auto; 
	border: 20px double #F3EDDD;
    background-color: #333525;
}
.detailsfaq { grid-column: span 3; 
	margin-top: 40px; 
}


/* Travel */

/* Our Story */
figure img { margin-top: 50px; }
figcaption { font-family: Coniferous, cursive;
	font-weight: bold; 
	font-size: 45px;
	padding-bottom: 20px; 
	color: #95997e; 
text-shadow: -1.5px -1.5px 3px #333525;
margin: 0 auto; }
blockquote { font-family: Noteworthy, sans-serif;
	font-size: 22px; 
	text-align: center; 
	color: #726A55; 
text-shadow: .5px .5px 1px #000000; }
audio { width: 50%; 
	margin: 0 auto; 
	display: block;}
.audio { width: 50%; 
	display: flex; 
	flex-direction: column; 
	margin: 0 auto;
padding-top: 15px; }
.audiotxt { text-decoration: none; 
	font-size: 16px; 
	color: #333525; 
	margin: 15px auto;
font-family: "FormaDJRDeck Light", sans-serif; }
.story { text-align: center; 
	font-family: Noteworthy, sans-serif; 
	font-weight: bold; 
	font-size: 18px; 
	color: #95997E; 
	text-shadow: -.5px -.5px 1.5px #333525;  }
.ourstory { padding-bottom: 150px; }
/* Registry */

/* RSVP, 3-3-25 */

label[for="password"] { 
	color: #333525;
	font-family: "FormaDJRDeck Light", sans-serif; 
	text-align: right;
	margin-top: 10px;  
}
select {
    display: block;
    margin: 0 auto;
    width: 50%;
    background-color: #f3eddd;
    color: #333525;
    font-family: "FormaDJRDeck Light", sans-serif;
    border-radius: 3px;
    border-width: 2px;
    border-color: #333525;
}
input[type="password"] { margin-top: 10px; 
	 		 width: auto; 
			 background-color: #f3eddd; 
			 border: none;
			 border-bottom: 2px solid #333525;  
}
#continue { height: 20px;
	margin: 25px auto 0; 
	background-color: #333525; 
	color: #f3eddd;
	font-family: Noteworthy, sans-serif;
	font-weight: bold;
	border-radius: 3px; 
	line-height: 0px; 
	border: none; 
	box-shadow: 0px 0px 3px #000000;
}
#continue:hover { background-color: #95997e; }
.rmain { margin-bottom: 150px; }
.prsvp { color: #726a55;
	 font-family: Noteworthy, sans-serif;
	 font-size: 22px;
	 text-align: center; 
	 text-shadow: .5px .5px 1px #000000;
}
.form1 { background-color: #f3eddd; 
	 width: 50%; 
	 margin: auto auto 0; 
	 padding: 10px;
	 display: flex; 
	 flex-direction: column;
	 justify-content: center; 
	 align-items: center; 
}


/* RSVP 2, 3-3-25 */
form img { width: 50%;
	   height: auto;
	   margin-top: 5px;
}
legend { font-family: "La Parisienne Script Casual", cursive; 
	font-size: 26px;
	color: #f3eddd; 
	text-shadow: 2px 2px 6px #000000;
	margin: 0 auto; }
fieldset { width: 65%;
		border: none;
		margin: -5px auto 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-shadow: 1px 1px 3px #000000;
}
label[for="name"], label[for="email"],label[for="phone"] {
	float: left;
	clear: left;
	display: block;
	align-items: center;
	text-align: center;
	font-family: Noteworthy, sans-serif;
	padding: 5px;
	color: #f3eddd;
	font-size: 18px;
}
input[type="text"], input[type="email"], input[type="tel"] { 
	border: none;
	border-bottom: thin solid #f3eddd;
	background-color: #333525;
}
input[type="radio"]:checked { background-color: #333525; 
} 
textarea { display: block;
	width: 70%;
	height: 65px;
	margin: 0px auto 15px;
	background-color: #333525;
	border-color: #f3eddd;
	border-radius: 3px;
	color: #f3eddd;
	font-family: "FormaDJRDeck Light", sans-serif;
	font-size: 14px;
}
.pineborder {
	display: flex;
	flex-direction: row;
	margin: 10px auto 0;
	height: 70px;
	justify-content: center;
	align-items: center;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	padding: 20px 0 15px;
}
.pineborder2 {
	display: flex;
	flex-direction: row;
	margin: 5px auto;
	height: 70px;
	justify-content: center;
	align-items: center;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	padding: 15px 0 10px;
}
.form2 { background-color: #333525;
	font-family: "FormaDJRDeck Light", sans-serif;
	width: 50%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	border: none;
	border-radius: 3px;
	height: auto; 
}
.prsvp2 {
    	display: flex;
    	flex-direction: column;
    	align-content: center;
   	justify-content: center; 
   	color: #726a55;
   	font-family: Noteworthy, sans-serif;
   	font-size: 26px;
   	text-align: center;
   	padding: 0px;
   	height: 75px;
    	text-shadow: .5px .5px 1px #000000;
}
.prsvp2 p {
    width: 100%;
    margin: 0px;
}
.req { color: #333525; 
	font-family: "FormaDJRDeck Light", sans-serif; 
	width: 50%;
	margin: 25px auto 0;
	text-align: left; }
.prsvp3 {
	width: 80%;
	color: #333525;
	background-color: #f3eddd;
    	font-family: Noteworthy, serif;
    	font-size: 18px;
    	margin: 0 auto;
    	padding-bottom: 10px;
    	text-align: center;
   	padding-top: 5px;
	text-shadow: .5px .5px 2px #95997e;
}
.prsvp3attend {
   	width: 80%;
   	color: #333525;
    	background-color: #f3eddd;
    	font-family: Noteworthy, serif;
    	font-size: 18px;
    	margin: 0 auto;
    	padding-bottom: 10px;
    	text-align: center;
    	border-radius: 3px 3px 0px 0px;
    	padding-top: 5px;
	text-shadow: .5px .5px 2px #95997e;
}
.attend {
    	color: #333525;
    	display: flex;
    	flex-direction: row; 
    	justify-content: center;
    	align-items: center;
    	column-gap: 5px;
    	width: 80%;
    	background-color: #f3eddd;
    	padding-bottom: 15px;
}
.meal { color: #333525;
	display: flex; 
        flex-direction: row;
	justify-content: center; 
	align-items: center; 
	column-gap: 20px;
	margin: 0 auto;
	width: 80%; 
	background-color: #f3eddd;
   	padding-bottom: 10px; 
}
.message { width: 80%; 
	display: flex; 
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #333525;
	background-color: #f3eddd;
	font-family: Noteworthy, serif;
	font-size: 18px;
	margin: 0 auto ; 
	border-bottom-left-radius: 3px; 
	border-bottom-right-radius: 3px;
	text-shadow: .5px .5px 2px #95997e;
}
.buttons {
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: flex-end; 
	justify-content: space-around; 
	margin: 5px 0; 
}

#attendyes, #attendno {
    margin-right: 10px;
}
#mealb, #mealc, #mealv {
    margin-right: 10px;
}
#continue2 {
	height: 20px;
	margin: 5px 0;
	background-color: #f3eddd;
	color: #333525;
	border: 1.75px solid #f3eddd; 
	border-radius: 3px; 
	box-shadow: 0px 0px 3px #000000;
	font-family: Noteworthy, sans-serif;
	font-weight: bold; 
	line-height: 0px; 
	margin: 5px 0; 		
}
#continue2:hover { background-color: #f3eddd; }
#reset {
	height: 20px;
	margin: 5px 0;
	background-color: #f3eddd;
	color: #333525;
	border: 1.75px solid #f3eddd; 
	border-radius: 3px; 
	box-shadow: 0px 0px 3px #000000;
	font-family: Noteworthy, sans-serif;
	font-weight: bold; 
	line-height: 0px; 
	margin: 5px 0; 		
}
#reset:hover { background-color: #f3eddd; }

/* Media  */
/*REQUIRED: media query 1 of 3, 3-4-25 */
 @media (max-width: 630px) { 
   header nav {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
   header nav ul { 
		width: 100%; ; 
		font-size: 28px;  
		 } 
	header nav li { margin: 0; }
	footer nav {
    		width: 30%;
    		row-gap: 5px;
    		margin: auto 0;
    		padding-top: 0; 
			padding-bottom: 20px;
		}
	.cdlrg { margin: 35px auto; }
	.p1 { font-size: 26px; }
} 
/*REQUIRED: media query 2 of 3, 3-4-25 */
 @media (max-width: 700px) {  
	header nav { width: 70%; 
		margin-left: auto;
		margin-right: auto;
		 }
	header nav ul { 
		display: flex; 
		flex-direction: row;
		flex-flow: wrap;   
		column-gap: 35px;
		width: 80%
		
		}
	footer nav {
    		width: 30%;
    		row-gap: 3px;
    		margin: auto 0;
    		padding-top: 0;
			padding-bottom: 20px; 
		} 
 /* home */ 
	.cdlrg { padding-top: 25px; }
	.p2 { width: 60%; 
		line-height: 35px;
		margin-right: auto; 
		margin-left: auto; }
	.main img { height: auto;
		max-width: 50%; }
	.p1 { font-size: 30px;}
/* details */ 
	 table { width: 60%; }
	 th, td { font-size: 16px}
	 .details { grid-template-columns: 30% 40% 30%; 
	 	gap: 0;}
	 .detailstitle ul { padding: 0; 
	 margin: 5px auto;}
	.detailslist b { display: block;
	 text-align: center; }
	 .detailstitle li { 
		 text-align: center;  
		 font-size: 18px; 
		 line-height: 30px
	 }
	 .detailstitle img { padding: 0; 
		 margin: 0; }
	
/* RSVP */
	h2 { padding-top: 30px; }
	.prsvp { width: 60%; 
	margin-left: auto; 
	margin-right: auto; 
	line-height: 30px; 
		}
	select { width: 55%; }
	
 /* RSVP 2 */ 
	input[type="text"], input[type="email"], input[type="tel"] {
    		width: 80%;
    		margin-bottom: 5px;
    		padding-top: 0px;
		}
	
	label[for="name"], label[for="email"], label [for="phone"] { 
		display: block; 
		 }
	.prsvp2 { width: 45%; 
		justify-content: center; 
		align-items: center; 
		margin: 0 auto; 
		padding: 10px 0 25px; 
		gap: 15px;
		line-height: 25px; }
} 

@media ( min-width: 701px) and (max-width: 750px) { 
	header nav { width: 65%; 
	margin: 0 auto; }
	footer nav { width: 40%; }
	
}
/*REQUIRED: media query 3 of 3, 3-4-25 */
@media (max-width: 850px) { 
	header nav {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
	}
	header nav ul { 
		display: flex; 
		flex-direction: row;  
		flex-flow: wrap; 
		column-gap: 35px;
		padding: 0 45px;
		}
	footer nav { width: 35%;
			height: 75px;
    		row-gap: 0px;
    		margin: auto 0;
    		padding-top: 25px;
		}
	h2 { padding: 30px 0 0; }
	
/* home */
	.p1 { font-size: 32px;}
	.p2 { width: 60%;
		margin-left: auto; 
		margin-right: auto; }
	.main img { height: auto;
		max-width: 60%; }
/* details */ 
	td { width: 250px; }
	.detailstitle { gap: 0; }
	.detailstitle img { margin: 0;
		padding-bottom: 10px; } 
	.wedinfo { margin-top: -25px;
		margin-bottom: -10px;
		padding: 0;
		line-height: 40px;
		width: 80%; 
		margin: 0 auto; 
	text-align: center; }
/* rsvp2 */
	input[type="tel"] {
    		width: 90px;
    		margin-bottom: 5px;
    		padding-top: 0px;
		}
	.attend { display: flex; 
		flex-direction: column; 
		align-items: center;
		justify-content: center; 
		padding-bottom: 80px;
		margin-top: 0; 
		margin-bottom: -75px; 
		}
	.meal { display: flex; 
		flex-direction: column; 
		align-items: center;
		justify-content: center;
		gap: 5px;
		padding-bottom: 0
		}
	.prsvp2 { margin-top: -10px; }
	.prsvp3 { text-align: center;
		background-color: #F3EDDD;
		width: 60%;
		}
	#mealb, #mealc, #mealv { margin: 0 10px; 
		}
}