@media (max-width:1400px) {
	.hero-container img {
		width: 1000px;
		top: -100px;
		left: 0px;
	}
}

@media (max-width:1000px) {
	.hero-container img {
		left: -50px;
		top: -110px;
	}
}

@media (max-width: 820px) {
	:root {
		--nav-height: 4rem;
	}

	#mobile-menu {
		display: flex;
		align-items: center;
		color: var(--link-color);
		font-size: 2rem;
		margin: 0 15px;
		cursor: pointer;
		height: 100%;
	}

	/*   #mobile-menu:hover + #navbar,
    #navbar:hover, */
	#navbar.active {
		display: flex;
	}

	#title {
		padding: 0;
	}

	nav {
		position: fixed;
		padding: var(--nav-padding);
		box-sizing: border-box;
	}

	#navbar {
		display: none;
		position: absolute;
		flex-direction: column;
		border: var(--nav-border-width) solid var(--main-color-3);
		border-width: 0 0 var(--nav-border-width) var(--nav-border-width);
		top: calc(var(--nav-height) + 1px);
		right: 0;
		background: rgba(var(--ends-background-color--rgb), 0.98);
		font-size: 1.2rem;
		z-index: 5;
	}

	#navbar li {
		margin: 0;
		padding: 0;
		width: 100%;
		text-align: center;
	}

	#navbar a {
		display: block;
		padding: 0.75rem;
	}
	
	#navbar .donate-button {
		border:3px solid var(--ends-background-color);
	}

	#color-scheme-container {
		margin: 0.75em auto;
	}

	.hero-container .hero-darken {
		display: none;
	}

	.hero-text-container {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 2;
		background: var(--ends-background-color);
	}

	.hero-container h1 {
		font-size: 1.5em;
		text-align: center;
	}

	.hero-container .hero-text {
		position: static;
		width: 100%;
		padding: 0.5rem 1rem;
		text-align: center;
	}

	.hero-container img {
		width: 800px;
		left: 0;
		top: -80px;
	}

	.grid-row,
	.grid-row:nth-child(2n) {
		flex-direction: column-reverse;
	}

	.grid-row.image-first {
		flex-direction: column;
	}

	.grid-item {
		width: 100%;
	}

}