/* ===============================
   Reset CSS for Cross-Browser Consistency
   =============================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Readex Pro", sans-serif; /* Fallback font */
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

header {
  display: block;
  unicode-bidi: isolate;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}

footer {
  display: block;
  unicode-bidi: isolate;
}

address {
  display: block;
  font-style: normal; /* Reset default font style of address element */
  unicode-bidi: isolate;
}

div {
  display: block;
  unicode-bidi: isolate;
}

h1 {
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  unicode-bidi: isolate;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  unicode-bidi: isolate;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  unicode-bidi: isolate;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}

strong {
  font-weight: bold;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
  unicode-bidi: isolate;
}

a:-webkit-any-link {
  cursor: pointer;
  text-decoration: none;
}

/* ===============================
   Top-Level Documentation for Digital Resume Website
   =============================== */
/*
  ===================================================
  CSS for Digital Resume Website
  ===================================================
  - Font: Readex Pro (Google Fonts)
  - External Libraries: Bootstrap, TailwindCSS
  - Sections: Global Styles, Layouts, Components, Media Queries
  ===================================================
*/

/* ==========================
   Root Variables (Color Palette)
   ========================== */
:root {
  color-scheme: dark light;
  --mainTextColor: #131415;
  --secondaryTextColor: #adb0b1;
  --mainLinkColor: rgb(30, 190, 214);
  --mainBorderColor: #2b3031;
  --mainBgColor: #fff;

  --color-scrollbar-thumb: #1ebed6;
  --color-scrollbar-thumb-alt: #38cce3;
  --color-scrollbar-track: #464f51;
  --color-shadow: #2b3031;

  --shadow-profile-pic: 0 1px 1px var(--color-shadow),
    0 2px 2px var(--color-shadow), 0 4px 4px var(--color-shadow),
    0 8px 8px var(--color-shadow), 0 16px 16px var(--color-shadow);
}

@media (prefers-color-scheme: dark) {
  :root {
    --mainTextColor: #fff;
    --secondaryTextColor: #adb0b1;
    --mainLinkColor: rgb(30, 190, 214);
    --mainBorderColor: #2b3031;
    --mainBgColor: #131415;
  }
  ::selection {
    background-color: var(--mainLinkColor);
    color: var(--mainBgColor);
  }
}

::selection {
  background-color: var(--mainBgColor);
  color: var(--mainTextColor);
}

/* ==========================
   Global Styles (Universal Styling)
   ========================== */
* {
  line-height: 1.5em;
  color: var(--mainTextColor);
}

body {
  background-color: var(--mainBgColor);
  max-width: 43.75rem;
  margin: 0 auto;
  padding: 1em;
}

/* ==========================
   Layout (Header, Footer, Sections)
   ========================== */
header {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 4em;
  padding-block: 1em 0;
}

.user-name {
  font-size: 3rem;
  line-height: 0.25em;
}

.profile-pic {
  width: 9.375rem;
  height: 9.375rem;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow-profile-pic);
}

/* ==========================
   Text Styles (Headings, Paragraphs, Links)
   ========================== */
p,
span,
time,
li {
  color: var(--secondaryTextColor);
  font-size: 1em;
}

li {
  line-height: 1.9em;
}

a {
  color: var(--mainLinkColor);
  font-weight: 500;
  text-decoration: none;
}

section {
  /* Socials Section */
  &:nth-of-type(1) {
    padding-block: 1em;
  }
}

/* Noscript Styles */
.noscript {
  width: 100%;
  background-color: var(--color-scrollbar-thumb);
  color: var(--mainBgColor);
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.noscript div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1rem;
}

.noscript h3 {
  font-size: larger;
  color: #131415;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}

.noscript p {
  font-size: xx-small;
  color: #131415;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

/* ==========================
   Scrollbar Styles
   ========================== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

*::-webkit-scrollbar-track {
  border-radius: 5px;
  border: 1px solid var(--mainBgColor-dark);
  background-color: var(--color-scrollbar-track);
}

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

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

*::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: var(--color-scrollbar-thumb);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scrollbar-thumb-alt);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--color-scrollbar-thumb-alt);
}

.email {
  color: var(--mainTextColor);
  & > a::before {
    content: "\2709  ";
  }
  /* Media query nested here due to pseudo-selector usage  */
  /* @media (max-width: 300px) {
    & > a::before {
      content: none;
    }
  } */
}

/* ==========================
   Socials, Qualifications, and Tech Stack Sections
   ========================== */

/* Social Links */
.socials--list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  row-gap: 1em;
}

.socials--list > a {
  font-weight: 300;
  color: var(--secondaryTextColor);
  font-size: 0.9em;
  transition: 0.3s;
}

.socials--list > a:hover {
  font-weight: 300;
  color: var(--mainLinkColor);
  font-size: 0.9em;
}

/* Qualifications Section */
.qualifications--list {
  padding-left: 3rem;
}

.qualifications--list > li {
  padding: 0 0 0.5rem 0.5rem;
}

.qualifications--list > li::marker {
  content: "\2714 ";
  color: #1ebed6;
  font-size: 1.2em;
  padding-right: 0.5rem;
}

/* Tech Stack Section */
.wrapper--techstack__items {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  font-size: 0.9em;
  padding-bottom: 2rem;
}

.card--techstack,
.card--projects {
  border: 1px solid var(--mainBorderColor);
  border-radius: 5px;
  padding: 1em;
  align-items: center;
}

span.card--heading {
  font-weight: bold;
  font-size: 1rem;
}

/* Project Card Styles */
.card--project {
  padding-top: 1em;
  padding-bottom: 1em;
  border-top: 1px solid var(--mainBorderColor);
}

.card--project > a {
  color: var(--mainTextColor);
  transition: 0.3s;
}

.card--project > a:hover {
  color: rgb(30, 190, 214);
}

/* ==========================
   Work History Section
   ========================== */

/* Work History Section */
.card--work-history {
  border-left: 1px solid var(--mainBorderColor);
  margin-top: 3em;
  margin-bottom: 3em;
  padding-left: 2em;
}

/* ==========================
   Footer Section
   ========================== */

/* Footer Section */
footer {
  text-align: center;
  border-top: 2px solid var(--secondaryTextColor);
}

/* ==========================
   Line Breaks (Used in Various Sections)
   ========================== */

/* Line Break Styles */
.line-break {
  background-color: var(--mainBorderColor);
  height: 1px;
}

/* ==========================
   Media Queries for Responsiveness
   ========================== */

/* Devices smaller than 768px */
@media (max-width: 768px) {
  header {
    gap: 1em;
    justify-content: space-around;
    padding-block: 2em 1em;
  }

  body {
    width: 80dvw;
  }

  address {
    text-align: start;
  }

  .user-name {
    font-size: 2.125rem;
    line-height: 1em;
    text-align: start;
  }

  .profile-pic {
    width: 10rem;
    height: 10rem;
  }

  .card--work-history {
    margin-top: 1em;
    border-left: none;
    padding-left: 0;
  }
}

/* Devices smaller than 640px */
@media (max-width: 640px) {
  header {
    flex-direction: column;
  }

  .user-name {
    font-size: 1.75rem;
    line-height: 1em;
    text-align: center;
  }

  /* .profile-pic {
    width: 10rem;
    height: 10rem;
  } */
}

/* Devices smaller than 460px */
@media (max-width: 460px) {
  section:nth-of-type(1) {
    padding-block: 0 1em;
  }

  strong {
    font-size: 0.875em;
  }

  .socials--list {
    flex-direction: column;
  }

  .card--work-history > ul {
    padding-left: 1rem;
  }
}

/* Devices smaller than 420px */
@media (max-width: 420px) {
  header {
    padding-bottom: 0;
  }

  section:first-of-type {
    padding-block: 0.5em;
  }
}

/* Devices smaller than 400px */
@media (max-width: 400px) {
  h2 {
    font-size: 1.375em;
  }

  .bio,
  .email {
    font-size: 0.85em;
  }

  .qualifications--list {
    padding: 1rem;
  }
}

/* Devices smaller than 360px */
@media (max-width: 360px) {
  h2 {
    font-size: 1.125rem;
  }

  .user-name {
    font-size: 1.5rem;
  }
}

/* Devices smaller than 300px */
@media (max-width: 300px) {
  h2 {
    font-size: 0.95rem;
  }

  section {
    padding-block: 0.5em;
  }

  footer > p {
    font-size: 0.95em;
  }

  .user-name {
    font-size: 1.25rem;
  }

  .email > a::before {
    content: none;
  }

  .qualifications--list {
    padding: 0 0 0 1rem;
  }
}