.header {
	position: sticky;
	top: 20px;
	background-image: radial-gradient(lightgray, darkgray);	
	height: 5rem;
	width: 80%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 3fr 2fr;
	border-radius: 15px;
	border-width: 3px;
	border-color: var(--red-main);
	border-style: solid;
	z-index: 100;
	box-sizing:shadow-box;

	transition:
		width 300ms ease,
		margin 300ms ease,
		top 300ms ease,
		border-radius 300ms ease,
		box-shadow 300ms ease;
}	

.header.scrolled {
	position: sticky;
	top: 0;
	width: 100%;
	margin: 0 auto;
	border-radius: 0;
	border: none;
	background-image: radial-gradient(black,black);
	color: silver;
	box-shadow: 0 0 10px silver;
}

.logo {
	margin: 5px;

}

.logo img {
	object-fit: contain;
	height: calc(5rem - 10px);
}

.navbar {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.hlink, .slink, .alink, .clink {
	display: grid;
	place-items: center;
	font-size: 1.25rem;

}

.home {
	background-color: black;
	height: 10000px;
	padding: 0;
}

.navbar a {
	font-weight: 700;
}

.home .hlink, .services .slink, .about .alink, .contact .clink, .navbar a:hover{
	text-decoration: underline;
	color: var(--red-main);
}

.quote {
	background-image: radial-gradient(var(--red-main), darkred);
	display: grid;
	place-items: center;
	width: 50%;
	height: fit-content;
	padding: 15px ;
	align-self: center;
	place-self: center;
	color: white;
	border-radius: 30px;
}

.quote:hover {
	background-image: radial-gradient(maroon, darkred);
	color: darkgray;
}

.hamburger {
	display: none;
}

.hammenu {
	display: grid;
	position: absolute;
	top: calc(3px + 100%);	
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	margin: 0 auto;

	grid-template-rows: 1fr 1fr 1fr 1fr;
	gap: 10px;
	padding: 10px 0;

	overflow: hidden;
	max-height: 0;
	opacity: 0;
	pointer-events: none;

	transition: max-height 1000ms ease, opacity 1000ms ease;
	box-shadow: 0 0 10px silver;
	border-radius: 0 0 15px 15px;
}

@media (max-width: 768px) {
	.header {
		grid-template-columns: 1fr 1fr;
	}
	.hamburger {
		display: grid;
		justify-self: end;
		margin-right: 20px;
		align-self: center;
		width: 25%;
		background: none;
		border: 0;
		padding: 0;

		width: 32px;
		height: 24px;
		place-items: center;
		position: relative;

	}
	
	.hamburger span {
		position: absolute;
		width: 100%;
		height: 3px;
		transition: transform 300ms ease, opacity 300ms ease;
		background-color: var(--red-main);
	}

	.hamburger span:nth-child(1) {transform: translateY(-8px);}
	.hamburger span:nth-child(2) {transform: translateY(0);}
	.hamburger span:nth-child(3) {transform: translateY(8px);}

	.hamburger.is-open span:nth-child(1) {transform: rotate(45deg);}
	.hamburger.is-open span:nth-child(2) {opacity: 0;}
	.hamburger.is-open span:nth-child(3) {transform: rotate(-45deg);}

	.header .hammenu {
		background-image: radial-gradient(lightgray, darkgray);
	}

	.header.scrolled .hammenu {
		background: black;
	}

	.hammenu.open {
		max-height: 300px;
		opacity: 1;
		pointer-events: auto;	
	
	
	}

	.navbar {
		display: none;
	}
	.quote {
		display: none;
	}

}