html {
	background-color: RGB(36, 36, 36);
	color: white;
	line-height: 150%;
	margin: 0px 25% 0px 25%;
}

.highlight {
	color: RGB(251, 119, 44);
}

svg {
	color :"white";
}

.home-subsection {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.project-subsection{
	border: 0.5px solid white;
	padding: 32px;
}

.project-subsection:hover{
	border: 0.1px solid RGB(251, 119, 44);
}

.main-container {
	display: flex;
	flex-direction: column;
	font-family: "Menlo", "Consolas", "Courier New", "monospace";
	font-weight: 100;
}

.nav-container {
	font-size: 16px;
	margin-bottom: 32px;
}

.nav-list{
	display: flex;
	gap: 16px;
	padding:0px;
	flex-direction: row;
	font-weight: bold;
}

.active{
	text-decoration: underline;
}

a {
	text-decoration: none;
	color:white;
}

#home {
	display: flex;
	flex-direction: column;
}

.content:target ~ #home{
	display: none;
}

.content {
	display: none;
}

.content:target{
	display: flex;
}

.home-container {
	display:flex;
	flex-direction: column;
}

.project-container {
	flex-direction: column;
	gap: 16px;
	justify-content: start;
}

.project-heading {
	font-size: 2rem;
	margin: 0px;
	text-decoration: underline;
}

.heading-container {
	display: flex;
	flex-direction: column;
}

.project-title-section {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	font-size: 1.3rem;
	margin-bottom:8px;
}

.heading {
	font-size: 3.75rem; 
	margin: 0px;
}

p.handle {
	color: rgb(148 163 184);
	margin: 0px;
}

.description{
	font-size: 1rem;
	margin:0px;
}

.project-description{
	font-size: 1rem;
	margin:0px;
}

.logo-container {
	display: flex;
	margin-top: 16px;
	gap: 16px;
}

.logo {
	width: 16px;
	height: 16px;
}
.project-title-section .logo {
	width: 24px;
	height: 24px;
}

@media (max-width: 319px){

	html{
		margin: 0px 5% 0px 5%;
	}

	.project-subsection{
		padding: 8px;
	}

	.main-container {
		display: flex;
		flex-direction: column;
		font-family: monospace; 
	}

	.home-container {
		display:flex;
		flex-direction: column;
		justify-content: center;
	}

	.description{
		margin:0px;
		font-size: 1rem;

	}

	.project-container {
		height: auto;
		flex-direction: column;
		gap: 16px;
		justify-content: start;
	}

	.nav-container {
		font-size: 18px;
	}

	.nav-list{
		display: flex;
		gap: 16px;
		flex-direction: row;
		font-weight: bold;
	}

	#home {
		display: flex;
		gap:1px;
		height: auto;
		flex-direction: column;
		justify-content: center;
	}

}

@media (min-width: 320px) and (max-width: 766px){

	html{
		margin: 0px 5% 0px 5%;
	}

	.project-subsection{
		padding: 16px;
	}

	.main-container {
		display: flex;
		flex-direction: column;
		font-family: monospace; 
	}

	.home-container {
		display:flex;
		flex-direction: column;
		justify-content: center;
	}

	.description{
		margin:0px;
		font-size: 1rem; 

	}

	.project-container {
		height: auto;
		flex-direction: column;
		gap: 16px;
		justify-content: start;
	}

	.nav-container {
		font-size: 18px;
	}

	.nav-list{
		display: flex;
		gap: 16px;
		font-weight: bold;
		flex-direction: row;
	}

	#home {
		display: flex;
		gap:1px;
		height: auto;
		flex-direction: column;
		justify-content: center;
	}

}

@media (min-width: 768px) and (max-width: 1023px){

	html{
		margin: 0px 15% 0px 15%;
	}

	.main-container {
		display: flex;
		flex-direction: column;
		font-family: monospace; 
	}

	.home-container {
		display:flex;
		height: auto;
		flex-direction: column;
		justify-content: center;
	}

	.description{
		margin:0px;
		font-size: 1rem; /* 72px */
	}

	.project-container {
		height: auto;
		flex-direction: column;
		gap: 16px;
		justify-content: start;
	}

	.nav-container {
		font-size: 18px;
	}

	.nav-list{
		display: flex;
		gap: 16px;
		flex-direction: row;
		font-weight: bold;
	}

	#home {
		display: flex;
		height: auto;
		flex-direction: column;
		justify-content: center;
	}

}

@media (min-width: 1024px) and (max-width: 1280px){
	html{
		margin: 0px 15% 0px 15%;
	}

	.main-container {
		display: flex;
		flex-direction: column;
		font-family: monospace; 
	}

	.home-container {
		display:flex;
		height: auto;
		flex-direction: column;
		justify-content: center;
	}

	.heading{
		font-size: 5rem; 
	}

	.project-container {
		height: auto;
		flex-direction: column;
		gap: 16px;
		justify-content: start;
	}

	.nav-container {
		font-size: 18px;
	}

	.nav-list{
		display: flex;
		gap: 16px;
		flex-direction: row;
		font-weight: bold;
	}

	#home {
		display: flex;
		height: auto;
		flex-direction: column;
		justify-content: center;
	}

	.description{
		margin:0px;
		font-size: 1rem; /* 72px */
	}
}

nav ul {
	list-style-type: none;
}