* {
  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;
  --main-text-color-light: #4b5563;
  --main-text-color-dark: #d1d5db;
  --shadowColor: #a1a2a3d2;
  --body-color: var(--secondary-body-color-light);
  --text-color: var(--main-text-color-light);
  --link-color: #6b7280;
}
body {
  background-color: var(--main-body-color-light);
}
button#theme-btn {
  background-color: var(--main-color-light);
  color: #f8fbff;
  box-shadow: 0 3px 5px var(--shadowColor);
}
#navbar {
  background-color: var(--pure-white);
  box-shadow: 0 3px 6px var(--shadowColor);
}
ul#navList li a {
  color: var(--link-color);
}
ul#navList a:hover {
  background-color: #f3f4f6;
}
#profileCardSection {
  background-color: var(--pure-white);
  box-shadow: 0 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: 0 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 #fff0;
}
.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: 0 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: #43ee21;
}
#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: 0 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);
}
.footer-text{
    color:var(--main-text-color-light);
    font-weight: 600;
}
#dynamicTimeText {
  color: var(--main-text-color-light);
}
@media screen and (max-width: 320px) {
  #navbar {
    box-shadow: 0 -3px 6px var(--shadowColor) !important;
  }
}
@media screen and (min-width: 321px) and (max-width: 425px) {
  #navbar {
    box-shadow: 0 -3px 6px var(--shadowColor) !important;
  }
  .cardDescription {
    border-top: 2px solid var(--shadowColor);
  }
}