could you help recode this html file? I like everything but the blue hover effect and changes everything bluish. I would prefer to add a shadow around each article item when hover over.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Artistry Journal - Article List</title>

  <!-- Bootstrap 5.3 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <!-- Bootstrap Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display&display=swap" rel="stylesheet" />

  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      background: #fff;
      color: #222;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      margin: 0;
      padding: 0;
    }

    h1, h2, h3, h4, h5 {
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      color: #111;
      margin-bottom: 0.5rem;
      transition: color 0.3s ease;
    }

    a:hover, a:focus {
      text-decoration: none;
      color: #0d6efd;
      outline: none;
    }

    header {
      padding: 3rem 1rem 2rem;
      text-align: center;
      border-bottom: 1px solid #eee;
      max-width: 720px;
      margin: 0 auto;
    }

    header h1 {
      font-size: 3rem;
      line-height: 1.1;
      margin-bottom: 0.3rem;
    }

    header p.lead {
      color: #666;
      font-size: 1.15rem;
      font-weight: 300;
    }

    main.container {
      max-width: 720px;
      margin: 3rem auto 5rem;
      padding: 0 1rem;
    }

    .article-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 2.8rem;
    }

    .article-item {
      display: flex;
      gap: 2rem;
      box-shadow: 0 1px 6px rgb(0 0 0 / 0.1);
      background: #fff;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
      align-items: center;
    }

    .article-item:last-child {
      margin-bottom: 0;
    }

    .article-item:focus-visible,
    .article-item:hover {
      background-color: #f9fbff;
      outline: none;
    }

    /* Remove border-radius from cards */
    .article-image-wrapper, .article-image {
      border-radius: 0 !important;
    }

    .article-image-wrapper {
      flex-shrink: 0;
      width: 180px;
      overflow: hidden;
      background: #f9f9f9;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 1px #ddd;
      transition: box-shadow 0.3s ease;
    }
    .article-item:hover .article-image-wrapper,
    .article-item:focus-visible .article-image-wrapper {
      box-shadow: 0 6px 20px rgb(13 110 253 / 0.3);
    }

    .article-image {
      width: 100%;
      height: 180px;
      object-fit: cover;
      display: block;
      filter: grayscale(8%);
      transition: transform 0.3s ease, filter 0.3s ease;
    }
    .article-item:hover .article-image,
    .article-item:focus-visible .article-image {
      transform: scale(1.06);
      filter: grayscale(0%);
    }

    .article-content {
      flex-grow: 1;
      padding: 1.6rem 1.6rem 1.6rem 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
      transition: color 0.3s ease;
    }

    .article-item:hover .article-content {
      color: #0d6efd;
    }

    .article-categories {
      margin-bottom: 0.75rem;
    }

    .badge {
      font-weight: 600;
      font-size: 0.72rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      padding: 0.25em 0.6em;
      border-radius: 0; /* sharp edges */
      margin-right: 0.5rem;
      user-select: none;
      color: #fff;
      background-color: #0d6efd;
      opacity: 0.75;
      transition: opacity 0.3s ease, background-color 0.3s ease;
      display: inline-block;
    }
    /* Variation for second badge in examples */
    .article-item:nth-child(odd) .badge:nth-child(2) {
      background-color: #198754;
    }
    .article-item:nth-child(even) .badge:nth-child(2) {
      background-color: #ffc107;
      color: #212529;
    }
    .article-item:hover .badge,
    .article-item:focus-visible .badge {
      opacity: 1;
    }

    h2.article-title {
      font-size: 1.7rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      margin-top: 0;
      margin-bottom: 0.5rem;
      transition: color 0.3s ease;
      color: inherit;
      overflow-wrap: break-word;
      cursor: pointer;
    }
    .article-item:hover h2.article-title,
    .article-item:focus-visible h2.article-title {
      color: #0d6efd;
    }

    p.article-excerpt {
      font-size: 1.05rem;
      color: #444;
      margin-bottom: 1.3rem;
      line-height: 1.5;
      transition: color 0.3s ease;
    }
    .article-item:hover p.article-excerpt,
    .article-item:focus-visible p.article-excerpt {
      color: #0d6efd;
    }

    .btn-read-more {
      padding-left: 1.4rem;
      padding-right: 1.4rem;
      font-weight: 600;
      border-radius: 0;
      font-size: 1rem;
      align-self: start;
      transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
      border-width: 2px;
      border-style: solid;
      border-color: #0d6efd;
      background-color: transparent;
      color: #0d6efd;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }

    .btn-read-more:hover,
    .btn-read-more:focus {
      background-color: #0d6efd;
      color: white;
      outline: none;
      box-shadow: 0 0 15px rgb(13 110 253 / 0.6);
      text-decoration: none;
    }

    .btn-read-more i {
      transition: transform 0.3s ease;
      margin-left: 0.4rem;
    }
    .btn-read-more:hover i,
    .btn-read-more:focus i {
      transform: translateX(4px);
    }

    /* Responsive: stack image on top for small mobile */
    @media (max-width: 575.98px) {
      .article-item {
        flex-direction: column;
        gap: 1.3rem;
      }

      .article-image-wrapper {
        width: 100%;
        height: 240px;
      }

      .article-image {
        height: 100%;
      }

      .article-content {
        padding: 0;
      }

      .btn-read-more {
        align-self: stretch;
        justify-content: center;
        text-align: center;
      }
    }
  </style>
</head>

<body>
  <header>
    <h1>Artistry Journal</h1>
    <p class="lead">Insights and stories from the world of contemporary fine art</p>
  </header>

  <main class="container" role="main" aria-label="List of articles">
    <ul class="article-list">

      <li class="article-item" role="article" tabindex="0" aria-labelledby="title1" aria-describedby="desc1">
        <div class="article-image-wrapper">
          <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80"
            alt="Abstract modern art installation" class="article-image" loading="lazy" />
        </div>
        <div class="article-content">
          <div>
            <h2 id="title1" class="article-title">The Digital Art Revolution</h2>
            <div class="article-categories" aria-label="Category tags">
              <span class="badge">Technology</span>
              <span class="badge">Art</span>
            </div>
            <p id="desc1" class="article-excerpt">
              Digital art is reshaping the gallery experience with AI-generated and immersive VR exhibits that blend technology and tradition,
              captivating a new generation of enthusiasts and collectors.
            </p>
          </div>
          <a href="articles/digital-art-revolution.html" class="btn btn-read-more" aria-label="Read more about The Digital Art Revolution">
            Read More <i class="bi bi-arrow-right"></i>
          </a>
        </div>
      </li>

      <li class="article-item" role="article" tabindex="0" aria-labelledby="title2" aria-describedby="desc2">
        <div class="article-image-wrapper">
          <img src="https://images.unsplash.com/photo-1515377905703-c4788e51af15?auto=format&fit=crop&w=400&q=80"
            alt="Woman using VR headset in gallery" class="article-image" loading="lazy" />
        </div>
        <div class="article-content">
          <div>
            <h2 id="title2" class="article-title">Virtual Gallery Tours</h2>
            <div class="article-categories" aria-label="Category tags">
              <span class="badge">Innovation</span>
              <span class="badge">Experience</span>
            </div>
            <p id="desc2" class="article-excerpt">
              Step inside galleries virtually with tours using augmented and virtual reality, expanding access globally and creating unforgettable art experiences.
            </p>
          </div>
          <a href="articles/virtual-gallery-tours.html" class="btn btn-read-more" aria-label="Read more about Virtual Gallery Tours">
            Read More <i class="bi bi-arrow-right"></i>
          </a>
        </div>
      </li>

      <li class="article-item" role="article" tabindex="0" aria-labelledby="title3" aria-describedby="desc3">
        <div class="article-image-wrapper">
          <img src="https://images.unsplash.com/photo-1522770179533-24471fcdba45?auto=format&fit=crop&w=400&q=80"
            alt="Artist working on a painting" class="article-image" loading="lazy" />
        </div>
        <div class="article-content">
          <div>
            <h2 id="title3" class="article-title">Artist Profiles: Innovators of 2024</h2>
            <div class="article-categories" aria-label="Category tags">
              <span class="badge">Spotlight</span>
              <span class="badge">Artists</span>
            </div>
            <p id="desc3" class="article-excerpt">
              Meet the creative visionaries shaping modern art in 2024 with groundbreaking techniques, cultural fusion, and boundary-pushing ideas.
            </p>
          </div>
          <a href="articles/artist-profiles.html" class="btn btn-read-more" aria-label="Read more about Artist Profiles: Innovators of 2024">
            Read More <i class="bi bi-arrow-right"></i>
          </a>
        </div>
      </li>

    </ul>
  </main>

  <footer class="text-center text-muted py-4 border-top" style="font-size: 0.9rem;">
    &copy; 2024 Artistry Journal. All rights reserved.
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>