@charset "utf-8";
/* CSS Document */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

* {
	margin: 0px;
	padding: 0px;	
}

body {
	background: #dcd9d2;
    	
}

h2, h3 {
	color: #000000;
	text-align: center;
 	font-family: "Bellota Text", sans-serif;
  	font-style: normal;
}

	
h4 {
    color: #000000;
    text-align: left;
    font-weight: normal;
	font-size: large; 
	font-family: "Bellota Text", sans-serif;
  	font-style: normal;  
}

header, header h1, nav, nav a, img, aside, main, article, section, footer {
	width: 100%;
}

#wrapper {
	margin: 0 auto;
	padding: 30px 20;
	background-color: #dcd9d2 ;
}

header {
    background-attachment: fixed;
    width: 100%;
    background-image: url(../images/yarnbackground.jpg);
	height: 150px;
}

header h1 {

	color: #dcd9d2;
    text-shadow: 2px 2px 8px #ddafcb;
    font-size: 650%; 
	text-align: left;
    font-family: 'italianno', cursive;
}

nav {
    background-color: #ddafcb;
    text-align: center;		
}

nav a{
	background-color:  #ddafcb;
    text-decoration: none;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
	font-family: "Bellota Text", sans-serif;
  	font-style: normal;
    color: #000000;
    font-size: 110%;
	border:thin #ffffff double;
	float:left;
}

nav a:hover {
    color: #ffffff;
    background-color: #BF2AB5; 
}

article {
    min-height: 80px;  
	background: #3A7B73;
	border: thin #ffffff double;
}

article h3 {
	color: #000000;
	text-shadow: 2px 2px 8px #FFFFFF;
    text-align: center; 
	font-family: 'italianno', cursive;
	font-weight: 100;
	font-size: 18px;
}

aside {
    text-align: center;
	float: left;
	background-color: #FFFFFF; 
	border: thin solid #000000;
	border-radius: 3%;	
	line-height: 1.5;
	padding: 2px;
	margin-left: 5px;
	
}
.aside h2 {
    color: #000000;
    text-align: center;
    font-family: 'italianno', cursive;
    font-size: 40px;
    font-weight: 100;
}

main {
	float: left;
	background:#dcd9d2;
	line-height: 1.5;
	
	
	
}
.main h2  {
	color: #000000;
    text-align: center;
    font-family: 'italianno', cursive;
    font-size: 70px;
    font-weight: 200;
   
	
}
.main h3 {
	color: #000000;
    text-align: left;
    font-family: 'italianno', cursive;
    font-size: 40px;
    font-weight: 100;
}


section {
    list-style-position: inside;
    list-style-type: square;
    text-align: left;
    border: thin solid #000000;
    border-radius: 3%;
   
}
section h3 {
    color: #000000;
    text-align: center;
    font-family: 'italianno', cursive;
    font-size: 40px;
    font-weight: 100;
    background-size: 50% auto;
}



footer {
    font-size: 120%;
    background-image: url(../images/yarnbackground.jpg);
	height: 150px;
	clear: both;
	
}
footer a {
    color: #000000;
    text-decoration: none;
    font-size: large;
    font-weight: bolder;	
}
footer h4 {
    color: #FFFFFF;
    text-shadow: 2px 2px 8px #ddafcb;
    text-align: center;
    font-size: large;
	font-weight: bolder;
}



.me {
	border-radius: 30%;
	 border: thick solid #3A7B73;
	max-width: 180px;
	margin: 30px;
	
}







 


@media (max-width: 600px) {
    header h1 { font-size: 300%; }

	article h3 {font-size: 300%;}
}

@media screen and (min-width:600px){

article h3 {font-size: 300%;}
}

@media screen and (min-width:960px){
	

	.aside {
		width: 19%;
		padding: 0.5%;
		margin-top: 20px;
	}
	.main {
    width: 76%;
    padding: 3.5%;
    margin-left: 1.5%;
  		
	}
		
	.content {
	width: 30%;
	margin: 1.5%;
	padding: 1.5%;
	float: left;
	
}
   nav a {
		width: 20%;
 
	}
	.welcome {
		width: 100%;
		padding: 0.5%;
		margin: 0.5%;
		max-height: 30px;	
	}

	.mySlides {
		min-height: 550px;
		max-height: 600px;
		border: thick solid #3A7B73;
		padding: 15px;	
	}
	.quote, h1, h2 {
    color: #000000;
    text-align: center;
    font-family: 'italianno', cursive;
    font-size: 35px;
    font-weight: 100;
    padding: 20px;	
}
	.logo {
 	float:left;
		max-width: 150px;
		max-heigh: 150px;
		
		
}
	.supplies {
	border: thin solid #FFFFFF;
	margin: 15px;	
	max-height: 400px;
	max-width:300px;
		
	}
	
.creation {
    border: thick solid #3A7B73;
	margin: 0;
	max-height: 375px;
	max-width: 375px;
		
}
	
	





}