/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  margin: 0;
  overflow: auto;
  color: #E6BE8A;
  background-color: #10121c;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  line-height: 1.5;
}

a {
  color: #ADD8E6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Starry Night Background */
.starry-night {
  width: 100%;
  min-height: 100%;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  overflow: hidden;
  position: relative;
}

.stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1744px 122px #FFF, 134px 1321px #FFF, 92px 859px #FFF, 235px 1045px #FFF, 366px 912px #FFF, 491px 942px #FFF, 14px 1831px #FFF, 582px 476px #FFF, 588px 1230px #FFF, 1520px 1343px #FFF, 1671px 203px #FFF, 550px 341px #FFF, 1491px 549px #FFF, 558px 161px #FFF, 896px 1823px #FFF, 999px 1463px #FFF, 1557px 636px #FFF, 1754px 1307px #FFF, 1682px 1494px #FFF, 703px 1707px #FFF, 1945px 1847px #FFF, 1151px 1320px #FFF, 980px 144px #FFF, 478px 948px #FFF, 109px 1762px #FFF, 558px 255px #FFF, 719px 1820px #FFF, 588px 748px #FFF, 1899px 174px #FFF, 841px 1771px #FFF, 571px 1588px #FFF, 1155px 353px #FFF, 1879px 1220px #FFF, 1782px 870px #FFF, 407px 1238px #FFF, 1141px 63px #FFF, 1147px 1097px #FFF, 1406px 159px #FFF, 637px 1215px #FFF, 694px 1114px #FFF, 1536px 727px #FFF, 1708px 1512px #FFF, 1147px 880px #FFF, 684px 988px #FFF, 140px 851px #FFF, 1565px 1788px #FFF, 1573px 889px #FFF, 1172px 628px #FFF, 1474px 1978px #FFF, 435px 447px #FFF, 185px 1808px #FFF, 445px 251px #FFF, 920px 1465px #FFF, 1285px 1736px #FFF, 779px 745px #FFF, 1440px 46px #FFF, 1754px 30px #FFF, 1273px 1237px #FFF, 1409px 1011px #FFF, 1658px 1777px #FFF, 366px 339px #FFF, 193px 292px #FFF, 1302px 51px #FFF, 1052px 224px #FFF, 1253px 386px #FFF, 1029px 1855px #FFF, 830px 1458px #FFF, 1580px 1946px #FFF, 936px 1818px #FFF, 1421px 566px #FFF, 1404px 1282px #FFF, 1131px 1580px #FFF, 524px 1933px #FFF, 1290px 1703px #FFF, 1261px 1697px #FFF, 1359px 914px #FFF, 1760px 1473px #FFF, 1180px 1044px #FFF, 1674px 1419px #FFF, 1944px 1695px #FFF, 1415px 1106px #FFF, 1785px 1434px #FFF, 384px 1715px #FFF, 1332px 264px #FFF, 1233px 1831px #FFF, 1422px 1568px #FFF, 1664px 1551px #FFF, 1894px 589px #FFF, 1987px 1305px #FFF, 1035px 1788px #FFF, 1261px 1775px #FFF, 1224px 590px #FFF, 1397px 1154px #FFF, 416px 1870px #FFF, 1742px 1508px #FFF, 1624px 1010px #FFF, 1320px 1313px #FFF, 1891px 1791px #FFF, 1745px 1415px #FFF, 1002px 1345px #FFF, 1549px 1248px #FFF, 510px 474px #FFF, 1416px 1325px #FFF;
  animation: animStar 100s linear infinite;
}

.stars::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1744px 122px #FFF, 134px 1321px #FFF, 92px 859px #FFF, 235px 1045px #FFF, 366px 912px #FFF, 491px 942px #FFF, 14px 1831px #FFF, 582px 476px #FFF, 588px 1230px #FFF, 1520px 1343px #FFF, 1671px 203px #FFF, 550px 341px #FFF, 1491px 549px #FFF, 558px 161px #FFF, 896px 1823px #FFF, 999px 1463px #FFF, 1557px 636px #FFF, 1754px 1307px #FFF, 1682px 1494px #FFF, 703px 1707px #FFF, 1945px 1847px #FFF, 1151px 1320px #FFF, 980px 144px #FFF, 478px 948px #FFF, 109px 1762px #FFF, 558px 255px #FFF, 719px 1820px #FFF, 588px 748px #FFF, 1899px 174px #FFF, 841px 1771px #FFF, 571px 1588px #FFF, 1155px 353px #FFF, 1879px 1220px #FFF, 1782px 870px #FFF, 407px 1238px #FFF, 1141px 63px #FFF, 1147px 1097px #FFF, 1406px 159px #FFF, 637px 1215px #FFF, 694px 1114px #FFF, 1536px 727px #FFF, 1708px 1512px #FFF, 1147px 880px #FFF, 684px 988px #FFF, 140px 851px #FFF, 1565px 1788px #FFF, 1573px 889px #FFF, 1172px 628px #FFF, 1474px 1978px #FFF, 435px 447px #FFF, 185px 1808px #FFF, 445px 251px #FFF, 920px 1465px #FFF, 1285px 1736px #FFF, 779px 745px #FFF, 1440px 46px #FFF, 1754px 30px #FFF, 1273px 1237px #FFF, 1409px 1011px #FFF, 1658px 1777px #FFF, 366px 339px #FFF, 193px 292px #FFF, 1302px 51px #FFF, 1052px 224px #FFF, 1253px 386px #FFF, 1029px 1855px #FFF, 830px 1458px #FFF, 1580px 1946px #FFF, 936px 1818px #FFF, 1421px 566px #FFF, 1404px 1282px #FFF, 1131px 1580px #FFF, 524px 1933px #FFF, 1290px 1703px #FFF, 1261px 1697px #FFF, 1359px 914px #FFF, 1760px 1473px #FFF, 1180px 1044px #FFF, 1674px 1419px #FFF, 1944px 1695px #FFF, 1415px 1106px #FFF, 1785px 1434px #FFF, 384px 1715px #FFF, 1332px 264px #FFF, 1233px 1831px #FFF, 1422px 1568px #FFF, 1664px 1551px #FFF, 1894px 589px #FFF, 1987px 1305px #FFF, 1035px 1788px #FFF, 1261px 1775px #FFF, 1224px 590px #FFF, 1397px 1154px #FFF, 416px 1870px #FFF, 1742px 1508px #FFF, 1624px 1010px #FFF, 1320px 1313px #FFF, 1891px 1791px #FFF, 1745px 1415px #FFF, 1002px 1345px #FFF, 1549px 1248px #FFF, 510px 474px #FFF, 1416px 1325px #FFF;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

/* Main Content Container */
.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 16px;
  gap: 32px;
}

/* Profile Image */
.profile-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
  border-radius: 10%;
}

/* Name Heading */
.name {
  font-family: 'Abril Fatface', cursive;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
}

/* Professional Links */
.links-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px;
  padding: 0 16px;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid white;
  border-radius: 4px;
  color: white;
  background: transparent;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  flex: 1;
  max-width: 140px;
  cursor: pointer;
}

.link-btn:hover {
  border-color: #E6BE8A;
  background-color: rgba(230, 190, 138, 0.04);
  box-shadow: 0 0 12px rgba(230, 190, 138, 0.6);
  transform: translateY(-1px);
  color: white;
  text-decoration: none;
}

.link-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Experience Timeline */
.experience {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 600px;
}

.experience-entry {
  display: flex;
  align-items: flex-start;
}

.experience-date {
  display: flex;
  flex-direction: column;
  min-width: 135px;
  margin-right: 16px;
  text-align: end;
  font-weight: bold;
  flex-shrink: 0;
}

.experience-desc {
  color: white;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .name {
    font-size: 2rem;
  }

  .link-btn {
    font-size: 0.8rem;
    max-width: 110px;
    padding: 6px 8px;
  }

  .links-row {
    gap: 8px;
  }

  .experience-date {
    min-width: 100px;
    font-size: 0.85rem;
  }

  .experience-desc {
    font-size: 0.9rem;
  }
}