@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
	
	* {
		padding: 0;
		margin: 0;
		color: black;
	}
	
	body {
		overflow-x: hidden;
		font-family: "Inter";
	}
	
	header, footer {
		background-color: orange;
		background-image: url('../img/simple-header-blended-small.png');
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	header {
		position: sticky;
		top: 0;
		left: 0;
		background-size: 100% 150px;
		color: white;
	}
	
	footer {
		background-size: 100% 150px;
		color: white;
	}
	
	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: white;
		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: brown;
		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;
	}
	
	header .burger {
		display: none;
	}

	header .has-sub-nav {
		position: relative;
	}
	
	header .parent-nav {
		color: white;
		padding: 15px;
		display: block;
		transition: background 0.3s ease-in-out
	}
	
	header .sub-nav-list {
		border-radius: 15px 5px;
		background: darkgreen;
		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: white;
		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: white;
			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: white;
			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 30px 10px;
			background: tan;
			flex-direction: column;
			align-items: flex-start;
			width: 200px;
			position: fixed;
			top: 50px;
			right: -200px;
			padding-top: 0;
			transition: right 0.3s ease;
		}
		
		header .navlist.active {
			right: 0;
		}
		
		header .parent-nav:hover {
			background: brown;
		}
		
		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 .legal a, header .legal div {
			display: block;
		}
		
		header h1 {
			font-size: 24px;
		}

	}

	footer .foonav1 {
		justify-content: space-between;
		height: 90px;
	}
	
	footer .social-list img {
		border-radius: 15px 5px;
		background: darkgreen;
		transition: background 0.3s ease-in-out
	}

	footer .social-list a:hover {
		background: none;
	}

	footer .social-list a:hover img {
		background: brown;
	}

	main {
		background-color: #fff;
		margin: 10px;
	}
	
	main ul {
		list-style: square;
		margin: 0 0 0 1.5em
	}

	main ul.expand {
		list-style: none;
		display: block;
		margin: 0
	}

	main li {
		margin: .5em 0 0 .5em;
	}

	main li div.app {
	}

	main li div.apptitle {
		font-weight: bold;
		width: 100px;
	}

	main span {
		font-weight: bold;
		text-decoration: underline;
		cursor: pointer;
	}

	main h1 {
		margin: 0.83em 0 0 0;
	}
	
	main h2 {
		margin: 0.67em 0 0 0;
		font-weight: bold;
	}
	
	main h3 {
		margin: 0.51em 0 0 0;
	}
	
	main p {
		margin: 0.5em 0 0 0;
	}