@media screen and (max-width: 900px) {
	#page-links {
		flex-direction: column;
	}

	#page-links>h3 {
		margin-bottom: -2%;
	}
}

@media screen and (max-width: 600px) {
	#logo>h1 {
		font-size: 18px;
	}

	#page-links>h3 {
		font-size: 14px;
	}

	nav>#acc-links {
		width: 5em;
	}

	#acc-links>a>#linkedin-img {
		width: 1.8em;
		height: auto;
		padding: .01em;
		margin-left: .3em;
	}

	#acc-links>a>#github-img {
		width: 1.5em;
		height: auto;
		padding: .15em;
	}

	#acc-links>a>#github-img:hover,
	#acc-links>a>#linkedin-img:hover {
		animation: none;
		background-color: var(--bg-color);
		border: none;
		border-radius: 0%;
	}

	main>#content {
		margin-top: 15%;
		font-size: 12px;
	}
}

* {
	--bg-color: #012852;
	--secondary-color: #fc9744;
	--text-color: #FFF;
}



@keyframes anchorhover {
	from {
		background-color: var(--bg-color);
		color: var(--secondary-color);
	}

	to {
		background-color: var(--text-color);
		color: var(--bg-color);
	}
}

@keyframes logohover {
	from {
		text-decoration: none;
	}

	to {
		text-decoration: var(--text-color) underline;
	}
}

@keyframes acchover {
	from {
		background-color: var(--bg-color);
	}

	to {
		background-color: var(--secondary-color);
		border-radius: 40%;
	}
}

body {
	display: flex;
	justify-content: center;
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: serif;
}

main {
	width: 65vw;
	min-width: 350px;
}

a {
	color: var(--secondary-color);
	text-decoration: none;

}

h3>a {
	padding: .1em;
}

h1>a:hover {
	text-decoration: var(--text-color) underline;
	animation: logohover 200ms;
}

h3>a:hover {
	border-radius: 4%;
	animation: anchorhover 200ms;
	background-color: var(--text-color);
	color: var(--bg-color);
}

#acc-links>a:hover {
	background-color: var(--secondary-color);
	border-radius: 40%;
	animation: acchover 200ms;
}


nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#logo,
#page-links,
#acc-links {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

#logo {
	width: 25%;
	font-size: 1.25rem;
}

#page-links {
	width: 40%;
}


#acc-links {
	width: 9em;
}

#linkedin-img {
	width: 2.4em;
	height: auto;
	padding: .01em;
}

#github-img {
	width: 2.1em;
	height: auto;
	padding: .15em;
}

#content {
	margin-top: 10%;
	margin-left: 20%;
	width: 70%;
}

.content-paragraph {
	margin-bottom: 3%;
}