/* Layout */

		input[type=text] {
			width: 130px;
			box-sizing: border-box;
			border: 2px solid #ccc;
			border-radius: 4px;
			font-size: 16px;
			background-color: white;
			background-image: url('searchicon.png');
			background-position: 10px 10px;
			background-repeat: no-repeat;
			padding: 12px 20px 12px 40px;
		}

		header .overlay {
			width: 100%;
			height: 100%;
			padding: 50px;
			color: #FFF;
			text-shadow: 1px 1px 1px #333;
			background-image: linear-gradient(135deg, #9f05ff69 10%, #fd5e086b 100%);

		}


		h3,
		p {
			font-family: 'Open Sans', sans-serif;
			margin-bottom: 30px;
		}



		body {
			margin: 0;
			font-family: Arial, Helvetica, sans-serif;
		}

		header {
			background: url('https://ocdn.eu/images/pulscms/YmQ7MDA_/69a69ff5d10804f3cb12cb227c7a8455.jpg');
			text-align: center;
			width: 100%;
			height: auto;
			background-size: cover;
			background-attachment: fixed;
			position: relative;
			overflow: hidden;
			border-radius: 0 0 85% 85% / 30%;
		}

		.topnav {
			overflow: hidden;
			background-color: #333;
		}

		.topnav a {
			float: left;
			color: #f2f2f2;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
			font-size: 17px;
		}

		.topnav a:hover {
			background-color: #ddd;
			color: black;
		}

		.topnav a.active {
			background-color: #04AA6D;
			color: white;
		}


		body {
			min-width: 630px;
			background-color: #3a3b3c;
		}

		#container {
			padding-left: 200px;
			padding-right: 190px;
		}

		#container .column {
			position: relative;
			float: left;
		}

		#center {
			padding: 10px 20px;
			width: 100%;
		}

		#left {
			width: 180px;
			padding: 0 10px;
			right: 240px;
			margin-left: -100%;
		}

		#right {
			width: 130px;
			padding: 0 10px;
			margin-right: -100%;
		}

		#footer {
			clear: both;
		}

		/* Left design */
		* html #left {
			left: 150px;
		}

		/* make columns same height */
		#container {
			overflow: hidden;
		}

		#container .column {
			padding-bottom: 1001em;
			margin-bottom: -1000em;
		}

		/* Footer */

		.footer {
			display: flex;
			flex-flow: row wrap;
			padding: 30px 30px 20px 30px;
			color: #f0e7e7;
			background-color: rgb(36, 32, 32);
			border-top: 1px solid #e5e5e5;
		}

		.footer>* {
			flex: 1 100%;
		}

		.footer__addr {
			margin-right: 1.25em;
			margin-bottom: 2em;
		}

		.footer__logo {
			font-family: 'Pacifico', cursive;
			font-weight: 400;
			text-transform: lowercase;
			font-size: 1.5rem;
		}

		.footer__addr h2 {
			margin-top: 1.3em;
			font-size: 15px;
			font-weight: 400;
		}

		.nav__title {
			font-weight: 400;
			font-size: 15px;
		}

		.footer address {
			font-style: normal;
			color: #999;
		}

		.footer__btn {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 36px;
			max-width: max-content;
			background-color: rgba(255, 255, 255, 0.07);
			border-radius: 100px;
			color: #ffffff;
			line-height: 0;
			margin: 0.6em 0;
			font-size: 1rem;
			padding: 0 1.3em;
		}

		.footer ul {
			list-style: none;
			padding-left: 0;
		}

		.footer li {
			line-height: 2em;
		}

		.footer a {
			text-decoration: none;
		}

		.footer__nav {
			display: flex;
			flex-flow: row wrap;
		}

		.footer__nav>* {
			flex: 1 50%;
			margin-right: 1.25em;
		}

		.nav__ul a {
			color: #999;
		}

		.nav__ul--extra {
			column-count: 2;
			column-gap: 1.25em;
		}

		.legal {
			display: flex;
			flex-wrap: wrap;
			color: #999;
		}

		.legal__links {
			display: flex;
			align-items: center;
		}

		.heart {
			color: #ffffff;
		}

		@media screen and (min-width: 24.375em) {
			.legal .legal__links {
				margin-left: auto;
			}
		}

		@media screen and (min-width: 40.375em) {
			.footer__nav>* {
				flex: 1;
			}

			.nav__item--extra {
				flex-grow: 2;
			}

			.footer__addr {
				flex: 1 0px;
			}

			.footer__nav {
				flex: 2 0px;
			}
		}

		/* Aesthetics */
		body {
			margin: 0;
			padding: 0;
			font-family: Sans-serif;
			line-height: 1.5em;
		}

		p {
			color: #555;
		}

		nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		nav ul a {
			color: darkgreen;
			text-decoration: none;
		}

		#header,
		#footer {
			font-size: large;
			padding: 3.0em;
			background-image: url("images/footer.jpg");
		}

		#left {
			background: #DAE9BC;
		}

		#right {
			background: #F7FDEB;
		}

		#center {
			background-image: url("images/center.jpg");
		}

		#container .column {
			padding-top: 1em;
		}



		.card {
			box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
			transition: 0.3s;
			border-radius: 5px; /* 5px rounded corners */
			width: 20%;
			height: 20%;
  			margin: 10px;
  			text-align: center;
  			font-size: 10px;
			background-color: white;
		  }
		  
		  /* On mouse-over, add a deeper shadow */
		  .card:hover {
			box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
		  }
		  
		  /* Add some padding inside the card container */
		  .container {
			padding: 2px 16px;
		  }

		  #products, #orders {
			display: flex;
			flex-wrap: wrap;
			margin:auto;
			width: 90%
		  }

		  .card-body button {
			border: none;
			outline: 0;
			padding: 12px;
			color: white;
			background-color: #000;
			text-align: center;
			cursor: pointer;
			width: 100%;
			font-size: 18px;
		  }

		  .price {
			color: grey;
			font-size: 22px;
		  }

		  .card-body  {
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
			max-width: 300px;
			margin: auto;
			text-align: center;
			font-family: 'roboto', sans-serif;
		  }

		  .card-body button:hover {
			opacity: 0.7;
		  }

		  a{
			color: white;
			text-decoration: none
		  }

		  .card-text{
			margin-top: 20px
		  }

		  input.searchText{
  			padding: 6px;
  			border: solid 2px;
  			margin-top: 8px;
  			font-size: 17px;
			width: 400px;
			height: 40px;
			border-color: black
		  }

		  button#button-search{
			border: none;
			border-color: black;
			background-color: #04AA6D;
			color: white;
			width: 60px;
			height: 40px;
			margin-top: 8px;
			margin-left: 2px;
			border-radius: 5px
		  }

		  .searchStuff {
			display: flex;
			justify-content: center;
		  }