@charset "utf-8";
/* CSS Document */
*{
	font-size: 18px;
	color: white;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}


@font-face{
	font-family: "Poppins regular";
	src: url("/fonts/Poppins-Regular.ttf")
}

@font-face{
	font-family: "Poppins SemiBold";
	src: url("/fonts/Poppins-SemiBold.ttf")
}

@font-face{
	font-family: "Zeyada Regular";
	src: url("../fonts/Zeyada-Regular.ttf")
}


body{
	background-color: #8aaeae; 
}

#wrapper{
	max-width: 1000px;
	min-height: 1000px;
	background-color: #b2d4d3;
	margin: 0 auto;
	display: grid;
	grid-template-areas: 
		"header"
		"menu"
		"content"
		"footer";
	grid-template-columns: 100%;  
	grid-template-rows: 75px 50px auto 50px; 
}

/*TEXT*/

 /*hides <h1>*/
h1.hidden {
		color: red;
        position: absolute;
        left: -9999px;
        top: -9999px;
    }


h2{
	font-family: "Zeyada Regular";
	font-size: 2.666666em;
}

h3{
	font-family: "Poppins SemiBold";
	font-size: 1.66666666em;
	color: #03161D;
}

h4{
	font-family: "Poppins SemiBold";
	font-size: 1.3333333em;
	color: #03161D;
}

p{
	font-family: "Poppins regular";
	font-size: 1em;
	color: #03161D;
}

a {
	text-decoration: none;
}

/*HEADER*/
header{
	grid-area: header;
	background-color: #495959;
	display: grid;
	grid-template-areas: 
		"logo";
	grid-template-columns: 100%;  
	grid-template-rows: 100%; 
	width: 100%;
	height: 100%;
	justify-items: center;
}

header h2{
	text-align: right;
	padding-right: 20px;
}

/*HEADER MENU*/

nav ul{
	grid-area: menu;
	background-color: #495959;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	list-style: none;
	color: white;
	width: 100%;
	height: 50px;
	align-items: center;
	font-family: "Poppins regular";
}

/*MAIN*/

#home {
/* set up for main subgrid on home page*/
	grid-area: content;
	display: grid;
	grid-template-areas: 
		"banner"
		"text"
		"featured-cards";
	grid-template-columns: 100%; 
	grid-template-rows: 500px auto auto;
	background-color: #b2d4d3;
	min-height: 100%;
}

#category{
/*set up for main subgrid on shop pages*/
	grid-area: content;
	display: grid;
	grid-template-areas: 
		"banner"
		"text"
		"product-cards";
	grid-template-columns: 100%; 
	grid-template-rows: 500px auto auto;
	background-color: white;
	min-height: 100%;
}


/*BANNER IMAGE*/

#banner {
	grid-area: banner;
	background-color: grey;
	max-width: 100%;
}

/*CONTENT HOME*/

#text {
	grid-area: text;
	text-align: left;
	padding: 15px;
	background-color: white;
}

#text h2{
	color: #03161D;
}

/*FEATURED CARDS FOR HOMEPAGE*/

#featured-cards{ 
	grid-area: featured-cards;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	max-width: 1000px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#featured-cards aside{
	background-color: #495959;
	padding: 5px;
	max-width: 310px;
	box-shadow: 2px 2px 3px #333333;
}

#featured-cards img{ 
	max-width: 300px;
	max-height: 250px;
}

#featured-cards p{
	color: white;
}

.button { 
	display: inline-block; 
    background-color: #B3612E;
    color: white; 
    padding: 10px 20px; 
    text-align: center;
    font-family: "Poppins SemiBold";
    font-size: 1em;
    width: 97%; 
    margin: 10px auto 0; 
    display: block; 
	transition: all 0.2s ease-in-out; 
    box-shadow: 3px 3px 5px #333333; 
    border: none;
    cursor: pointer;

}

/* Hover Effect */
.button:hover {
    background-color: #b2d4d3; 
    transform: scale(1.04); 
}

/* Press/Active Effect */
.button:active {
    background-color: #B3612E; 
    transform: scale(0.95); 
    box-shadow: 2px 2px 3px #333333; 
}

/*PRODUCT CARD FOR SHOP PAGES*/
#product-cards{ 
	grid-area: product-cards; 
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	max-width: 1000px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #b2d4d3;
}

#product-cards aside{
	background-color: #495959;
	padding: 5px;
	max-width: 310px;
	border-style: solid;
	border-color: black;
	border-width: thin;
	margin-bottom: 5px;
	box-shadow: 2px 2px 3px #333333;
}


#product-cards img{ 
	max-width: 300px;
	max-height: 250px;
}

#product-cards p{
	color: white;
}


/*CONTACT PAGE*/

#contact-details  {
	font-family: "Poppins regular";
	font-size: 1em;
	padding-left:20px;
	padding-bottom: 10px;
	
}

#contact-details a  {
	color: #03161D;
}

#contact-details h2  {
	color: #03161D;
}


main#contact {
	color: #03161D;
	text-align: left;
	/*padding-left: 15px;*/
	padding-bottom: 10px;
}


/*FORM*/
form {
	display:block;
	align-content: center;
	padding:20px;
}

fieldset {
	background-color: #8aaeae;
	padding-left: 10px;
}

legend {
	font-family: "Poppins regular";
	font-size: 2em;
	background-color: #495959;
	padding-right: 10px;
	padding-left: 10px;
}

label {
	font-family: "Poppins regular";
	font-size: 1em;
	color: #03161D;
}

input {
	font-family: "Poppins regular";
	font-size: 1em;
	color: #03161D;
	margin: 5px;
}

select {
	font-family: "Poppins regular";
	font-size: 1em;
	color: #03161D;	
}

option {
	font-family: "Poppins regular";
	font-size: 1em;
	color: #03161D;
}

#submit {
	display: inline-block; 
    background-color: #B3612E;
    color: white;
    padding: 10px 20px;
    font-family: "Poppins SemiBold";
    font-size: 1em;
    width: 20%;
    text-align: center;
    border: none;
    box-shadow: 3px 3px 5px #333333;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Hover Effect */
#submit:hover {
    background-color: #b2d4d3;
    transform: scale(1.04);
}

/* Press Effect */
#submit:active {
    background-color: #B3612E;
    transform: scale(0.95);
    box-shadow: 2px 2px 3px #333333;
}

input[type="checkbox"] {
	flex: none;
}

div.one{
	font-family: "Poppins regular";
	font-size: 1em;
	color: #03161D;
}

.tooltip {
	font-family: "Poppins regular";
	font-size: 1em;
	display: block; 
	position: absolute; 
	visibility: hidden;
	left: 40em;
	top: 1120px; 
	width: 12em;
	padding: 0.5em;
	font-weight: normal;
	color: #ffffff;
	background-color: #495959;
	border:solid 2px #0E3D59;
}

.error {
	font-family: "Poppins regular";
	font-size: 1em;
	color: #ffffff;
}

.correct {
	font-family: "Poppins regular";
	font-size: 1em;
	color: #03161D;
}


/*FOOTER*/
	
footer ul{
	grid-area: footer;
	background-color: #495959;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	list-style: none;
	color: white;
	min-width: 100%;
	min-height: 100%;
	align-items: center;
	font-family: "Poppins regular"; 
}

/*responsive images*/
.responsive {
	max-width: 100%;
	height: auto; 
	}


/*MEDIA QUERY*/

@media only screen and (max-width: 768px) {

/*banner overlay & text*/
	aside#banner h2{
		top: 40%;
		left: 15%;
	}
	aside#banner img {
  		height: auto;
	}

/*resizes banner & allows extra height for product tiles*/
	main#home {
		grid-template-rows: auto auto auto;
}
	
	main#category {
		grid-template-rows: auto auto auto;
}
	
	main#product{
/*set up for main subgrid on product pages*/
		grid-template-columns: 100%; 
		grid-template-rows: auto auto auto;
		grid-template-areas: 
			"product-image" 
			"details"
			"description";
}

	
}

/*IMAGE CREDITS

Vases - Jessica Ruscello
Beige Cups - Vladimir Gladkov
Turning Wheel - Earl Wilcox
Blue Bowl - Meghna R
Artist - Yana Hurska
All other images - Tom Crew

Downloaded from unsplash
*/