@import url('https://fonts.googleapis.com/css2?family=Aubrey&familer=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@media screen and (max-width: 428px) {
	/* reset & global */
	.content{
		width: 100%;
		padding: 20px;
	}

	section {
		padding: 0px 10px;

	.clearfix{
		clear: none;
	}

	* {
		margin: 0;
		box-sizing: border-box;
	} 

	/*typography*/

	h1{
		font-size: 30px;
	}

	h3{
		font-size: 16px;
	}

	/* header */

	header{
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		max-width: 100%;
		height: 100px;
		background-color: #0b9e2e;
		text-align: center;
	}

	#logo img {
		height: 70px;
		margin-left: 50px;
	}

	nav {
		margin: 10px auto;
	}

	nav ul {
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
		padding: 0;
		display: flex;
		justify-content: center;
		gap: 12px;
	}

	nav ul li {
		float: none;
		margin: 10px 0 0;
		padding: 5px;
		width: 50%;
		list-style: none;
		margin: 0;
		text-align: center;
	}

	nav ul li a{
		font-family: sans-serif;
		color: #ffffff;
		text-transform: uppercase;
		text-decoration: none;
		font-size: 10px;
	} 

	/* homepage */

	.intro{
		font-family: sans-serif;
		margin-top: 25px;
		text-align: center;
	}

	.cta{
		justify-content: center;
		font-family: sans-serif;
		margin: auto;
		padding: 10px;
		max-height: 50px;
		max-width: 200px;
		margin-top: 30px;
		margin-bottom: 20px;
		background-color: #0b9e2e;
		border-radius: 5px;
		text-align: center;
	}

	.cta a{
		color: #ffffff;
		font-size: 22px;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
	}

	.scrollmenu {
		margin: auto;
		margin-top: 30px;
		max-width: 1200px;
	  	overflow: auto;
	  	white-space: nowrap;
	  	border-style: solid;
	  	border-color: #000000;
	  	border-width: 10px;
	  	background-color: #000000;
	}

	.locationimg {
	  	display: inline-block;
	  	max-width: 1200px;
		max-height: 562.5px;
	}

	footer {
		display: flex;
		padding: 10px;
		margin-top: 50px;
		width: 100%;
		height: 100px;
		background-color: #0b9e2e;
		font-family: sans-serif;
		color: ffffff;
		justify-content: space-evenly;
		align-items: center;
	}

	/*navigation*/

	.navigation{
		font-family: sans-serif;
		margin-top: 25px;
		text-align: center;
	}

	.locationinfo{
		display: flex;
		flex-direction: row;
	}

	.locationmap{
		display: inline-block;
	  	max-width: 1000px;
		max-height: 250px;
		overflow: auto;
	}

	.dropdownmenu{
		margin-top: 37.5px;
		font-family: sans-serif;
		justify-items: center;
	}

	/*account*/

	.accountlogin{
		margin: auto;
		margin-top: 50px;
		width: 500px;
		height: 500px;
		background-color: #0b9e2e;
		font-family: sans-serif;
		color: #ffffff;
	}

	.accountdetails{
		justify-content: center;
	}

	label {display: block;}

	input[type=text], select {
	  width: 75%;
	  padding: 12px;
	  margin: 8px 0;
	  display: inline-block;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;
	}