:root{
	/*--prim: #242F40;*/
	--prim: #202937;
	--scnd: #9196A1;
	--tert: #FD9BD6;
	--quat: #FFFFFF;
	/*--quin: #FD9BD6;*/
	--quin: #16F3F3;
	--scrollbar-hover: #5D6471;
	--scrollbar-background: #000917;
}

#titleArea{
	width: 95vw;
	margin: 2.5vh;
	margin-left: auto;
	margin-right: auto;
	min-height: 50px;
	background: var(--scnd);
	padding: 1em;
	box-sizing: border-box;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	border-radius: 10px;
}

#subtitleArea{
	width: 98%;
	height: 50%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin: 1%;
	box-sizing: border-box;
	align-items: center;
}

#githubButton{
	width: 175px;
	height: 50px;
}

#githubButton img{
	filter: brightness(17.1) hue-rotate(217deg) saturation(26.4%);
}

#linkedInButton{
	width: 175px;
	height: 50px;
}

.contentArea{
	margin: 2.5vw;
	width: 95vw;
	margin-left: auto;
	margin-right: auto;
	max-width: 1250px;
	box-sizing: border-box;
	background: var(--scnd);
	border-radius: 10px;
	padding: 1em;
}

#quickLinks{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
}

.quick{
	/*width: 20%;*/
	background: var(--tert);
	height: 20%;
	margin: 1vw;
	border-radius: 20px;
	text-align: center;
	overflow: hidden;
	width: 185px;
}

body{
	padding: 0;
	margin: 0;
	background: var(--prim);
}

h1, h2{
	margin: 0;
	color: var(--prim);
	background: var(--tert);	
	border-radius: 10px;
	box-sizing: content-box;
	text-align: center;
}

h1{	
	width: 50%;
	margin: 0.5%;
	margin-left: 25%;
	font-size: 4em;
}

h2{
	padding: 4px;
}

h3{
	background-color: var(--tert);
	color: var(--prim);
	display: inline-block;
	padding: 0.5em;
	box-sizing: content-box;
	border-radius: 10px;
}

h4{
	color: var(--prim);
}

p{
	color: black;
	font-size: 15pt;
	border-radius: 10px;
	padding: 1em;
}

a{
	background: var(--tert);
	border-radius: 10px;
	color: var(--prim);
	box-shadow: 4px 4px 6px var(--prim);
}

#titleArea a img{
	margin-top: 5px;
	height: 40px;
	width: auto;
}

.quick img{
	width: 100%;
}

html{
	font-family: monospace;
}

a:hover{
	/*filter: invert(1);*/
	background: var(--quin);
}

/* width */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	background-color: var(--scrollbar-background);	
}

/* Handle */
::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: var(--scnd);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-hover);
}

@media only screen and (max-width: 900px){
	#title{
		width: 100%;
		margin-left: 0;
	}

	#subtitle{
		width: auto;
	}

	#githubButton{
		width: 50px
	}

	#linkedInButton{
		width: 50px;
	}
}