a{
  color: inherit;
  text-decoration: none;
}
@font-face {
      font-family: "onepunk";
      src: url("https://file.garden/Z79xk6Elunno9B45/fonts/1%20Punk.ttf") format("truetype");
}
@font-face {
      font-family: "stencil";
      src: url("https://file.garden/Z79xk6Elunno9B45/calzine/AllertaStencil-Regular.ttf") format("truetype");
}
@font-face {
      font-family: "typewriter";
      src: url("https://file.garden/Z79xk6Elunno9B45/fonts/Punk%20Typewriter.otf") format("opentype");
}
@font-face {
      font-family: "rat";
      src: url("https://file.garden/Z79xk6Elunno9B45/fonts/Black%20Rat%20Punk%20Band.ttf") format("opentype");
}
h1, h2, h3, h4, h5, h6 {
  font-family: "rat";
}
p{
  font-family: "stencil"; 
}


          
          
          
          
          
    body {
      background-image: url('https://file.garden/Z79xk6Elunno9B45/calzine/793.GIF');
      color: #92ca57; /* Primary text color; modify for text visibility */
      font-family: stencil; 
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0;
      padding: 20px;
      padding-top: 80px;
      padding-bottom: 60px;
      min-height: 100vh;
      box-sizing: border-box;
    }

    .floating-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: rgba(60, 20, 2, 0.9); /* Header background; adjust color/opacity for header style */
      border-bottom: 1px dashed #e96f1b; /* Header border; change for accent color */
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Shadow; modify for depth effect */
    }

    .floating-header .header-content {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .floating-header h1 {
      margin: 0;
      font-size: clamp(1.2em, 4vw, 1.5em);
      color: white; /* Header text color; change to match theme */
    }

    .floating-header img {
      height: 30px; /* Logo size; adjust for larger/smaller logo */
    }

    .floating-header .slogan {
      font-style: italic;
      font-size: clamp(0.8em, 3vw, 0.9em);
      text-align: center;
      margin: 0 10px;
      color: #ca9a57; /* Slogan text color; modify for contrast */
    }

    .floating-header .controls {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .hamburger {
      display: none;
      background: none;
      border: none;
      color: #ca9a57; /* Hamburger menu color; change for visibility */
      font-size: 1.5em;
      cursor: pointer;
      padding: 5px 10px;
    }

    .true-footer {
      background-color: rgba(60, 20, 2, 0.9); /* Footer background; adjust color/opacity */
      border-top: 1px dashed #e96f1b; /* Footer border; change for accent color */
      padding: 10px;
      text-align: center;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: clamp(0.8em, 2.5vw, 0.9em);
      color: #ca9a57; /* Footer text color; modify for readability */
    }

    .true-footer a {
      margin: 0 10px;
      color: #e96f1b; /* Footer link color; change for accent */
    }

    select, button {
      padding: 8px 12px;
      background-color: #3c1402; /* Control background; adjust for button/select style */
      color: #ca9a57; /* Control text color; modify for contrast */
      border: 1px solid #e96f1b; /* Control border; change for accent color */
      border-radius: 4px; /* Border radius; adjust for sharper/rounder edges */
      font-family: inherit;
      cursor: pointer;
      font-size: clamp(0.8em, 2.5vw, 0.9em);
    }

    button {
      background-color: #e96f1b; /* Button background; primary accent color */
      transition: background-color 0.3s;
      color: #312b24; /* Button text color; adjust for readability */
    }

    button:hover {
      background-color: #ca9a57; /* Button hover; change for hover effect */
    }

    .zines-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); /* Grid size; adjust minmax for card width */
      gap: 20px;
      margin-top: 20px;
      width: 100%;
      max-width: 1200px; /* Max grid width; modify for layout */
    }

    .zine {
      border: 2px outset #00bf63; /* Zine card border; change for card outline */
      padding: 10px;
      background-color: rgba(0, 95, 49, 0.2); /* Zine card background; adjust color/opacity */
      transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6); /* Card shadow; modify for depth */
      position: relative;
      overflow: visible;
    }

    .zine.shuffling {
      opacity: 0;
      transform: translateY(20px);
    }

    .zine:hover {
      transform: translateY(-10px);
      box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.8); /* Hover shadow; adjust for effect */
    }

    .zine img {
      width: 100%;
      height: auto;
      aspect-ratio: 2 / 3; /* Image ratio; change for different proportions */
      object-fit: cover;
    }

    .zine-title {
      font-weight: bold;
      font-size: clamp(1.2em, 4vw, 1.5em);
      position: relative;
      top: -15px;
      left: 10px;
      color: #e96f1b; /* Zine title color; primary accent */
      max-width: 200px;
      background-color: #312b24; /* Title background; adjust for contrast */
      padding: 5px;
      border: 1px solid #e96f1b; /* Title border; change for accent */
      transform: rotate(-5deg); /* Title angle; modify for different tilt */
    }

    .zine-category {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: rgba(60, 20, 2, 0.7); /* Category background; adjust color/opacity */
      padding: 3px 6px;
      font-size: clamp(0.7em, 2vw, 0.8em);
      border: 1px solid #ca9a57; /* Category border; change for contrast */
      color: #ca9a57; /* Category text; modify for readability */
    }

    .blurb {
      font-style: italic;
      color: #ca9a57; /* Blurb text color; adjust for visibility */
      text-shadow: 1px 1px 3px #000000; /* Text shadow; modify for effect */
      padding: 10px;
      font-size: clamp(0.8em, 2.5vw, 0.9em);
    }

    a {
      color: #e96f1b; /* Link color; primary accent */
      text-decoration: none;
      margin: 10px 0;
      display: inline-block;
    }

    a:hover {
      color: #ca9a57; /* Link hover color; change for hover effect */
      text-decoration: underline;
    }

    .zine-info {
      position: absolute;
      background-color: rgba(60, 20, 2, 0.8); /* Zine info background; adjust color/opacity */
      color: #ca9a57; /* Zine info text; modify for readability */
      width: 100%;
      transform: scale(0);
      transition: transform 0.3s ease;
      left: 0;
      bottom: 0;
      z-index: 2;
      text-align: center;
      padding: 10px;
      box-sizing: border-box;
    }

    .zine-info.show {
      transform: scale(1);
    }

    .banner-container img {
      width: 100%;
      max-width: 600px; /* Banner width; adjust for size */
      height: auto;
    }

    @media (max-width: 768px) {
      body {
        padding: 15px;
        padding-top: 60px;
        padding-bottom: 80px;
      }

      .floating-header {
        flex-direction: row;
        padding: 10px;
        gap: 10px;
        align-items: center;
      }

      .floating-header .header-content {
        flex: 1;
      }

      .floating-header .slogan {
        display: none;
      }

      .floating-header .controls {
        display: none;
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        gap: 8px;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background-color: rgba(60, 20, 2, 0.95); /* Mobile menu background; adjust color/opacity */
        padding: 10px;
        z-index: 999;
        border-bottom: 1px solid #e96f1b; /* Mobile menu border; change for accent */
      }

      .floating-header .controls.active {
        display: flex;
      }

      .hamburger {
        display: block;
      }

      .floating-header select, .floating-header button {
        width: 100%;
        padding: 10px;
        font-size: clamp(0.9em, 3vw, 1em);
      }

      .zines-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Mobile grid size; adjust minmax */
        gap: 15px;
        padding: 10px;
      }

      .zine {
        padding: 5px;
      }

      .zine img {
        width: 100%;
        height: auto;
      }

      .zine-title {
        font-size: clamp(1em, 3.5vw, 1.2em);
        max-width: 90%;
        left: 5px;
        top: -10px;
        padding: 3px;
      }

      .zine-info {
        padding: 5px;
        font-size: clamp(0.8em, 2.5vw, 0.9em);
      }

      .blurb {
        padding: 5px;
      }

      .true-footer {
        padding: 8px;
        font-size: clamp(0.7em, 2vw, 0.8em);
      }
    }

    @media (max-width: 480px) {
      .zines-grid {
        grid-template-columns: 1fr; /* Small screen grid; adjust for layout */
        gap: 10px;
      }

      .zine-title {
        font-size: clamp(0.9em, 3vw, 1em);
        max-width: 85%;
      }

      .floating-header h1 {
        font-size: clamp(1em, 3.5vw, 1.2em);
      }
    }