@import url(https://fonts.googleapis.com/css?family=Exo:100);
/* Cool infinite background scrolling animation. * Twitter: @kootoopas */
/* Exo thin font from Google. */
/* Background data (Original source: https://subtlepatterns.com/grid-me/) */
/* Animations */
 @-webkit-keyframes bg-scrolling-reverse {
	 100% {
		 background-position: 50px 50px;
	}
}
 @-moz-keyframes bg-scrolling-reverse {
	 100% {
		 background-position: 50px 50px;
	}
}
 @-o-keyframes bg-scrolling-reverse {
	 100% {
		 background-position: 50px 50px;
	}
}
 @keyframes bg-scrolling-reverse {
	 100% {
		 background-position: 50px 50px;
	}
}
 @-webkit-keyframes bg-scrolling {
	 0% {
		 background-position: 50px 50px;
	}
}
 @-moz-keyframes bg-scrolling {
	 0% {
		 background-position: 50px 50px;
	}
}
 @-o-keyframes bg-scrolling {
	 0% {
		 background-position: 50px 50px;
	}
}
 @keyframes bg-scrolling {
	 0% {
		 background-position: 50px 50px;
	}
}
/* Main styles */
 body {


	/* img size is 50x50 */
	 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
	 -webkit-animation: bg-scrolling-reverse 0.92s infinite;
	/* Safari 4+ */
	 -moz-animation: bg-scrolling-reverse 0.92s infinite;
	/* Fx 5+ */
	 -o-animation: bg-scrolling-reverse 0.92s infinite;
	/* Opera 12+ */
	 animation: bg-scrolling-reverse 0.92s infinite;
	/* IE 10+ */
	 -webkit-animation-timing-function: linear;
	 -moz-animation-timing-function: linear;
	 -o-animation-timing-function: linear;
	 animation-timing-function: linear;
}


.nav-tile {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nav-tile:hover {
	background-color: rgba(255, 0, 0, 0.2);
	transform: translateY(-2px);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.custom-tile {
	background-color: rgba(255, 0, 0, 0.1);
	color: red;
	height: 200px; /* Increase the height */
}

.product-image {
	height: 250px; /* Decrease the height */
}