@font-face {

	font-family: RalewayMedium;
	src: url(Raleway/Raleway-Medium.ttf);
	
}

.banner {

	  max-width: 70%;
	  margin-left: auto;
	  margin-right: auto;
	  display: block;
	  padding: 0;
	  max-height: 100%;

}
		
.parallax {
	  /* The image used */
	  background-image: url("../Pictures/footbanner.png");

	  /* Set a specific height */
	  height: 600px;

	  /* Create the parallax scrolling effect */
	  background-attachment: fixed;
	  background-position: bottom;
	  background-repeat: no-repeat;
	  background-size: 100%;
	  background-color: #c3d7ff;

  }

body {
		#background-color:rgb(245, 255, 249);
		background-color: #ffdfff;
		font-family: "myFont";
		margin: 0px;
		height: 100%;

}
	 
html {
	height: 100%

}
	 
#checkoutButton {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  
}

#menu {
	text-align:center;
	
}

ul.nav {
	list-style-type: none;				

}

a:link, a:visited {
	padding: 0px 20px;
	color:SlateBlue;
	text-decoration:none;
}

a:hover, a:active {
	color: black;
}


	
.mainheading {

	font-family: RalewayMedium;
	text-align: center;
}

.cart {
	font-family:verdana;
}
	
.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

.gallery:hover {
  border: 1px solid #777;
}

.gallery img {
  width: 100%;
  height: auto;
}

.desc {
  padding: 15px;
  text-align: center;
}

.footer {
	
	text-align:center;   
	background-color: #c3d7ff;

}

#copywight {

	text-align: center;
	
	width: 100%;
	

}

.thumbnail {

	height: 300px;
	width: 300px;

}

.flex-container {

display: flex;
flex-direction: column;
align-items: center;
grid-column-start: 2;

}

.prodimg {
	
	grid-row-start: 1;
}

.grid-container {

display: grid;
column-gap:10px;
padding: 50px;
grid-template-columns: 540px auto;
}

.description {
	align-self: flex-start;
	padding-left: 50px;

}

.formflex {
	align-self: flex-start;
	padding-left: 50px;

}