	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
	
	* {
		padding: 0;
		margin: 0;
	}
	
	body {
		overflow-x: hidden;
		font-family: "Inter";
	}
	
	header, footer {
		background-color: gray;
		background-image: url('../img/impression-header.png');
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	header {
		position: sticky;
		top: 0;
		left: 0;
		background-size: 100% 150px;
		color: lightgray;
	}
	
	footer {
		background-size: 100% 150px;
		color: lightgray;
	}
	
	header nav, footer nav {
		display: flex;
		align-items: center;
		padding: 0 20px;
	}
	
	header ul, footer ul {
		list-style: none;
		align-items: center;
		display: flex;
	}
	
	header a, footer a {
		color: lightgray;
		text-decoration: none;
		padding: 15px;
		display: block;
		transition: background 0.3s ease-in-out
	}
	
	header a:hover, header .parent-nav:hover, footer a:hover {
		border-radius: 15px 5px;
		background: white;
		color: gray;
		cursor: pointer;
	}
	
	header .navbar {
		justify-content: space-between;
		height: 60px;
	}
	
	header .logo a {
		font-size: 24px;
		font-weight: bold;
	}
	
	header .logo a:hover {
		background: none;
		color: white;
	}
	
	header .burger {
		display: none;
	}

	header .has-sub-nav {
		position: relative;
	}
	
	header .parent-nav {
		color: lightgray;
		padding: 15px;
		display: block;
		transition: background 0.3s ease-in-out
	}
	
	header .sub-nav-list {
		border-radius: 15px 5px;
		background: gray;
		display: none;
		position: absolute;
		top: 50px;
		left: 10px;
		width: max-content;
		transition: display 0.3s ease-in-out
	}
	
	header .has-sub-nav:hover .sub-nav-list {
		display: block;
	}
	
	header h1 {
		padding: 0 50px;
		height: 90px;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		color: lightgray;
		font-size: 36px;
		font-weight: bold;
	}
	
	@media (max-width : 768px){
		header .burger {
			display: flex;
			width: 25px;
			height: 24px;
			cursor: pointer;
			position: relative;
		}
		
		header .burger span {
			width: 100%;
			height: 4px;
			background-color: lightgray;
			display: block;
			position: absolute;
			top : 50%;
			transform: translateY(-50%);
			transition: background-color 0.3s ease-in-out;
		}
		
		header .burger span::before, header .burger span::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 4px;
			background-color: lightgray;
			transition: transform 0.3s ease-in-out;
		}
		
		header .burger span::before {
			transform: translateY(-10px);
		}
		
		header .burger span::after {
			transform: translateY(10px);
		}
		
		header .burger.active span {
			background-color: transparent;
		}
		
		header .burger.active span::before {
			transform: translateY(0px) rotateZ(45deg);
		}
		
		header .burger.active span::after {
			transform: translateY(0px) rotateZ(-45deg);
		}
		
		header .navlist {
			border-radius: 30px 10px 0px 30px;
			background: darkgray;
			flex-direction: column;
			align-items: flex-start;
			width: 200px;
			position: fixed;
			top: 50px;
			right: -200px;
			height: 100vh;
			padding-top: 0;
			transition: right 0.3s ease;
		}
		
		header .navlist.active {
			right: 0;
		}
		
		header .parent-nav:hover {
			background: white;
			color: gray;
		}
		
		header .sub-nav-list {
			position: relative;
			top: 0;
		}
		
		header .has-sub-nav:hover .sub-nav-list {
			display: none;
		}
		
		header .has-sub-nav:hover .sub-nav-list.active {
			display: block;
		}
		
		header .sub-nav-list.active {
			display: block;
		}
		
		header h1 {
			font-size: 24px;
		}

	}

	footer .foonav1 {
		justify-content: space-between;
		height: 90px;
	}
	
	main {
		background-color: #fff;
		padding: .5em 1em;
		color: black;
	}
	
	main h1 {
		padding: 0;
		margin: 0.67em;
		margin-left: 0.5em;
		color: black;
	}
	
	main h2 {
		padding: 0;
		margin: 0.83em;
		color: black;
	}
	
	main p {
		padding: 0;
		margin: 1em;
		margin-left: 1.5em;
		color: black;
	}

	main ul {
		padding: 10px;
		margin: 1em;
		margin-left: 3em;
		color: black;
	}

	main li {
		color: black;
	}

	main a {
		color: black;
	}

