@font-face {
        font-family: "GirlsAreWeird";
        src: 
          url("fonts/girlsareweird-webfont.woff2") format("woff2"),
          url("fonts/girlsareweird-webfont.woff") format("woff");
        font-weight: normal;
        font-style: normal;
      }

      body {
        font-family: "GirlsAreWeird", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin: 20px;
        background: #fff8f0;
      }

      h2 {
        margin-bottom: 10px;
      }

      .baking-blog {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
      }

      .blog-box {
        background: #fff3e6;
        padding: 15px;
        border-radius: 0;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
      }

      .blog-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
      }

      .overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 1000;
      }

      .popup {
        width: 400px;
        padding: 25px;
        border-radius: 15px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #222;
      }

      /* Individual popup styles */
      .popup.red-velvet { background: #7b1e2b; color: #fff; }
      .popup.thin-mints { background: linear-gradient(#1f4037, #99f2c8); color: #fff; }
      .popup.apple-meringue-pie { background: #f7e8d0; }
      .popup.tiramisu-brownies { background: #d2a679; color: #fff; }
      .popup.mom-banana-bread { background: #f3e5ab; }
      .popup.chicken-pot-pie { background: #f8d7a3; }
      .popup.challah { background: #f5deb3; }
      .popup.lemon-cookies { background: #fffacd; }
      .popup.pumpkin-whoopie-pies { background: #ffb347; color: #fff; }
      .popup.pumpkin-cinnamon-buns { background: #ffdead; }
      .popup.dad-cookies { background: #d3c0a1; }

      .popup button {
        margin-top: 20px;
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        background: #fff;
        font-family: "GirlsAreWeird", sans-serif;
      }

      .popup button:hover {
        background: #f0f0f0;
      }