body {
 position:relative;
 
}

body::before {
/*	content: "";
	background-image: url("../images/HookD_BG.png");
	position: fixed;
	opacity:0.1;
	inset: 0;
	background-size: contain;
	z-index:-1;

*/
margin:0px;
}
.hoofding {
color: #733719;
	font-family: 'HookdFont';
    font-size: 135px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    text-align: center;
	/*text-shadow: 3px 3px 20px black;*/
}

.bg{
	background-color: #d0ab90;
	width: 100%;
	height:100%;
}
.tegelrij{
	display:flex;
	width:1000px;
	margin-top:15px;
	margin-left: auto;
	margin-right: auto;
	gap:15px;
	justify-content: center; /* horizontaal */
	align-items: center; 
}

.tegel{
	width:300px;
	height: 300px;
	border-radius:15px;
	/*margin-right:10px;*/
	filter: grayscale(100%) brightness(70%);
	transition: filter 0.4s ease;
	overflow: hidden;
}
.tegel img{
	width:300px;
	height: 300px;
	object-fit: cover;
}
.tegel:hover {
  filter: grayscale(0%) brightness(100%);
}

.tegel:hover .tegeltekst {
  color: #733719;
  transform: scale(1.1);
}

.tegeltekst{
	font-family: 'Bauhouse';
    position: absolute;
    bottom: 5px;
    color: white;
    font-size: 35px;
    text-shadow: 3px 3px 20px black;
    font-weight: bolder;
	width:300px;
	text-align:center;
	pointer-events:none;
	transition: transform 0.4s ease;
	filter: grayscale(0%) brightness(100%);
}

.titel{	
	display: flex;
	font-weight:bold;
	font-size:25px;	
	background-color: #ff55003b;
	padding:3px;
	height: 60px;
	justify-content: center; /* horizontaal */
    align-items: center;
}

.artikel{
	display: flex;
	margin-top:10px;
	font-size:20px;
}

.afb {
width:180px;
}

.naam {
width:250px;
margin-left:15px;
}

.omshr {
width:500px;
}

.aantal {
width:200px;
text-align:center;
}

.prijs {
width:100px;
text-align:center;
}


#splash-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white; /* Background color */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

#logo path {
	stroke-dasharray: 400; /* Length of the path */
	stroke-dashoffset: 400; /* Start with the path hidden */
	animation: draw 2s forwards, fillColor 2s forwards 2s; /* Draw and fill animation */
}

@keyframes draw {
	to {
		stroke-dashoffset: 10; /* Draw the path */
	}
}

@keyframes fillColor {
	0% {
		fill: none;
	}

	100% {
		fill: rgba(0, 0, 0, 1); /* Change to desired fill color */
	}
}