/*
body {
    font-family: "Source Code Pro", monospace;
    font-optical-sizing: auto;
    font-style: normal;
    margin: 0;
    padding: 0;
    background: #0D1117;
    color: #C9D1D9;
}
.title span{
        display: inline-flex;
    align-items: center;
  }
.title a,
.title a:link,
.title a:visited,
.title a:hover,
.title a:active {
  color: inherit;
  text-decoration: none;
}
.title p {
        margin: 0px;
}
.title img {
    width: 75px;
    height: auto;
    margin: 0 8px;
  }
header {
    background: #30363D;
        color: #FFFFFF;
    padding: 20px;
}
header h1 {
    margin: 0;
}
nav {
    margin-top: 10px;
}
nav a {
    color: #fff;
    margin: 0 10px;
    text-decoration: none;
}
section {
    padding: 40px;
    max-width: 900px;
    margin: auto;
}
h2 {
    border-bottom: 2px solid #30363D;
    padding-bottom: 10px;
}
.skill_tiles {
        display:flex;
        gap: 20px;
}
.skill_tile {
        padding: 15px;
        border-radius: 8px;
  border-color: #C75136;
  border-width: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skill_tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px #A5D6FF;
}
.projects {
  display: flex;
  gap: 20px;
}

.project {
  background: #F78166;
  padding: 15px;
  border-radius: 8px;
  border-color: #C75136;
  border-width: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.project h3 {
  margin-bottom: 10px;
  color: #333;
  font-size: 25px;
}

.project p {
  color: #555;
  font-weight: bold;
}

.project a {
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  color: #0077cc;
  font-weight: bold;
  transition: color 0.3s ease;
}

.project:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px #A5D6FF;
}

.project:hover a {
  color: #005fa3;
}

.project-buttons {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn {
  padding: 10px 18px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn {
  background: #0077cc;
  color: #fff;
}

.btn span{
        display: inline-flex;
    align-items: center;
  }
  
.btn img {
        padding-right: 10px;
}

.btn:hover {
  background: #005fa3;
  transform: scale(1.05);
}
footer {
    background: #222;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}
/*New code below*/
body {
  font-family: "Source Code Pro", monospace;
  margin: 0;
  padding: 0;
  background: #0D1117;
  color: #C9D1D9;
}

/* Header */
header {
  background: #161B22;
  color: #FFFFFF;
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.title {
  display: flex;
}

.title span {
  display: inline-flex;
  align-items: center;
}

.title a,
.title a:link,
.title a:visited,
.title a:hover,
.title a:active {
  color: inherit;
  text-decoration: none;
}

.title p {
  margin: 0px;
}

.title img {
  width: 75px;
  height: auto;
  margin: 0 8px;
}

nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: 18px;
}

@media (max-width: 450px) {
  .header {
    flex-wrap: wrap;
  }
  nav {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    margin-top: 12px;
  }
  .theme-dropdown {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
  }
}

nav a {
  color: #58A6FF;
  margin-left: 20px;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #F78166;
}

/* Sections */
section {
  padding: 40px;
  max-width: 1000px;
  margin: auto;
}

h2 {
  border-bottom: 2px solid #30363D;
  padding-bottom: 10px;
  color: #58A6FF;
}

/* Skills */
.skill_tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

.skill_tile {
  background: #21262D;
  color: #C9D1D9;
  width: 280px;
  min-height: 220px;
  /* ensures a minimum size */
  padding: 15px;
  border-radius: 8px;
  border: 2px solid #58A6FF;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1 1 280px;
  box-sizing: border-box;
  /* prevents overflow */
}

.skill_tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px #58A6FF;
}

.skill_tile h3 {
  margin-top: 0;
  color: #F78166;
}

*/

/* Skills */
.skill_tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

.skill_tile {
  background: #21262D;
  color: #C9D1D9;
  width: 280px;
  min-height: 220px;
  padding: 15px;
  border-radius: 8px;
  border: 2px solid #58A6FF;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1 1 280px;
  box-sizing: border-box;
}

.skill_tile:hover {
  transform: translateY(-5px);
}

.skill_tile h3 {
  margin-top: 0;
  color: #F78166;
}

/* Projects */
.projects {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

.project {
  background: #21262D;
  color: #C9D1D9;
  width: 280px;
  min-height: 220px;
  padding: 15px;
  border-radius: 8px;
  border: 2px solid #58A6FF;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1 1 280px;
  box-sizing: border-box;
  text-align: center;
}

.project:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px #58A6FF;
}

.project h3 {
  margin-bottom: 10px;
  color: #F78166;
  font-size: 22px;
}

.project p {
  font-size: 14px;
  color: #C9D1D9;
}

.project a {
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  color: #58A6FF;
  font-weight: bold;
  transition: color 0.3s ease;
}

.project a:hover {
  color: #F78166;
}

.project-buttons {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn {
  padding: 10px 18px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  background: #0077cc;
  color: #fff;
}

.btn span {
  display: inline-flex;
  align-items: center;
}

.btn img {
  padding-right: 10px;
}

.btn:hover {
  background: #005fa3;
  transform: scale(1.05);
}

footer {
  background: #161B22;
  color: #8B949E;
  padding: 20px;
  margin-top: 40px;
  text-align: center;
  border-top: 1px solid #30363D;
}

/* Theme dropdown */

.theme-dropdown {
  position: relative;
  margin-right: 14px;
  flex-shrink: 0;
  user-select: none;
  cursor: pointer;
}

.theme-dd-selected {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: #0D1117;
  color: #C9D1D9;
  border: 1.5px solid #58A6FF;
  border-radius: 999px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.theme-dropdown:hover .theme-dd-selected,
.theme-dropdown:focus .theme-dd-selected {
  border-color: #F78166;
  outline: none;
}

.theme-dd-arrow {
  font-size: 11px;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.theme-dropdown.open .theme-dd-arrow {
  transform: rotate(180deg);
}

.theme-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #161B22;
  border: 1.5px solid #58A6FF;
  border-radius: 14px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  min-width: 140px;
  z-index: 200;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.theme-dropdown.open .theme-dd-menu {
  display: block;
}

.theme-dd-menu li {
  padding: 9px 18px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
  color: #C9D1D9;
}

.theme-dd-menu li:hover {
  background: #21262D;
}

.theme-dd-menu li.active {
  font-weight: 700;
  color: #58A6FF;
}

/* Light mode */
body.light-mode .theme-dd-selected {
  background: #F6F8FA;
  color: #24292F;
  border-color: #0969DA;
}

body.light-mode .theme-dropdown:hover .theme-dd-selected,
body.light-mode .theme-dropdown:focus .theme-dd-selected {
  border-color: #CF222E;
}

body.light-mode .theme-dd-menu {
  background: #FFFFFF;
  border-color: #0969DA;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

body.light-mode .theme-dd-menu li {
  color: #24292F;
}

body.light-mode .theme-dd-menu li:hover {
  background: #EAF2FF;
}

body.light-mode .theme-dd-menu li.active {
  color: #0969DA;
}

/* =====================
   Light mode overrides
   ===================== */
body.light-mode {
  background: #F6F8FA;
  color: #24292F;
}

body.light-mode header {
  background: #FFFFFF;
  color: #24292F;
  border-bottom: 1px solid #D0D7DE;
}

body.light-mode nav a {
  color: #0969DA;
}

body.light-mode nav a:hover {
  color: #CF222E;
}

body.light-mode .theme-btn {
  border-color: #0969DA;
}

body.light-mode .theme-btn:hover {
  border-color: #CF222E;
}

body.light-mode h2 {
  color: #0969DA;
  border-bottom-color: #D0D7DE;
}

body.light-mode .skill_tile {
  background: #FFFFFF;
  color: #24292F;
  border-color: #0969DA;
}

body.light-mode .skill_tile:hover {
  /* no shadow */
}

body.light-mode .skill_tile h3 {
  color: #CF222E;
}

body.light-mode .project {
  background: #FFFFFF;
  color: #24292F;
  border-color: #0969DA;
}

body.light-mode .project:hover {
  box-shadow: 0 8px 20px rgba(9, 105, 218, 0.35);
}

body.light-mode .project h3 {
  color: #CF222E;
}

body.light-mode .project p {
  color: #24292F;
}

body.light-mode .project a {
  color: #0969DA;
}

body.light-mode .project a:hover {
  color: #CF222E;
}

body.light-mode .btn {
  background: #0969DA;
}

body.light-mode .btn:hover {
  background: #0550AE;
}

body.light-mode footer {
  background: #FFFFFF;
  color: #57606A;
  border-top-color: #D0D7DE;
}

body.light-mode .contact-card {
  color: #24292F;
}

body.light-mode .contact-card:hover {
  transform: translateY(-5px);
}

body.light-mode .contact-label {
  color: #CF222E;
}

body.light-mode .contact-value {
  color: #57606A;
}

/* Contact */
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.contact-card {
  padding: 15px;
  text-decoration: none;
  color: #C9D1D9;
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
}

.contact-card img {
        padding-bottom: 10px;
}

.contact-label {
  font-size: 26px;
  font-weight: 700;
  color: #F78166;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.contact-value {
  font-size: 15px;
  color: #8B949E;
  word-break: break-all;
}