* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  transition: 0.5s;
}
:root {
  --pure-white: #fff;
  --main-body-color-light: #f9fafb;
  --secondary-body-color-light: #f6faff;
  --main-body-color-dark: #111827;
  --secondary-body-color-dark: #1f2937;
  --main-color-light: #4d9bff;
  --secondary-color-light: ;
  --main-text-color-light: #4b5563;
  --main-text-color-dark: #d1d5db;
  --shadowColor: #a1a2a3d2;
  --link-color: #6b7280;
}
body {
  background-color: var(--main-body-color-light);
}
/* NAVAGATION SECTION */
button#theme-btn {
  background-color: var(--main-color-light);
  color: #f8fbff;
  box-shadow: 0px 3px 5px var(--shadowColor);
}
#navbar {
  background-color: var(--pure-white);
  box-shadow: 0px 3px 6px var(--shadowColor);
}

ul#navList li a {
  color: var(--link-color);
}
ul#navList a:hover {
  background-color: rgb(243 244 246);
}

/* PROFILE CARD SECTION */
#profileCardSection {
  background-color: var(--pure-white);
  box-shadow: 0px 3px 5px var(--shadowColor);
}
#profileCardHead {
  background-color: #8cbfff;
}
#profileImage {
  border: var(--pure-white) 3px solid;
  background-color: var(--main-body-color-light);
}
#myName {
  color: var(--secondary-body-color-dark);
}
.profile-text-alt {
  color: var(--main-color-light);
}
.profile-text {
  color: var(--main-text-color-light);
}

.social-btn {
  background-color: #f3f4f6;
  color: var(--main-text-color-light);
}
.social-btn:hover {
  background-color: var(--main-color-light);
  color: var(--pure-white);
}
.social-btn:active {
  background-color: var(--main-color-light) !important;
  color: var(--pure-white) !important;
}
.download-resume-btn {
  background-color: var(--main-color-light);
  color: var(--pure-white);
}
.download-resume-btn:hover {
  background-color: #7db4fc;
  color: var(--pure-white);
}
.download-resume-btn:active {
  background-color: #7db4fc !important;
  color: var(--pure-white) !important;
}

.contactLinkBtn {
  border: thin solid var(--main-color-light);
  color: var(--main-color-light);
}
.contactLinkBtn:hover {
  background-color: #7db4fc56;
  color: var(--main-color-light);
  border: thin solid var(--main-color-light) !important;
}
.contactLinkBtn:active {
  background-color: #7db4fc56 !important;
  color: var(--main-color-light) !important;
  border: thin solid var(--main-color-light);
}
#mainSection {
  background-color: var(--pure-white);
  box-shadow: 0px 3px 5px var(--shadowColor);
}

#mainSection::-webkit-scrollbar-track,
#text-area::-webkit-scrollbar-track {
  background-color: #f3f4f6;
}
#mainSection::-webkit-scrollbar-thumb,
#text-area::-webkit-scrollbar-thumb {
  background-color: var(--main-color-light) !important;
  border: 2px solid transparent;
}
.header_alt {
  color: var(--main-color-light);
}
.main-section-txt {
  color: var(--main-text-color-light);
}

.subhero-icon {
  color: var(--main-color-light);
  background-color: #e5f1ff;
}
.subhero {
  background-color: #f6faff;
  color: var(--secondary-body-color-dark);
}
.subsectionHeroParagraph {
  color: var(--main-text-color-light);
}

#lineSkillSection {
  background-color: #f6faff;
}
.skillLineHtml,
.skillLineCss {
  background-color: #e5e7eb;
}
.skillLineHtml::before {
  background-color: var(--main-color-light);
}

.skillLineCss::before {
  background-color: var(--main-color-light);
}

.line-icon {
  color: var(--main-color-light);
  background-color: #e5f1ff;
}

.skillLineText,
.card-text,
.barText {
  color: var(--secondary-body-color-dark);
}

.skillCard {
  background-color: #f6faff;
}
.card-icon {
  color: var(--main-color-light);
}
.card-text-percentage,
.bar-percentage {
  color: var(--main-color-light);
}

#uiUX,
#seo {
  background-color: #f6faff;
}
.bar-icon {
  color: var(--main-color-light);
  background-color: #e5f1ff;
}

.roadmap-icon {
  background-color: #dbebff81;
  border: var(--main-color-light) 3px solid;
  color: var(--main-color-light);
}

.roadmap::after {
  background-color: #c9e1ff !important;
}

.educationBar,
.experienceBar {
  background-color: #f6faff;
}
.educationBar:hover,
.experienceBar:hover {
  box-shadow: 0px 2px 5px var(--shadowColor);
}
.badge-roadmap,
.projectBadge {
  background-color: #e5f1ff;
  color: var(--main-color-light);
}
.barSectionHeader {
  color: #2d333b;
}
.barSectionText {
  color: var(--main-text-color-light);
}
.cardContainer {
  box-shadow: 0 4px 4px var(--shadowColor);
}
.cardHead {
  background-color: #eaeaea;
}
.cardDescription {
  color: var(--pure-white);
}
.cardBody {
  background-color: var(--pure-white);
}
.projectTitle {
  color: var(--main-color-light);
}
.badge-projects {
  background-color: #f3f4f6;
  color: var(--main-text-color-light);
}
.btn-description-code {
  background-color: var(--link-color);
  color: var(--pure-white);
}
.btn-description-code:focus,.btn-description-code:active{
  background-color: var(--link-color) !important;
  color: var(--pure-white) !important;
}
.btn-description-demo {
  background-color: var(--main-color-light);
  color: var(--pure-white);
}
.btn-description-demo:active , .btn-description-demo:focus{
  background-color: var(--main-color-light) !important;
  color: var(--pure-white) !important;
}
.btn-description-demo:hover {
  background-color: #4a8ee6;
  color: var(--pure-white);
}
.btn-description-code:hover {
  background-color: #5a5f69;
  color: var(--pure-white);
}
.cardContainer:hover .cardDescription {
  background-color: #201e1ec0;
}
.contactHeader {
  color: var(--main-text-color-light);
}
.myid {
  color: var(--main-text-color-light);
}
.contact-icon {
  color: var(--main-color-light);
  background-color: #e5f1ff;
}
.active-icon {
  background-color: rgb(67, 238, 33);
}
#availability {
  border: thin solid var(--main-color-light);
  background-color: #e5f1ff;
}
.formHeader {
  color: var(--main-text-color-light);
}
#contactForm {
  background-color: var(--pure-white);
  box-shadow: 0px 2px 4px var(--shadowColor);
  color: var(--main-text-color-light);
}
.btn-submit-contact {
  background-color: var(--main-color-light);
  color: var(--pure-white);
}
.form-control {
  background-color: var(--pure-white);
}
.btn-submit-contact:hover {
  background-color: #3a84e6;
  color: var(--pure-white);
}
@media screen and (max-width: 320px) {
  #navbar {box-shadow: 0px -3px 6px var(--shadowColor) !important;}
}
@media screen and (min-width: 321px) and (max-width: 425px) {
  #navbar {box-shadow: 0px -3px 6px var(--shadowColor) !important;}
  .cardDescription {
    border-top: 2px solid var(--shadowColor);
  }
}
@media screen and (min-width: 426px) and (max-width: 1024px) {
}