:root {
         --bg-color-light: #fdf6e3;
         --text-color-light: #657b83;
         --heading-color-light: #586e75;
         --link-color-light: #268bd2;
         --border-color-light: #eee8d5;

         --bg-color-dark: #002b36;
         --text-color-dark: #839496;
         --heading-color-dark: #93a1a1;
         --link-color-dark: #2aa198;
         --border-color-dark: #073642;
      }

      body {
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 100vh;
         margin: 0;
         font-family: 'Menlo', 'Monaco', 'Consolas', "Courier New", monospace;
         transition: background-color 0.3s, color 0.3s;
      }

      body.light-theme {
         background-color: var(--bg-color-light);
         color: var(--text-color-light);
      }

      body.dark-theme {
         background-color: var(--bg-color-dark);
         color: var(--text-color-dark);
      }

      .container {
         max-width: 800px;
         text-align: center;
         padding: 2rem;
         border-radius: 0.5rem;
         border: 1px solid;
      }

      .light-theme .container {
         border-color: var(--border-color-light);
      }

      .dark-theme .container {
         border-color: var(--border-color-dark);
      }

      h1 {
         font-size: 2.5rem;
         margin-bottom: 1rem;
         min-height: 6rem;
         display: flex;
         align-items: center;
         justify-content: center;
      }

      .light-theme h1 {
         color: var(--heading-color-light);
      }

      .dark-theme h1 {
         color: var(--heading-color-dark);
      }

      .lead {
         font-size: 1.25rem;
         margin-bottom: 2rem;
      }

      .skills-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         gap: 0.5rem;
         margin-bottom: 2rem;
         text-align: left;
      }

      .skills-grid span {
         padding: 0.5rem;
         border-radius: 0.25rem;
      }

      .light-theme .skills-grid span {
         background-color: var(--border-color-light);
      }

      .dark-theme .skills-grid span {
         background-color: var(--border-color-dark);
      }

      .contact-links a {
         margin: 0 1rem;
         font-size: 1.25rem;
         text-decoration: none;
      }

      .light-theme .contact-links a {
         color: var(--link-color-light);
      }

      .dark-theme .contact-links a {
         color: var(--link-color-dark);
      }

      .theme-switcher {
         position: absolute;
         top: 1rem;
         right: 1rem;
      }