/*CSS Document*/

*{
		font-family: "bitter","arial", Verdana, "sans-seriff";
		font-size: 16px;
		color: black;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}


@font-face{
	font-family: "bitter";
	src: url(fonts/Bitter-Regular.ttf) format('truetype');
	font-weight: normal;
}
h5{
	font-family: "bitter","arial", Verdana, "sans-seriff";
	font-size: 30px;
	color: #f36870;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	/*alt="different shades of pink speckled on the background ©kelly gaffney via Canva*/
	background-image: url(../images/lh_smudge_2000x2000px.png);
	background-repeat: no-repeat;
	background-position: center;
}
#wrapper{
	width:1000px;
	height: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-areas:
		"banner"
		"menu"
		"content"
		"base";
	grid-template-columns: 1fr;
	grid-template-rows: 100px 52px minmax(700px, auto)  minmax(100px, auto);	
}
#index h3 {
  display: none !important;
}
#guide h3 {
  display: none !important;
}
#product h3 {
  display: none !important;
}
#cart h3 {
  display: none !important;
}
footer h3 {
  display: none !important;
}
#error404 h3 {
 display: none !important;
}

header{
	grid-area: banner;
	max-width: 100%;
	max-height: 100%;
	background-color:#dfbbcb;
	
	/*subgrid for logo and company name*/
	display: grid;
	grid-template-areas:
		"logo company company company";
	grid-template-columns: repeat(4, 1fr);
}
header img{
	grid-area: logo;
	max-height:100%;
}
header h1{
	font-family: "bitter";
	font-weight: normal;
	grid-area: company;
	color: #47324e;
	line-height: 90px;
	font-size: 4em;
	text-shadow: 2px 2px 2px #857185;
	text-align: center;
	padding: 0 1em 0 0;
}
nav{
	grid-area: menu;
	max-width: 100%;
	max-height: 80%;
	margin: 10px 0 0 0;
	text-align: center;
	background-color:#e5e6e1;
}
nav ul{
	width: 100%;
	list-style:none;
		/*this is a flex box for the menu*/
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}
nav a{
	text-decoration: none;
	display: block;
	font-size: 24px;
	padding: 10px 10px 5px 10px;
	color:#47324e;
}
nav a:hover{
	color:white;
	background: #47324e;
	padding: 10px 10px 5px 10px;
}
main section#one{
	display: grid;
	grid-template-areas:
	"crumb search";
	grid-template-rows: 1fr;
	grid-template-columns:2fr 2fr;
	margin: 12px 2px 2px 2px;
	padding: 10px;
}
/* this is the breadcrumb for all pages */
#crumb ul.breadcrumb {
  list-style: none;
  width:50%;
}
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  color: #47324e;
  content: "/\00a0";
}
ul.breadcrumb li a{
  color: #47324e;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}
/*this is the search section for all pages*/
#search{
	display: inline;
	font-size: 18px;
	margin: 0 20px 0 66px;
	padding:0 5px 0 65px;
}
/*this is the featured items on the home page*/
main section#two{
	grid-area:content;
	width:100%;
	min-height:25%;
	
	/*subgrid*/
	display: grid;
	grid-template-areas:
	"article3 article4 article5 article6";
	grid-template-rows: 1fr;
	grid-template-columns: repeat(4, 1fr);
	padding: 5px 0 0 25px;
	margin: 10px 0 0 10px;
}
section#two img{
	padding: 7px 10px 0 0;
	float: right;
}
#white_dress{
	grid-area:article3;
	max-width: 90%;
	min-height: auto;
	background-color: #e5e6e1;
	margin: 10px 0 10px 0;
}
#white_dress h4{
	color: #47324e;
	font-size: 16px;
	padding:0 0 2px 0;
	text-align:center;
}
#essentials{
	grid-area:article4;
	max-width: 90%;
	background-color: #e5e6e1;
	margin: 10px 0 10px 0;
}
#essentials h4{
	color: #47324e;
	font-size: 16px;
	padding:0 0 2px 0;
	text-align:center;
}
#beauty{
	grid-area:article5;
	max-width: 90%;
	background-color: #e5e6e1;
	margin: 10px 0 10px 0;;
}
#beauty h4{
	color: #47324e;
	font-size: 16px;
	padding:0 0 2px 0;
	text-align:center;
}
#accessories {
	grid-area:article6;
	max-width:90%;
	background-color: #e5e6e1;
	margin: 10px 0 10px 0;
}
#accessories h4{
	color: #47324e;
	font-size: 16px;
	padding:0 0 2px 0;
	text-align:center;
}
/*this is the category menu on the home page*/
main section#three{
	display: grid;
	grid-area: content;
	max-width: 100%;
	max-height: 52px;
	margin: 10px 0 10px 0;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}
section#three #category li:nth-child(odd) {
	grid-area:article1;
	background-color:#47324e;
}
section#three #category li:nth-child(even) {
	grid-area:article1;
	background-color:#857185;
}
section#three #category ul{
	list-style:none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
}
section#three #category a{
	text-decoration: none;
	display: block;
	font-size: 20px;
	padding: 10px 60px 10px 60px;
	color: #e5e6e1;
}
section#three #category a:hover{
	color:white;
	background: #47324e;
	opacity: 0.7;
	height:100%;
	width:100%;
}
/*this is the special sales and seasonal promotions section on the home page*/
main section#four{
	display: grid;
	grid-area:content;
	max-width:100%;
	min-height:25%;
	
	grid-template-areas:
	"article1 article2 article3"; 
	grid-template-rows: 1fr;
	grid-template-columns:repeat(3,1fr);
	padding: 5px 0 0 0;
	margin: 20px 0 0 0;
}
section#four img{
	padding: 16px;
	max-width: 100%
}

#shortcut_1{
	grid-area:article1;
	max-width:95%;
	max-height: 99%;
	background-color: #e5e6e1;
	margin: 0 0 0 5px;
	position: relative; /* Important for positioning the overlay */
}
/* Overlay text on the image */
#shortcut_1 h5 {
	position: absolute; /* Positioning the text absolutely */
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centering the text */
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent background */
    padding: 5px;
    border-radius: 5px;
	text-align: center;
	text-shadow: 2px 2px 2px #857185;
}

#sale {
	grid-area: article2;
	width: 100%;
	height: 99%;
	background-color: #e5e6e1;
}
#sale h5{
	color: #f36870;
	font-size: 50px;
	text-align: center;
	padding: 50px 5px 0 5px;
	line-height: 60px;
}
#shortcut_3{
	grid-area: article3;
	width: 95%;
	height: 99%;
	background-color: #e5e6e1;
	margin:  0 0 0 10px;
	position: relative; /* Important for positioning the overlay */
}
#shortcut_3 h5{
	position: absolute; /* Positioning the text absolutely */
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centering the text */
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent background */
    padding: 5px;
    border-radius: 5px;
	text-align: center;
	text-shadow: 2px 2px 2px #857185;
}


/*this is the promotional alert for guide product cart*/
main section#five{
	display: grid;
	grid-area:content;
	max-width:100%;
	max-height: 100%;
	margin: 0 5px 0 5px;
	/*subgrid*/	
	display:grid;
	grid-template-areas:
	"article27"
	"article28";
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}
#mission_statement{
	grid-area:article27;
	max-width:100%;
	background-color: #dfbbcb;
	list-style:none;
}
#mission_statement h4{
	padding:2px;
	color: #47324e;
	font-size:20px;
	text-align: center;
	line-height: 30px;
	
}
#mission_statement p{
	color: #32453a;
	font-size: 14px;
	text-align: center;
	padding:0 4px 4px 4px;
}

#promise_statement{
	grid-area:article28;
	max-width:100%;
	background-color: #dfbbcb;
	list-style:none;
}
#promise_statement h4{
	padding:2px;
	color: #47324e;
	font-size:20px;
	text-align: center;
	line-height: 30px;
	
}
#promise_statement p{
	color: #32453a;
	font-size: 14px;
	text-align: center;
	padding:0 4px 6px 4px;
}

/*this is the highlighted items on the guide page*/
main section#six{
	grid-area:content;
	width:100%;
	max-height:40%;
	
	/*subgrid*/
	display: grid;
	grid-template-areas:
	"article7 article8 article9 article10";
	grid-template-rows: 1fr;
	grid-template-columns: repeat(4, 1fr);
	margin: 10px 10px 2px 0;
	padding: 5px 0 0 25px;
}
section#six img{
	max-width:100%;
	padding: 8px;
}
section#six p{
	color: #32453a;
	font-size: 12px;
	text-align: center;
	padding:0 0 2px 0;
}
section#six h4{
	color: #32453a;
	font-size: 16px;
	padding:0 0 2px 0;
	text-align:center;
}
#fashion_guide{
	grid-area:article7;
	max-width: 89%;
	background-color: #e5e6e1;
	margin: 10px 0 10px 0;
}
#underwear_guide{
	grid-area:article8;
	max-width: 89%;
	background-color: #e5e6e1;
	margin: 10px 0 10px 0;
}
#beauty_guide{
	grid-area:article9;
	max-width: 89%;
	background-color: #e5e6e1;
	margin: 10px 0 10px 0;;
}
#accessories_guide{
	grid-area:article10;
	max-width:89%;
	background-color: #e5e6e1;
	margin: 10px 0 10px 0;
}
/*this is the featured items button on the guide page*/
main section#seven{
	grid-area:content;
	width: 20%;
	height: 37px;
	margin: 0 0 0 14px;
	background-color: #47324e;
}
section#seven ul{
	list-style:none;
}
section#seven a{
	text-decoration: none;
	display: block;
	font-size: 22px;
	padding: 5px;
	color: #e5e6e1;
}
section#seven a:hover{
	color:white;
	background: #857185;
	opacity: 0.7;
}
/*this is the styling gallery on the guide page*/
main section#eight{
	grid-area:content;
	display: grid;
	max-width:100%;
	line-height:20px;
	grid-template-areas:
	"article11 article12";
	grid-template-rows: 1fr;
	grid-template-columns:1fr 1fr;
	margin: 5px 0 5px 0;
}
section#eight h4{
	grid-area: article12;
	color: #857185;
	font-size: 24px;
	text-align: center;
	padding: 0;
	line-height: 25px;
}
section#eight p{
	grid-area: article12;
	padding:24px 0 0 12px;
	text-align: center;
	color: #47324e;
	font-size: 16px;
	line-height: 25px;
}
#styling{
	grid-area: article11;
	width: 93%;
	max-height: 100%;
	background-color: #e5e6e1;
	margin: 5px 0 10px 15px;
	padding: 1px;
}
#styling img{
	grid-area: article11;
	float: left;
	padding: 10px 0 10px 10px;
}
#gallery{
	grid-area: article12;
	width: 95%;
	max-height: 95%;
	background-color: #e5e6e1;
	margin: 5px 5px 10px 11px;
	padding:20px;
}
/*this is the products list on the product page*/
main section#nine{
	grid-area:content;
	width:100%;
	max-height:20%;
	display:grid;
	grid-template-areas:
	"article13 article14 article15 article16"
	"article17 article18 article19 article20";
	grid-template-rows: 1fr 1fr;
	grid-template-columns: repeat(4, 1fr);
	margin: 2px 10px 2px 10px;
	padding: 10px 10px 20px 10px;
	grid-gap: 5px;
}
section#nine img{
	padding: 10px;
}
section#nine h4{
	color: #47324e;
	font-size: 16px;
	padding:0 0 2px 0;
	text-align:center;
}
section#nine p{
	color: #47324e;
	font-size: 16px;
}
#pink_blouse{
	grid-area: article13;
	display:grid;
	max-width:90%;
	background-color: #e5e6e1;
	margin: 0 0 10px 0;
}
#period_underwear{
	grid-area: article14;
	display:grid;
	max-width:91%;
	background-color: #e5e6e1;
	margin: 0 0 10px 0;
}
#korean_skincare{
	grid-area: article15;
	display:grid;
	max-width:91%;
	background-color: #e5e6e1;
	margin: 0 0 10px 0;
}
#access_products{
	grid-area: article16;
	display:grid;
	max-width:91%;
	background-color: #e5e6e1;
	margin: 0 0 10px 0;
}
#blue_jeans{
	grid-area: article17;
	display:grid;
	max-width:91%;
	background-color: #e5e6e1;
	margin: 0 0 10px 0;
}
#bamboo_bra{
	grid-area: article18;
	display:grid;
	max-width:91%;
	background-color: #e5e6e1;
	margin: 0 0 10px 0;
}
#beauty_care{
	grid-area: article19;
	display:grid;
	max-width:91%;
	background-color: #e5e6e1;
	margin: 0 0 10px 0;
}
#gadgets{
	grid-area: article20;
	display:grid;
	max-width:91%;
	background-color: #e5e6e1;
	margin: 0 0 10px 0;
}
/*this is the item gallery on the product page*/
main section#ten{
	display: grid;
	grid-area:content;
	line-height:20px;
	grid-template-areas:
	"article21 article22";
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
	margin: 2px 2px 2px 2px;
	padding:0 10px;
}
section#ten h4{
	grid-area: article22;
	color: #857185;
	font-size: 24px;
	text-align: center;
	line-height: 24px;
}
section#ten p{
	grid-area: article22;
	padding: 12px;
	text-align: center;
	color: #47324e;
	font-size: 16px;
}
#item {
	grid-area: article21;
	width: 95%;
	max-height: 100%;
	background-color: #e5e6e1;
	margin: 0 10px;
	padding: 2px;
}
#item  img{
	grid-area: article21;
	float: left;
	padding: 10px;
}
#productgallery {
	grid-area: article22;
	width: 96%;
	max-height: 100%;
	background-color: #e5e6e1;
	margin: 0 0 0 12px;
	padding:20px 8px 0 0;
}

/*this is the contact us page*/
main section #info{
	display:grid;
	grid-area:content;
	max-width:100%;
	max-height:100%;
	margin: 10px 10px 5px 10px;
	display:grid;
	grid-template-areas:
	"photo1" 
	"vcard"
	"iframe";
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	}
#info h2{
  padding: 5px;
  font-size: 40px;
  text-align: center;
}	
.vcard{
  padding: 5px;
  font-size: 40px;
  width: 100%;
  text-align: center;
  text-decoration: none;
}
.photo1{
	float:center;
	margin:5px;
}

.iframe{
	float:center;
	margin:10px;
	padding: 20px;
}

/*this is the promotional alert for guide product cart/contact us */
main section#redsale{
	display: grid;
	grid-area:content;
	max-width:100%;
	max-height:30%;
	margin: 0 5px 0 5px;
	/*subgrid*/	
	display:grid;
	grid-template-areas:"article29";
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}
#redsale{
	grid-area:onnow;
	max-width:100%;
	background-color: #f36870;
	list-style:none;
}
#onnow h4{
	padding:12px;
	color: #e5e6e1;
	font-size:40px;
	text-align: center;
	line-height: 50px;
}
/*this is the footer for all the pages*/

section #error404 {
		display: grid;
		grid-area:content;
		max-width:100%;
		max-height:30%;
		margin: 0 5px 0 5px;
		/*subgrid*/	
		display:grid;
		grid-template-areas:"error404";
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
        }
#error404 img{
		grid-area: content;
		max-height:100%;
}
#error404 h2 {
		grid-area: content;
        font-size: 50px;
		text-align: center;
        color: #333;
        }
		
#error404 p {
		grid-area: content;
        font-size: 20px;
		text-align: center;
        color: #666;
        }
#error404 a {
		grid-area: content;
        text-decoration: none;
		text-align: center;
        color: #007BFF;
        }
#error404 a:hover {
          text-decoration: underline;
        }


footer section#contact{
	display: flex;
	grid-area: base;
	flex-direction: row;
	flex-wrap: nowrap;
	grid-template-areas:
		"article25 article26";
	grid-template-columns: 2fr 2fr;
	grid-template-rows: 1fr;
	width: 100%;
	height: auto;
	padding: 5px 0 0 0;
}	
#contact ul{
	width: 100%;
	list-style:none;
		/*this is a flex box for the menu*/
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-around;

}
#information{
	grid-area: article25;
	background-color: #857185;
	padding: 1em;
	width:50%;
}
#social_media{
	grid-area: article26;	
	background-color: #857185;
	padding: 1em 0 0 20em;
	width:50%;
}
#information a{
	color: white;
	font-size: 12px;
}
#information h4{
	font-size: 12px;
	color: #e5e6e1;
}
.fa {
  padding: 20px;
  font-size: 80px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
  font-size: 1.5em;
  }

/* pintrest */
.fa-pinterest {
  background: #E60023;
  color: white;
}
/* youtube */
.fa-youtube {
  background: #E60023;
  color: white;
}





@media screen and (max-width:600px){
	#wrapper{
		max-width:600px;
		/*change header height*/
		grid-template-rows: 70px 40px minmax(600px, auto)  minmax(100px, auto);	
	}
/*change set up for media query header grid*/
	header{
		width:80%;
		/* change  header height*/
		height:100%;
		margin: 0 0 0 8px;;
	}
	header img{
		grid-area: logo;
		max-height:70px;
}
	header h1{
		font-size:30px;
		text-align:center;
		line-height: 70px;
	}
/*change set up for media query nav grid*/
	nav{
		max-width: 80%;
		margin:  0 0 0 8px;
	}
	nav ul{
		max-width: 100%;
	}
	nav a{
		font-size:90%;
	}
	nav a:hover{
		height:100%;
	}
	main section#one{
/*change set up for media query search grid*/
		grid-template-rows: 1fr 1fr;
		grid-template-columns:2fr;
		margin:  0 0 0 8px;
}	
	#crumb {
		grid-column: 1/2;
		grid-row: 1/2;
	}
	#search{
		grid-column: 1/2;
		grid-row: 2/3;
		margin:0;
		padding:0;
	}
/*this is the media query featured items on the home page*/
	main section#two{
/*change set up for media query featured products grid home page*/
		width:78%;
		/*subgrid*/
		grid-template-areas:
			"article3 article4" 
			"article5 article6";
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		margin: 0 0 0 15px;
		padding: 0 0 0 20px
	}
	section#two img{
		padding: 7px;
		max-width: 100%;
		max-height: 100%;
	}
/*this is the media query category menu on the home page*/
	main section#three{
		max-width: 80%;
		max-height: 30px;
		margin:5px 0 5px 7px;
		padding: 0 10px 0 10px
	}
	section#category ul{
		width: 100%;
	}
	section#category a{
		font-size: 75%;
		padding: 10px 25px 10px 25px;
	}
	section#category a:hover{
		height:100%;
	}
/*this is the media query special sales and seasonal promotions section on the home page*/
	main section#four{
		max-width:78%;
		max-height:80%;
		grid-template-areas:
			"article1"
			"article2"
			"article3"; 
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-columns:1fr;
		grid-gap: 5px;
		margin: 10px 0 10px 15px;
		padding: 5px 10px 0 5px
	}
	section#four img{
		width: 100%;
		padding: 10px;
		float:left;
	}
	#shortcut_1{
		width: 95%;
		height: 100%;
		margin:  0 0 0 14px;
	}
	#sale {
		width: 95%;
		height: 96%;
		padding: 7px 10px 7px 10px;
		margin:  8px 0 0 14px;
	}
	#sale h4{
		font-size: 70px;
		padding: 10px;
		line-height: 90px;
		margin:  0 0 0 10px;
	}
	#shortcut_3{
		width: 95%;
		height: 100%;
		margin:  0 0 0 14px;
	}
	/*this is the mission statement for the index page*/
	main section#five{
		max-width:80%;
		margin:  0 0 0 8px;
	/*subgrid*/	
		display:grid;
		grid-template-areas:
		"article27"
		"article28";
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}
	#mission_statement h4{
		font-size:90%
	}
	#mission_statement p{
		font-size:75%
	}
	
/*this is the media query highligted items on the guide page*/
	main section#six{
		max-width:80%;
		max-height:40%;
		/*subgrid*/
		grid-template-areas:
			"article7 article8"
			"article9 article10";
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		margin: 10px 10px 2px 10px;
	}

/*this is the media queryfeatured items button on the guide page*/
	main section#seven{
		width:33%;
	}
	section#seven a{
		font-size: 20px;
	}
/*this is the media querystyling gallery on the guide page*/
	main section#eight{
		max-width:80%;
		grid-template-areas:
		"article11"
		"article12";
		grid-template-rows: 1fr 1fr;
		grid-template-columns:1fr;
		grid-gap: 5px;
		margin: 10px;
		padding:0;
	}
	section#eight h4{
		padding: 35px 0 20px 0;
	}
	section#eight p{
		font-size: 16px;
		padding: 5px 10px 0 10px;
	}
	section#eight img{
		width: 100%;
		padding: 10px;
		float:left;
	}
	#styling{
		max-width: 100%;
		max-height:100%;
		margin: 0 10px 0 10px;
		padding: 1px;
	}
	#gallery{
		max-width: 93%;
		max-height: 95%;
		margin: 0 0 0 10px;
		padding:2px 0 0 0
	}
/*this is the media query products list on the product page*/
	main section#nine{
		width:80%;
		max-height:20%;
		grid-template-areas:
			"article13 article14"
			"article15 article16"
			"article17 article18"
			"article19 article20";
		grid-template-rows: 1fr 1fr 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		margin: 8px;
		padding: 0 0 0 20px;
	}
	section#nine img{
		padding: 7px;
		max-width: 100%;
		max-height: 100%;
	}
	section#nine h4{
		font-size: 16px;
		padding:0 0 2px 0;
	}
	section#nine p{
		font-size: 16px;
	}
	/*this is the item gallery on the product page*/
	main section#ten{
		max-width:80%;
		grid-template-areas:
			"article21" 
			"article22";
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr;
		grid-gap: 5px;
		margin: 8px;
		padding:0;
	}
	#productgallery  h4{
		font-size: 20px;
		padding:25px 5px 5px 5px;
	}
	#productgallery p{
		padding: 5px;
		font-size: 16px;
	}
	#item {
		max-width: 100%;
		max-height: 100%;
		margin: 0 0 0 10px;
		padding:2px 0 0 2px;
	}
	#item  img{
		float: left;
		padding: 6px;
	}
	#productgallery {
		max-width: 95%;
		max-height: 95%;
		margin: 0 0 0 10px;
		padding:2px 0 0 0;
	}
/*this is the cart on the cart page*/
	table {
		max-width: 75%;
		margin: 10px 0 10px 25px;
	}
	thead th{
		height: 20px;
		font-size:24px;
	}
	tbody td{
		height: 20px;
	}
	tbody td img{ 
		width:80%;
	}
/*this is the promotional alert for all the pages*/
	main section#redsale{
		max-width:80%;
		margin:  0 0 0 8px;
	/*subgrid*/	
		display:grid;
		grid-template-areas:"article29";
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
/*this is the footer for all the pages*/
	footer section#contact{
		width:80%;
		padding: 0;
		margin:  0 0 0 8px;
	}
	#information{
		padding: 1em;
	}
	#social_media{
		padding: 1em;
	}