@media only screen and (max-width: 1770px) {

  #aboutMeInfoContainer {
	grid-template-columns: auto auto !important;
	gap: 0 3.125rem !important;
	padding-left: 5em !important;
	padding-top: 4.5em !important;
  }
  #imageArea > img {
	width: 15em !important;
	height: 21em !important;
  }
  #portrait {
	width:unset !important;
  }
  #imageArea {
	width: 17em !important;
  }
}
@media only screen and (max-width: 1200px) {
	/* mainSection Stuff */
  #portrait {
	width: 100% !important;
	position: relative !important;
  }
  #imageArea {
	width: 100% !important;
  }
  #imageArea > img {
	width: 20em !important;
	height: 26em !important;
  }
  #aboutMeInfoContainer {
	grid-template-columns: auto !important; 
	grid-template-rows: auto !important;
	padding-top: 0em !important;
	padding-left: 2.5em !important;
	width: 80vw !important;
  } 
  #aboutMeSection {
	height: auto;
  }


  /* projects and socials stuff */
  #projectsSocialsSection {
	height: auto;
  }
  #ProjectsSection {
	width: 100vw !important;
  }
  #projectsText {
	margin-left: 0 !important;
	text-align: center;
  }
  #projectsContent {
	margin: 0 auto !important;
	width:90vw;
  }
}
@media only screen and (max-width: 655px) {
	br {
		display: none;
	}
	#portrait {
		margin-top: 2em !important;
	}
	#projects {
		grid-template-columns: repeat(auto-fill, 100%) !important;
	}
	#projectsSocialsSection {
		height: auto !important;
	}
	#siteFooter {
		height: auto !important;
	}
	#siteFooter > p {
		display: block !important;
	}
	#footerRightSide {
		position: static !important;
		display: block !important;
		margin-left: 1rem;
	}
	#projectsText {
		font-size: 3em;
	}

}
:root {
	--bg: #131317;
	--main: #edad30;
	--secondary: #0e0e11;
}
body {
	margin: 0;
	background-color: var(--bg);
}
p, h1, h2, li {
	color: #D7D9E4;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1, h2 {
	color: var(--main);
}
h1 {
	font-size: 6em;
}
h2 {
	font-weight: normal;
	font-size: 2.3rem;
	margin-bottom: 0;
}
p, li {
	font-size: 1.6em;
	margin-top: 0.5em;
}
a, a:visited {
	color:#3F80FF;
}
.italic {
	font-style: italic;
}
.hl {
	color: #FF6262;
}
.siteSection {
	height: 100vh;
	width: 100vw; 
	max-width: 100%; /* work around horziontal scrollbar bug*/
	overflow: hidden;
}
#aboutMeSection {
	min-height: 100vh;
	height: auto;
}
#portrait {
	/* background-color: skyblue; */
	width: 26vw;
	position: absolute;
	right:0;
	top:0;
	margin-top: 4.5em;
}
#imageArea {
	width: 25em;
	text-align: center;
}
#imageArea > img {
	width: 25em;
	height: 31em;
	object-fit:scale-down;
}
 #aboutMeInfoContainer {
	display: grid;
	/* grid-template-columns: repeat(auto-fill, 500px); */
	grid-template-columns: 31.25rem 31.25rem;
	/* grid-template-rows: 12.5rem 15.625rem; */
	width: 65vw;
	float:left;
	/* background-color: brown; */
	padding-left: 10em;
	padding-top: 4.5em;
	gap: 0 6.25rem;
}
#favProgramming {
	grid-row: auto / span 2;
}
#projectsSocialsSection {
	border-top: 3px solid black;
	min-height: 95vh;
	height: auto;
}
#ProjectsSection {
	width: 100vw;
	display: inline-block;
}
/* #ProjectsSection > * {
	margin-top: 3em;
	margin-left: 5em;
} */
#projectsContent {
	margin-left: 5em;
	padding-bottom: 3em;
}
#projectsNotice {
	/* background-color: #28b870; */
	/* width: 40vw; */
}
#projectsNotice > p {
	margin:0;
	font-size: 1.3em;
	padding-bottom: 1em;
}
#projectsText {
	margin: 0em;
	font-weight: normal;
	
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	/* text-align: center; */
	margin-left: 5rem;
}
#projects {
	display: grid;
	grid-template-columns: repeat(auto-fill, 26.7rem);
	gap: 1em;
}

.project {
	/* background-color: var(--secondary); */
	/* width: 26.7rem;*/
	min-height: 10rem;
	border: 3px solid black;
	position: relative;
}
#projKissMPServerlist {
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(21,21,43,1) 100%);
}
#projNoDistract {
	background: linear-gradient(90deg, rgb(21, 21, 43) 0%, rgb(2, 0, 36) 100%);
}
#projFAQ {
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(21,21,43,1) 100%);
}
.projectHeader {
	/* background-color: #5D2828; */
	border-bottom: 3px solid black;
}
.projectHeader > h2  {
	/* padding-top: 0.5em; */
	margin: 0.3em;
	font-size: 2em;
}
.projectIcon {
	width: 40px;
	height: 40px;
	float: left;
	margin-right: 10px;
}
.projectContent > * {
	margin: 0;
	padding: 0.5em;
	font-size: 0.95em;
}
/* to make a little extra place for the absolutely placed footer (if any) */
.projectContent {
	padding-bottom: 1.5em;
}
.projectFooter {
	position: absolute;
	bottom: 0;
	/* left:0; */
	/* margin: 15px; */
}

#siteFooter {
	background-color: var(--secondary);
	border-top: 3px solid black;
	height: 3.5rem;
	overflow: hidden;
	position: relative;
}
#siteFooter > p {
	margin: 0;
	line-height: 3.5rem;
	display: inline-block;
	margin-left: 1rem;
	font-size: 1.2em;
}
#footerRightSide {
	position: absolute;
	right:0;
	display: inline-block;
	margin-right: 1rem;
}
#footerRightSide > p {
	margin:0;
	line-height: 3.5rem;
	font-size: 1.2em;
}