@media (max-width: 900px) {
	.project > div {
		flex-wrap: wrap;
	}

	.project p {
		max-width: 100%;
		margin-top: 1em;
		margin-left: 0;
	}
}

@media (max-width: 600px) {
	.main-container {
	    position: relative;
	    top: 0vh;
	    flex-wrap: wrap;
	    margin-bottom: 2em;
	}

	.logo h1 {
		position: fixed;
		width: 100%;
		z-index: 99999;
	}

	.logo h2 {
	    margin-top: 74px;
	}

	nav {
		position: relative;
		width: 100%;
		height: auto;
		z-index: 9999;
	}

	nav ul.social {
		position: fixed;
		bottom: 0;
	}

	#readmode {
		bottom: 2.7em;
		top: unset;
		width: 100%;
	}

	.main-section {
		margin: 0;
		padding: 0 25px;
		padding-bottom: 2.5em;
	}

	@keyframes main-section-opens {
		0% {
		  	left: 0px; /* start just off screen */
		}
		100% {
		  	left: 100vw; /* move out of screen to the right */
		}
	}

	.loader {
	    left: 0px;
	}

	.david-avatar {
		display: none;
	}

	.mobile {
		display: unset;
	}

	.david-avatar.mobile {
		position: relative;
		display: flex !important;
		margin-bottom: 1.5rem;
	}
	.david-avatar.mobile::after {
		content: "";
		width: 200vw;
		display: block;
		height: 100%;
		position: absolute;
		background: #222;
		top: 0;
		left: -100vw;
		z-index: -1;
	}
}