/**
 * 000 - General
 * 001 - Start
 * 002 - About
 * 003 - Projects
 * 004 - Resume
 * 005 - Footer
**/

/* Color Palette - https://coolors.co/2b2d42-8d99ae-edf2f4-ef233c-d90429 */

/* 000 General */
:root {
  --space-cadet: #2b2d42;
  --manatee: #8d99ae;
  --cultured: #edf2f4;
  --imperial-red: #ef233c;
  --amaranth-red: #d90429;
}

html,
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--space-cadet);
  overflow-x: hidden;
}

.particles-container {
  position: relative;
  z-index: 9999;
}
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--space-cadet);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.bold {
  font-weight: bold;
}
.java-color {
  color: #f29111;
}
.python-color {
  color: #ffcd3a;
}
.js-color {
  color: #f5de19;
}
.react-color {
  color: #61dbfb;
}
.html-color {
  color: #e54c21;
}
.css-color {
  color: #264de4;
}
.salesforce-color {
  color: #009edb !important;
}
.amazon-color {
  color: #ff9900 !important;
}
.rutgers-color {
  color: #ff3366;
}
.vmc-color {
  color: #ffd100;
}
.git-color {
  color: #f1502f;
}
.node-color {
  color: #68a063;
}
.eclipse-color {
  color: #443583;
}
.intellij-color {
  color: #087cfa;
}
.threejs-color {
  color: #ffffff;
}

.gray-background {
  background-color: var(--space-cadet);
  filter: brightness(0.9);
}

.transparent-background {
  background-color: rgb(0, 0, 0, 0);
  box-shadow: none;
}

.reveal {
  opacity: 0;
  visibility: hidden;
  transition: transform 0s;
}

.tag {
  margin-top: 2px;
  margin-bottom: 2px;
  font-family: 'Inter', sans-serif;
}

/* 001 Start */
.hi {
  font-family: 'Inter', sans-serif;
  color: var(--imperial-red);
}
.name {
  font-family: 'Lato', sans-serif !important;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--manatee);
  filter: brightness(1.5);
}
.avatar {
  width: 192px;
  height: 192px;
  margin: auto;
  filter: opacity(0.8);
}
.round {
  border-radius: 50%;
  filter: drop-shadow(0 0 0.75rem #191d24);
}
.intro {
  font-size: 20px;
  color: var(--manatee);
  filter: brightness(1.5);
}
.intro-bold {
  font-size: 20px;
  color: var(--manatee);
  filter: brightness(1.05);
}
.icon-margin {
  margin: 16px 12px 16px 12px;
}
.fa-linkedin {
  color: var(--imperial-red);
  transition: all 0.5s;
}
.fa-linkedin:hover {
  color: var(--imperial-red);
  filter: brightness(5);
}
.fa-github {
  color: var(--imperial-red);
  transition: all 0.5s;
}
.fa-github:hover {
  color: var(--imperial-red);
  filter: brightness(5);
}
.fa-hands-helping {
  color: var(--imperial-red);
  transition: all 0.5s;
}
.fa-hands-helping:hover {
  color: var(--imperial-red);
  filter: brightness(5);
}

/* 002 About */
.main-title {
  font-size: 32px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--imperial-red);
}
.main-subtitle {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--manatee);
  filter: brightness(1.5);
}
.main-body {
  font-size: 18px;
  color: var(--manatee);
  filter: brightness(1.5);
}
.main-body-small {
  font-size: 14px;
}
.about-me-body {
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--manatee);
  filter: brightness(1.5);
}

.skills-container {
  text-align: center;
}
.languages {
  display: inline-block;
  text-align: left;
}
.software {
  display: inline-block;
  text-align: right;
}

.skills-item {
  padding-top: 5px;
  padding-bottom: 5px;
}
.timeline-icon {
  margin-top: 5px;
  margin-bottom: 5px;
}
.timeline-text-heading-left {
  color: #9e9e9e;
  text-align: left;
}
.timeline-text-heading-right {
  color: #9e9e9e;
  text-align: right;
  display: inline-block;
  vertical-align: middle;
}
.timeline-text-body-left {
  font-size: 16px;
  color: #fafafa;
  text-align: left;
}
.timeline-text-body-right {
  color: #fafafa;
  text-align: right;
}
.timeline-tags-left {
  text-align: left;
}
.timeline-tags-right {
  text-align: right;
}
.fa-code {
  margin: 20px;
  color: var(--imperial-red);
  transition: all 0.5s;
}
.fa-code:hover {
  color: var(--imperial-red);
  filter: brightness(5);
}

.fa-briefcase {
  margin: 20px;
  color: var(--imperial-red);
  transition: all 0.5s;
}
.fa-briefcase:hover {
  color: var(--imperial-red);
  filter: brightness(5);
}
.fa-project-diagram {
  margin: 20px;
  color: var(--imperial-red);
  transition: all 0.5s;
}
.fa-project-diagram:hover {
  color: var(--imperial-red);
  filter: brightness(5);
}

/* 003 Projects */


.project-title {
  font-weight: bold;
  color: var(--imperial-red);
  font-size: 32px;
  margin-bottom: 20px;
}
.project-subtitle {
  font-weight: bold;
  color: #fafafa;
  font-size: 20px;
  text-align: left;
  margin-bottom: 8px;
}
.project-links {
  text-align: right;
}
.project-meta {
  margin-bottom: 8px;
}
.project-body {
  text-align: left;
  color: #fafafa;
  font-size: 16px;
}
.moon {
  filter: invert(68%) sepia(41%) saturate(345%) hue-rotate(218deg)
    brightness(92%) contrast(86%);
}
.fa-external-link-square-alt {
  color: var(--imperial-red);
  transition: all 0.5s;
}
.fa-external-link-square-alt:hover {
  color: #f8bbd0;
}
.fa-mask-face {
  color: var(--imperial-red);
  margin-top: 12px;
  transition: all 0.5s;
}
.fa-mask-face:hover {
  color: #f8bbd0;
}
.fa-land-mine-on {
  color: var(--imperial-red);
  margin-top: 12px;
  transition: all 0.5s;
}
.fa-land-mine-on:hover {
  color: #f8bbd0;
}
.fa-train {
  color: var(--imperial-red);
  margin-top: 12px;
  transition: all 0.5s;
}
.fa-train:hover {
  color: #f8bbd0;
}
.fa-moon {
  color: var(--imperial-red);
  margin-top: 12px;
  transition: all 0.5s;
}
.fa-moon:hover {
  color: #f8bbd0;
}
.fa-dollar-sign {
  color: var(--imperial-red);
  margin-top: 12px;
  transition: all 0.5s;
}
.fa-dollar-sign:hover {
  color: #f8bbd0;
}
.fa-discord {
  color: var(--imperial-red);
  margin-top: 12px;
  transition: all 0.5s;
}
.fa-discord:hover {
  color: #f8bbd0;
}
.fa-home {
  color: var(--imperial-red);
  margin-top: 12px;
  transition: all 0.5s;
}
.fa-home:hover {
  color: #f8bbd0;
}
.invert {
  -webkit-filter: invert(1);
  filter: invert(1);
}

/* 004 Resume */
.resume-button {
  color: var(--imperial-red);
  background-color: var(--space-cadet);
  margin: 20px auto;
  display: block;
  width: 200px;
  transition: all 0.5s;
}
.resume-button:hover {
  background-color: var(--imperial-red);
  color: var(--cultured);
}
.li-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.LI-profile-badge {
  text-align: left;
}

/* 005 Footer */
.footer-text {
  color: #fafafa;
  font-size: 14px;
}
.footer-name {
  color: var(--imperial-red);
  font-size: 14px;
  font-weight: bold;
}



.co{
  display:flex;
  justify-content: center;
  align-items: center;
}
.contact-container {
  background:;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px  #fafafa(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
}

.contact-container h2 {
  text-align: center;
  margin-bottom: 20px;
  color:  #fafafa;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  color: #fafafa;
  margin-bottom: 5px;
}

.input-group input,
.input-group textarea {
  width: 100%;
  padding: 10px;
  color: #fafafa;
  background-color: #191d2437;
  border: 1px solid #221a26b9;
  border-radius: 6px;
  font-size: 1rem;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #ff3366;
  color: white;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background-color: #981d3b;
}

#responseMessage {
  margin-top: 15px;
  text-align: center;
  color: green;
  font-weight: bold;
}