.text-h-dark-gray {
    color: #2b2d42 !important;
  }

  .text-h-red {
    color: #d90429 !important;
  }

  .text-h-gray {
    color: #8d99ae !important;
  }

  .text-h-light-gray {
    color: #edf2f4 !important;
  }

  .text-h-pink {
    color: #ef233c !important;
  }

  .text-s-gray {
    color: #50514f !important;
  }

  .text-s-red {
    color: #f25f5c !important;
  }

  .text-s-yellow {
    color: #ffe066 !important;
  }

  .text-s-blue {
    color: #247ba0 !important;
  }

  .text-s-green {
    color: #70c1b3 !important;
  }

  .bg-h-dark-gray {
    background-color: #2b2d42 !important;
  }

  .bg-h-red {
    background-color: #d90429 !important;
  }

  .bg-h-gray {
    background-color: #8d99ae !important;
  }

  .bg-h-light-gray {
    background-color: #edf2f4 !important;
  }

  .bg-h-pink {
    background-color: #ef233c !important;
  }

  .bg-s-gray {
    background-color: #50514f !important;
  }

  .bg-s-red {
    background-color: #f25f5c !important;
  }

  .bg-s-yellow {
    background-color: #ffe066 !important;
  }

  .bg-s-blue {
    background-color: #247ba0 !important;
  }

  .bg-s-green {
    background-color: #70c1b3 !important;
  }

  html,
  body {
    height: 100%;
    color: white;
    background-color: #222222;
    font-family: 'JetBrains Mono', monospace;
    text-align: left;
  }

  a,
  a:focus,
  a:hover {
    color: #ffffff;
    background-color: #d90429;
    text-decoration: none !important;
    display: inline-block;
    padding: 0.25em 0.5em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 1rem;
  }

  .links a {
    font-size: 1.1em;
    margin: 6px auto;
    width: 50px;
  }

  .links a.text-link {
    width: auto;
  }

  .toast {
    z-index: 10;
    position: fixed;
    width: 100%;
    bottom: 3%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .toast-body {
    text-align: center;
    background-color: #d90429;
    padding: 6px;
  }

  @media (max-width: 768px) {
    h1,
    p {
      text-align: center;
    }

    .links a {
      font-size: 1.2em;
      margin: 5px auto;
      width: 60px;
    }

    #my-picture {
      margin-top: 15px;
    }
  }

  @media print {
    html,
    body,
    h1,
    p {
      background-color: #ffffff;
      text-align: left;
    }

    .my-picture {
      width: 210px;
      border: 3px solid #000000;
    }

    a,
    a:focus,
    a:hover {
      color: #ffffff !important;
      background-color: #000000;
      text-decoration: none !important;
      display: inline-block;
      padding: 0.25em 0.5em;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: 1rem;
    }

    #resume {
      background: #ffffff;
      color: #000000;
    }

    .resume-content {
      margin-top: 30px;
      padding-top: 15px;
      border-top: 3px solid #000000;
    }

    .experience {
      margin-top: 30px;
    }
  }