* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
          "Noto Color Emoji";
        background: #1e1f25 url("./noise-bg.png");
        color: white;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        color: rgb(229 229 229);
      }
      main {
        padding: 2rem;
      }
      h1 {
        line-height: 1;
        font-weight: 700;
        font-size: 2.25rem;
      }
      h2 {
        font-size: 1.8rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 0.5rem;
      }
      h3 {
        font-size: 1.5rem;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
      }
      h4 {
          font-size: 1.2rem;
          margin-top: 1rem;
          margin-bottom: 0.5rem;
          color: #a0aec0;
      }
      p, ul {
        line-height: 1.6;
        color: rgb(143 143 143);
      }
      a {
        color: #63b3ed;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      .header {
        text-align: left;
        padding-bottom: 2rem;
      }
      .header p {
        font-size: 1.25rem;
        margin-top: 0.5rem;
      }
      .social-links {
        margin: 0;
        padding: 0;
      }
      .social-links a {
        margin: 0;
        margin-right: 1rem;
        font-size: 1.25rem;
      }
      .section {
        margin-bottom: 2rem;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1rem;
      }
      .card {
        background-color: rgba(255, 255, 255, 0.05);
        padding: 1.5rem;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 1rem;
      }
      .skills-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
      }
      .skills-card {
        background-color: rgba(255, 255, 255, 0.05);
        padding: 1.5rem;
        border-radius: 8px;
      }
      .skills-card h4 {
          color: white;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          padding-bottom: 0.5rem;
          margin-top: 0;
      }
      .skills-card ul {
          list-style: none;
          padding: 0;
          margin-top: 1rem;
      }
      .skills-card ul li {
          margin-bottom: 0.5rem;
      }
      .tag {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        background-color: #2d3748;
        color: #e2e8f0;
        font-size: 0.75rem;
        font-weight: 700;
        border-radius: 4px;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
      }
      .link-button {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background-color: #111827;
        color: #48bb78;
        text-decoration: none;
        border-radius: 4px;
        margin-bottom: 1rem;
        margin-right: 0.5rem;
      }

      #experience ul, #achievements ul {
        list-style: none;
        padding: 0;
      }

      #experience ul li::before, #achievements ul li::before {
        content: "-";
        margin-right: 0.5rem;
      }

      @media (min-width: 768px) {
        body {
          max-width: 768px;
          margin: 0 auto;
        }
      }
      @media (min-width: 1024px) {
        body {
          max-width: 1024px;
          margin: 0 auto;
        }
      }
      @media (min-width: 1280px) {
        body {
          max-width: 1280px;
        }
      }
      #back-to-top {
        visibility: hidden;
        opacity: 0;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 99;
        border: none;
        outline: none;
        background-color: rgba(45, 55, 72, 0.5);
        color: #e2e8f0;
        cursor: pointer;
        padding: 15px;
        border-radius: 10px;
        font-size: 18px;
        transition: opacity 0.4s, visibility 0.4s, background-color 0.3s;
      }
      #back-to-top:hover {
        background-color: rgba(45, 55, 72, 0.8);
      }