/*==================================

    site-wide css

===================================*/
body{
   background-color:#ede1e1;
}

.dm-serif-text-regular {
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
    
}

.dm-serif-text-regular-italic {
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: italic;
}

.spline-sans-/*<uniquifier>*/ {
  font-family: "Spline Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

#banner img{
    width:100%;
    height: 220px;
}

#logo img{
    margin-top:-220px;
    height:240px;
}

h2{
    font-size:2em;
    margin-top:10px;
    font-family:"DM+Serif+Text"; 
    font-family: "DM Serif Text", serif;
    font-weight: 600;
}

p{
    padding-left:5%;
    padding-right:5%;
    text-align:justify; 
    font-family:"DM+Serif+Text"; 
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-style: normal;
    /*text-indent: 20px;*/
}

#login{
    float:right;
}




/*==================================

    home.php css

===================================*/
.content{
    width:100%;
    margin:auto;
}

.cards{
    border-radius:20px;
    background-color:rgba(240, 234, 221, 0.8);
    padding-top:20px;
    padding-bottom:20px;
    width:60%;
    margin:auto;
}

.welcome_bg{
    border-radius:10px;
    padding-top:5%;
    padding-bottom:5%;
    background-image: url("imgs/home_imgs/native_inst.jpg");
    background-repeat:no-repeat;
    background-size: cover;
}
.about_us_bg{
    border-radius:10px;
    padding-top:5%;
    padding-bottom:5%;
    background-image: url("imgs/dream_catch.jpg");
    background-repeat:no-repeat;
    background-size: cover;
}
.shopping_bg{
    border-radius:10px;
    padding-top:5%;
    padding-bottom:5%;
    background-image: url("imgs/home_imgs/mich_land.jpg");
    background-repeat:no-repeat;
    background-size: cover;
}




/*==================================

    store.php css

===================================*/
.store_content{
    display:grid;
    grid-column-template:25% 75%;
    grid-row-template:50% 50%; 
}

.prod_cat_sidebar{
	background:#b32d24;
	grid-column-start:1;
	grid-column-end:2; 
	
	grid-row-start:1;
	grid-row-end:3; 
}
	
.prod_cat_sidebar button{
    width:100%;
    padding-left:5%;
	margin-top:5px;
	background:none;  
	color:white; 
	font-size:1.2em;
	text-align:left;
}

.prod_cat_sidebar button:hover{
	text-decoration:underline; 
	background:#f1e4c9;  
	color:#b32d24;
}

.store_main{
	grid-column-start:2;
	grid-column-end:3; 
	
	grid-row-start:1;
	grid-row-end:2; 
	margin-left:25px;
	margin-right:50%;
  
}

#store_img{
    grid-column-start:2;
	grid-column-end:3; 
	
	grid-row-start:1;
	grid-row-end:2; 
	margin-left:50%;
}

#store_img img{
    height:100%;
    width:100%;
}






#shopping_main{
    grid-column-start:2;
	grid-column-end:3; 
	
	grid-row-start:2;
	grid-row-end:3; 
    
}





/*==================================

    Footer css

===================================*/

footer{
    background:#6cbd81;
}













































/*==================================

    nav & link css

===================================*/
#nav{
	background-color:#b32d24;
	margin-top:-20px;
	padding-top:5px;
	padding-bottom:5px;
    font-family: "Spline Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

#nav a:link{
	text-decoration:none;
	/*color:#f79242;*/
	color:#f7e4e4;
	font-size:1.4em; 
	padding-left:10px;
	padding-right:10px;
	margin-left:4px;
}

/*a:visited{
	color: #660001; 
	text-decoration: underline;
}

a:focus{
	background-color:#171415; 
	text-decoration: underline;
	font-size:1.3em; 
	padding-right:22px;
	padding-left:22px;
}*/

#nav a:hover{
    color:#8a1f19;
	/*color:#fcc90d;*/
	/*color:#b32d24;*/
	/*color:#6e1914;*/
	background-color:#ede1e1; 
	/*background-color:#802019;
	text-shadow:2px 2px black;*/
	text-decoration: underline;
	/*font-weight:bold;
	font-size:1.4em;
	border-radius:5px;*/
	border:2px  solid #8a1f19;
}
/*

a:active{
	color:#edbc07;
	background-color:#171415; 
	text-decoration: underline;
	font-size:1.3em; 
	padding-right:22px;
	padding-left:22px;
}
*/

	































/*==================================

    Alt Screen Sizes Media Quries css

===================================*/

@media screen and (min-width: 501px){
	
	#nav{
		
	}
	
	#menu{
		display:none; 
	}
}

/*media design for moblie devices*/
@media screen and (max-width: 500px){
	
	#nav{
		display:flex;
		flex-direction:column; 
		
	}
	
	#menu{
		display:show;
	}
	
	
	nav{
		display:flex;
		flex-direction:column;
	}
}