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


#wrapper {
	width: 80%; 
	margin: 0 auto;
	border: 4px solid #5f2c43;
	background-color: #d69daa; 
	padding: 10px;
	margin-top: 5px;
}

/*This is where I used a style grouping*/
h1, h2, h3, h4 {color: #bd1d42; font-weight:bold;}
h1 {background-color: #9c185a; 
font-size: 2.5em;
font-family:  "Edu VIC WA NT Beginner", cursive;
text-transform: uppercase;
text-align:center;
	padding:10px 0;
	background-image: linear-gradient(to left,#daa6a7,#c79196)
}
nav {padding: 15px 0px; text-align: center;}
nav a {padding-right:40px; text-decoration: none; font-weight: bold; font-size: 1.2em;}
nav a:link {color: #d03ba3;}
nav a:visited {color: blue;}
nav a:hover {color:#B43FC5;}

.feature-box {width: 30%; margin: 0 auto; background-color: #b36288; padding: 10px; margin-bottom:10px;border-radius: 20px; border: 1px solid black; box-shadow: 5px 5px #675953;}
.feature-box p {line-height: 1;}

h2 {background-color: #f0b6d4; 
font-size: 2em;
font-family:  "Edu VIC WA NT Beginner", cursive;
padding: 12px 0 12px 12px;
	margin-bottom: 10px;
}

h3 {
font-size: 1.5em;
font-family:  "Edu VIC WA NT Beginner", cursive;
color: #61192c;
	margin-bottom: 10px;
	margin-top:20px;
	border-bottom: 2px dashed#671d46;
}

h4 {
font-size: 1.5em;
font-family:  "Edu VIC WA NT Beginner", cursive;
color: #61192c;
	margin-bottom: 10px;
	margin-top:20px;
	border-bottom: 2px dashed#671d46;
}

p {font-size: 1.1em;
	  font-family: "Roboto", sans-serif;
	margin-bottom:10px;
	line-height: 2;
}
li {margin-bottom: 10px;
font-size: 1.1em; 
font-family: "Roboto", sans-serif;}
footer {text-align:center;}
/*This is a class I applied to my about page */
.boldtext {font-weight:bold; font-style: italic;}
/*This is where I used a Decendant Selector*/
ol li {color: #984594; font-weight:bold; list-style-type:decimal; margin-left: 40px; }
ul li {list-style-type: square; position: inside; margin-left: 40px;}
img {padding:20px; 
background-color: #fff;
border: 2px solid #165b62;}
.gallery {margin: 10px;}

.align-left {float:left; 
margin-right:10px;
margin-bottom:10px;}

.align-right {float:right;
margin-left: 10px; 
margin-bottom: 10px;}

.clearfloat {clear:both;}

.flex-container {display:contents; 
}

section {width: 65%;}

.image-container {display:flex; 
flex-wrap: wrap;
justify-content: center;}