/* control font attributes here */
:root {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: black;
	--colorA: #364483;
	--colorB: #1a253d;
	--colorBFaded: #2d3661;
	--colorC: #3d70c7;
	--colorCFaded: #3d70c77b;
	--colorD: #2664be;
	--colorE: #55f050;
	--colorEFaded: #55f05066;
	--colorJS: #f0db4f;
	--colorCSS: #2965f1;
	--colorHTML: #f06529;
	--colorNODE: #3c873a;
	--colorREACT: #00d8ff;
}
body {
	color: var(--colorD);
	background: linear-gradient(35deg, var(--colorB), 90%, var(--colorBFaded));
	background-attachment: fixed;
}
a,
a:hover {
	color: inherit;
	text-decoration: none;
}

ul,
li {
	list-style: none;
	color: inherit;
}

section p {
	text-align: justify;
}
a > i.fab,
a > i.fas {
	font-size: 2rem;
}
i.instagram-icon {
	color: #fac71e;
}
#jsList {
	background: transparent;
	color: var(--colorD);
}

.projectCard {
	/* background: linear-gradient(to right, var(--colorB), white); */
	color: var(--colorD);
	background-color: transparent;
	border: 1px solid var(--colorCFaded);
}
.projectLink {
	box-sizing: border-box;
	border: 4px solid transparent;
	/* box-sizing: border-box; */
	padding: 1rem;
	transition: border 0.25s ease-in, background-color 0.25s ease-in;
}
.projectLink:hover {
	border-bottom: 4px solid var(--colorB);
	border-left: 4px solid var(--colorB);
	border-top: 4px solid var(--colorBFaded);
	border-right: 4px solid var(--colorBFaded);
	background-color: rgba(255, 255, 255, 0.05);
}

ul#navList li {
	background-color: var(--colorB);
	color: var(--colorD);
	border: none;
}
ul#navList li:hover {
	cursor: pointer;
	/* background-color: var(--colorD); */
	color: var(--colorC);
}
.navbar {
	background-color: var(--colorA) !important;
}
.nav-link,
.nav-underline,
.navbar-nav {
	color: var(--colorE) !important;
}
ul.dropdown-menu,
.dropdown-item {
	background-color: var(--colorA);
	color: var(--colorE) !important;
}
.dropdown-item:hover {
	background-color: var(--colorC);
}
.htmlLogo {
	color: var(--colorHTML);
}
.cssLogo {
	color: var(--colorCSS);
}
.jsLogo {
	color: var(--colorJS);
}
.reactLogo {
	color: var(--colorREACT);
}
.nodeLogo {
	color: var(--colorNODE);
}
.fa-chatgpt {
	/* color: white; */
	background-image: url("./public/images/chat-gpt-logo.jpg");
}

@media (min-width: 768px) {
	#titleDiv {
		position: fixed;
	}
	#contentDiv {
		position: absolute;
		right: 0;
		border-left: 1px solid var(--colorD);
	}
}