* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  :root {
      --highlight-color: goldenrod;
      --transition-speed-cv: 0.7s;
  }

  body {
      background: #121212;
      color: #e0e0e0;
      font-family: 'Fira Mono', monospace;
      line-height: 1.6;
      padding: 20px;
  }

  .container {
      max-width: 1000px;
      margin: 0 auto;
  }

  .hero {
      text-align: center;
      margin-bottom: 50px;
  }

  .hero .heading {
      font-size: 2.5em;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-align: center;
      width: 100%;
      margin-bottom: 10px;
      display: inline-block;
  }

  .cursor {
      display: inline-block;
      color: #e0e0e0;
      animation: blink-caret 0.75s step-end infinite;
  }

  @keyframes blink-caret {

      from,
      to {
          opacity: 0;
      }

      50% {
          opacity: 1;
      }
  }

  .typed-text {
      color: var(--highlight-color);
  }

  /* On mobile, allow the heading to wrap if needed */
  @media (max-width: 600px) {
      .hero .heading {
          font-size: 1.8em;
          white-space: normal;
      }
  }

  .special {
      color: var(--highlight-color);
      font-weight: bolder;
      animation: pulse 1s infinite alternate;
  }


  section h1 {
      text-align: center;
      margin-bottom: 30px;
  }

  .skills-container {
      display: flex;
      justify-content: space-evenly;
      gap: 2rem;
      margin-bottom: 30px;
  }

  .skills-container h1 {
      margin-bottom: 0px;
      color: var(--highlight-color);
  }

  .experience h1 {
      text-align: start;
      margin-bottom: 0px;
  }

  .experience:hover h1 {
      color: var(--highlight-color);
  }

  .experience:hover div:last-of-type {
      max-height: 200px;
      opacity: 1;
      padding-top: 0.5em;
  }

  .experience div:last-of-type {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      padding-top: 0;
      transition:
          max-height var(--transition-speed-cv) ease,
          opacity var(--transition-speed-cv) ease,
          padding var(--transition-speed-cv) ease;
  }

  .experience ul {
      padding-top: 2px;
  }

  @media (max-width: 600px) {
      .skills-container {
          flex-direction: column;
          align-items: center;
      }

      .experience div:last-of-type {
          max-height: 200px;
          opacity: 1;
          padding-top: 0.5em;
      }
  }

  .card-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      margin-bottom: 30px;
  }

  .card {
      background: #272727;
      border: 1px solid #333;
      border-radius: 4px;
      padding: 20px;
      flex: 1 1 280px;
      display: flex;
      flex-direction: column;
      max-width: 300px;
  }

  .max-width {
      max-width: 100%;
  }

  .card-header {
      font-weight: lighter;
      margin-bottom: 10px;
      font-size: 1.2em;
  }

  .card p {
      font-size: 0.95em;
      line-height: 1.4;
      margin: 0;
  }

  .card p:last-of-type {
      font-style: italic;
      color: var(--highlight-color);
      margin-bottom: 10px;
  }

  div a {
      display: inline-flex;
      align-items: center;
      color: #e0e0e0;
      border: 1px solid #e0e0e0;
      padding: 5px 10px;
      border-radius: 4px;
      text-decoration: none;
      font-size: 1em;
  }

  div a:hover {
      color: var(--highlight-color);
  }


  .pdf-container {
      margin-top: auto;
      align-self: flex-end;
  }

  .pdf-container a {
      margin-right: auto;
      margin-top: 20px;
  }

  .underlined-div {
      border-bottom: 2px solid var(--highlight-color);
      padding-bottom: 10px;
  }