<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Ensure proper mobile responsiveness -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Photo Memes | [meme.am]</title>
  
  <!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Preload Nunito font files -->
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap" as="style">
<link rel="preload" href="https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaBTMnFcQ.woff2" as="font" type="font/woff2" crossorigin>

<!-- Then load the stylesheet normally -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap">

  
  <link rel="apple-touch-icon" sizes="57x57" href="/static/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/static/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/static/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/static/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/static/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/static/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/static/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon-180x180.png">
  <link rel="apple-touch-icon" sizes="1024x1024" href="/static/apple-touch-icon-1024x1024.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="48x48" href="/static/favicon-48x48.png">
  <link rel="icon" type="image/png" sizes="64x64" href="/static/favicon-64x64.png">
  <link rel="icon" type="image/png" sizes="128x128" href="/static/favicon-128x128.png">
  <link rel="icon" type="image/png" sizes="256x256" href="/static/favicon-256x256.png">
  <link rel="manifest" href="/static/site.webmanifest">
  <meta name="msapplication-TileImage" content="/static/mstile-144x144.png">




  
  <style>
	  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap');
	  
	  *, *::before, *::after {
	      box-sizing: border-box;
	  }
	  @font-face {
	    font-family: 'Nunito';
	    font-style: normal;
	    font-weight: 800;
	    font-display: swap; /* This helps prevent invisible text while font loads */
	    src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2');
	  }
	  
    /* Global Styles */
    body {
      font-family: Arial, sans-serif;
	  /* These values adjust Arial to better match Nunito's dimensions */
	    letter-spacing: -0.02em;
	    word-spacing: 0.05em;
      margin: 0;
      padding: 0;
      background: #ffffff;
    }
    header, footer {
      background: #000000;
      color: #fff;
      text-align: left;
      padding: 10px;
    }
    header h1, footer p {
      margin: 0;
    }

    a {
      color: #337ab7;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
	.logo {
	  font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
	  font-size: 29px;
	  font-weight: 800;
	}
	.logo a {
	  text-decoration: none;
	}
	.logo a:hover {
	  text-decoration: none;
	}
	.logo span.normal, footer p span.normal {
	  background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	  -webkit-background-clip: text;
	  background-clip: text;
	  color: transparent;
	}
	.logo span.highlight, footer p span.highlight {
	  background: linear-gradient(90deg, #D4FC79, #96E6A1);
	  -webkit-background-clip: text;
	  background-clip: text;
	  color: transparent;
	}
	
	
    /* New Styles for User Dropdown in Header */
	.header-right {
	    flex: 1;
	    display: flex;
	    justify-content: flex-end;
	    position: relative; /* Change from absolute to relative */
	    top: auto;
	    right: auto;
	  }
	
    /* Make Meme Button Styles */
    .make-meme-btn {
      display: inline-block;
      vertical-align: middle;
      margin-left: 15px;
      background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
      color: #000;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      padding: 8px 16px;
      border-radius: 8px;
      border: none;
      text-transform: uppercase;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
      transition: all 0.2s ease;
      text-decoration: none;
    }
    
    .make-meme-btn:hover {
      transform: translateY(-2px);
      box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
      text-decoration: none;
    }
    
    .make-meme-btn:active {
      transform: translateY(1px);
      box-shadow: 1px 1px 0px rgba(0,0,0,0.8);
    }
	
    /* Make Meme Button Styles */
    .upload-btn {
      display: inline-block;
      vertical-align: middle;
      margin-left: 15px;
      background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
      color: #000;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      padding: 8px 16px;
      border-radius: 8px;
      border: none;
      text-transform: uppercase;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
      transition: all 0.2s ease;
      text-decoration: none;
	  height:38px;
    }
    
    .upload-btn:hover {
      transform: translateY(-2px);
      box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
      text-decoration: none;
    }
    
    .upload-btn:active {
      transform: translateY(1px);
      box-shadow: 1px 1px 0px rgba(0,0,0,0.8);
    }
    
	.header-content {
	    width: 100%;
	    display: flex;
	    align-items: center;
	  }
    
	  .header-left {
	      display: flex;
	      align-items: center;
	    }
	
	
	/* Header Center Navigation (Arrows) */
	.header-center {
	  flex: 1;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  visibility: hidden;
	  opacity: 0;
	  transition: visibility 0.2s ease, opacity 0.2s ease;
	}

	.meme-detail-page .header-center {
	  visibility: visible;
	  opacity: 1;
	}
    
    .arrow-container {
	 will-change: transform;
      display: flex;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
      transition: all 0.2s ease;
	  
	  height: 38px;
    }
    
    .arrow-container:hover {
      transform: translateY(-2px);
      box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
    }
    
    .arrow-btn {
      border: none;
      padding: 8px 16px; /* Match auth button padding */
      cursor: pointer;
      font-size: 16px;
      color: #000000;
      outline: none;
      transition: background 0.2s ease;
      text-decoration: none;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      text-transform: uppercase;
    }
    
    /* Left half gradient to match login button */
    .left-arrow {
      background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	  opacity: 1.0 !important;
    }
    
    /* Right half gradient to match signup button */
    .right-arrow {
      background: linear-gradient(90deg, #D4FC79, #96E6A1);
	  opacity: 1.0 !important;
    }
    
    .arrow-btn:hover {
      opacity: 1;
	  text-decoration: none;
    }
	  
	/* User Icon Styles */
	.user-dropdown {
	  position: relative;
	  display: inline-block;
	}

	.user-button {
	  background: transparent;
	  border: none;
	  cursor: pointer;
	  padding: 0;
	  transition: transform 0.2s ease;
	}

	.user-button:hover {
	  transform: scale(1.1);
	}

	.user-icon {
		line-height: 40px;
	  border-radius: 50%;
	  display: block;
	  align-items: center;
	  justify-content: center;
	  font-family: 'Nunito', sans-serif;
	  font-weight: 800;
	  font-size: 18px;
	  color: #000;
	  background: linear-gradient(135deg, #A1C4FD, #C2E9FB);
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	  transition: all 0.3s ease;
	  width: 40px; /* Fixed width */
	  height: 40px; /* Fixed height */
	}

	.user-icon.with-image {
	  object-fit: cover;
	  background: none;
	}

	.user-button:hover .user-icon {
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  right: 0;
	  background-color: #fff;
	  min-width: 150px;
	  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	  border-radius: 8px;
	  z-index: 1;
	  overflow: hidden;
	  transform: translateY(10px);
	  opacity: 0;
	  transition: all 0.3s ease;
	}

	.user-dropdown:hover .dropdown-content {
	  display: block;
	  opacity: 1;
	  transform: translateY(5px);
	}

	.dropdown-content a {
	  color: #333;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	  transition: background-color 0.2s ease;
	  font-family: 'Nunito', sans-serif;
	  font-weight: 600;
	  font-size: 14px;
	}

	.dropdown-content a:hover {
	  background-color: #f5f5f5;
	  color: #000;
	}

	/* Add a subtle separator between menu items */
	.dropdown-content a:not(:last-child) {
	  border-bottom: 1px solid #eee;
	}
	
	/* Footer structure */
	footer {
	  font-size: 13px;
	  font-weight: 800;
	  font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
	  display: flex;
	  flex-direction: column;    /* THIS IS KEY: Stacks children (p and ul) vertically */
	  align-items: flex-start;   /* Aligns children to the left edge of the footer */
	  padding: 15px;             /* Padding around the content inside the footer */
	  text-align: left;          /* Default text alignment for content inside footer */
	  background: #000000;       /* Assuming you want to keep the black background */
	  color: #fff;               /* Assuming you want to keep the white text */
	}

	/* Copyright text styling */
	footer p {
	  margin: 0 0 8px 0;       /* No top/left/right margin, 8px bottom margin to create space before links */
	  width: 100%;               /* Ensures paragraph takes full width available */
	  text-align: left;          /* Ensures text within paragraph is left-aligned */
	  color: #fff;
	}

	/* Footer links styling (the UL element) */
	.footer-links {
	  list-style: none;          /* Removes bullet points */
	  padding: 0;                /* Removes default UL padding */
	  margin: 0;                 /* Removes default UL margin, so it sits right below paragraph's bottom margin */
	  display: flex;
	  flex-direction: row;    /* Stacks LI items vertically */
	  flex-wrap: wrap;
	  align-items: flex-start;   /* Aligns LI items to the left */
	  width: 100%;               /* Ensures UL takes full width available */
	  gap: 10px 15px;                  /* Adds 5px space between each link item (LI) */
	}

	/* Individual link items (LI) */
	.footer-links li {
	  margin: 0;                 /* No extra margin on LIs if using 'gap' on the parent UL */
	  /*width: 100%;  */             /* Ensures LI takes full width of its parent UL */
	  text-align: left;          /* Ensures content (the <a> tag) within LI is left-aligned */
	}

	/* Styling for the <a> tags inside LIs */
	.footer-links a {
	  color: #fff;
	  text-decoration: none;
	  font-size: 12px;
	  display: flex;             /* Allows alignment of icon and text within the link */
	  align-items: center;       /* Vertically centers icon and text if link has varying heights */
	  transition: color 0.2s ease;
	}

	.footer-links a:hover {
	  color: #A1C4FD;
	  text-decoration: none;
	}

	/* Icon styling within links */
	.footer-links i {
	  margin-right: 5px;
	  font-size: 14px;
	}

	/* Mobile adjustments (ensure consistency or specific mobile styling) */
	@media (max-width: 768px) {
	  footer {
	    padding: 10px; /* Slightly less padding on mobile */
	  }

	  footer p {
	    margin-bottom: 8px; /* Consistent bottom margin for copyright on mobile */
	  }
	  /* .footer-links, .footer-links li, and .footer-links a will inherit desktop styles
	     which are generally fine for mobile too in this layout. Adjust if needed. */
	}
	
    meme-detail-page
      h1 {
        font-size: 24px;
      }
      .logo {
        font-size: 22px;
      }
    }

    /* Banner Ad Styles */
    #banner-ad {
      width: 100%;
      background: #000000;
      text-align: center;
      padding: 30px 0;
      overflow: hidden;
      max-height: 100px; /* initial height */
      transition: max-height 0.3s ease;
    }

    /* Sticky header */
    header {
      position: sticky;
      top: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
    }

    /* Tags Section Styles */
    #tags-section {
      background: #333;
      padding: 10px 20px;
      color: #fff;
      text-align: center;
    }
    /* Desktop: show one line by default, then expand on button click */
    @media (min-width: 769px) {
	    .fa-arrow-left, .fa-arrow-right {
	      will-change: transform;
	    }
      /* Make sure header is sticky on desktop */
      header {
        position: sticky;
        top: 0;
      }
      
      /* Properly position the arrows in the center */
	  .header-center {
	    position: absolute;
	    left: 50%;
	    transform: translateX(-50%);
	    z-index: 10;
	    display: flex; /* Changed from none to flex */
	    align-items: center;
	    visibility: hidden;
	    opacity: 0;
	  }
	  
	  /* Show arrows only on meme detail pages */
	    .meme-detail-page .header-center {
	      display: flex;
	    }
	    /* Show arrows on meme detail pages */
	    .meme-detail-page .header-center {
	      visibility: visible;
	      opacity: 1;
	    }
		
      
      /* Completely hide mobile arrows on desktop */
      .mobile-nav-arrows {
        display: none !important;
      }
      
      .arrow-btn {
        height: 38px; /* Match auth button height */
        display: flex;
        align-items: center;
      }
      
      main {
        padding: 5px;
        min-height: 80vh;
      }
      
      .user-icon {
        width: 40px;
        height: 40px;
      }
      
      #tags-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow: hidden;
        white-space: nowrap;
        transition: height 0.3s ease;
      }
      #tags-wrapper.expanded {
        flex-wrap: wrap;
        white-space: normal;
        overflow: visible;
      }
      #more-tags-button {
        display: block;
        margin: 10px auto 0 auto;
        background: #fff;
        border: none;
        color: #000;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: bold;
      }
      /* Make tags sticky on meme detail pages */
      .sticky-tags {
        position: sticky;
        top: 59px;  /* Adjust this value to match your header/banner height */
        z-index: 950;
      }
      
      .tag {
        background: #555;
        padding: 5px 10px;
        border-radius: 3px;
        white-space: nowrap;
      }
      .mobile-upload-icon {
        display: none;
      }
    }
	
    /* Mobile: horizontal scroll, no More Tags button */
    @media (max-width: 768px) {
      /* Keep header sticky on mobile */
      header {
        position: sticky;
        top: 0;
      }
      
      /* Hide desktop arrows on mobile */
      .header-center {
        display: none !important;
      }
      
      /* Mobile nav arrows styles */
	  .mobile-nav-arrows {
	    position: fixed;
	    top: 13px; /* Match the header-right top position */
	    right: 11px;
	    opacity: 0; /* Change back to 0 so it's initially hidden */
	    visibility: visible; /* Change back to hidden if transition */
	    transform: translateY(0);
	    transition: opacity 0.2s ease, visibility 0.2s ease; /* Faster transition */
	    z-index: 2001;
	  }
		.mobile-nav-arrows.visible {
		  opacity: 1 !important;
		  visibility: visible !important;
		  display: flex !important;
		  /* Add more specific position */
		  position: fixed;
		  top: 13px;
		  right: 10px;
		  z-index: 2500; /* Increase z-index to make sure it's above everything */
		}
	  
      
      /* Ensure vertical alignment with auth buttons */
      .mobile-nav-arrows .arrow-container {
        display: flex;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 3px 3px 0px rgba(0,0,0,0.8); /* Match auth buttons */
        height: 29px; /* Match auth button height */
      }
      
      /* Fast transition for header-right */
      .header-right {
        transition: opacity 0.2s ease, visibility 0.2s ease; /* Faster transition */
      }
      
      .header-right.scrolled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
	  
	  
      
      /* Smaller arrow buttons on mobile */
      .arrow-btn {
        padding: 6px 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%; /* Fill the container height */
      }
      
      .upload-btn {
        display: none;
      }
      .mobile-upload-icon {
        display: inline-block;
        cursor: pointer;
        font-size: 18px; /* Adjust size as needed */
        color: #A1C4FD; /* Use your preferred color #337ab7*/
        margin-right: 10px;
      }
      
      main {
        padding: 0px;
        min-height: 80vh;
      }
      
      .user-icon {
        width: 30px;
        height: 30px;
      }
      
      #tags-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
      }
      #more-tags-button {
        display: none;
      }
      .tag {
        display: inline-block;
      }
      /* Make tags sticky on meme detail pages */
	  /* Make tags sticky on meme detail pages - Fixed to always be sticky */
	  .sticky-tags {
	    position: sticky;
	    padding: 2px;
	    top: 49px;  /* Adjust this value to match your header/banner height */
	    z-index: 950;
	    font-size: 10px;
	    font-weight: 300;
	  }
	  /* Make ALL tags sections sticky on mobile */
	  #tags-section {
	    position: sticky;
	    top: 56px; /* Match the header height */
	    z-index: 950;
	    background: #333;
	    padding: 4px 3px;
	    color: #fff;
	    text-align: center;
	    overflow-x: hidden;
	  }
      .tag {
        background: #555;
        padding: 4px 3px;
        border-radius: 3px;
        white-space: nowrap;
        font-size: 10px;
        font-weight: 300;
        margin-left: 3px;
      }
    }
    
	/* Fix for older browsers */
	.logo span, .logo .highlight, footer span, footer .highlight {
	  -webkit-text-fill-color: transparent;
	}
	
	#tags-section a {
	  color: #fff;
	  text-decoration: none;
	}
	
	.meme-title {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: rgba(0, 0, 0, 0.6);
	  color: #fff;
	  padding: 5px;
	  text-align: center;
	  font-size: 0.9em;
	}
	.hide-memes {
	  display: none;
	}
  </style>
  <!-- Matomo -->
  <script>
    var _paq = window._paq = window._paq || [];
    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function() {
      var u="//matomo.ieplsg.com/";
      _paq.push(['setTrackerUrl', u+'matomo.php']);
      _paq.push(['setSiteId', '424']);
      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
    })();
  </script>
  <!-- End Matomo Code -->
  <script async data-id="101451432" src="//static.getclicky.com/js"></script>
  
  
  <!-- CSS -->
  <style>
	  /* Auth Buttons Styles */
	  .auth-btn {
	    display: inline-block;
	    vertical-align: middle;
	    font-family: 'Nunito', sans-serif;
	    font-weight: 800;
	    padding: 8px 16px;
	    border-radius: 8px;
	    border: none;
	    text-transform: uppercase;
	    font-size: 14px;
	    cursor: pointer;
	    /* Fixed position shadow with space reserved for the hover state */
	    box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
	    transition: all 0.2s ease;
	    text-decoration: none;
	    color: #000;
	    /* Add margin to reserve space for shadow expansion */
	    margin-bottom: 2px;
	    margin-right: 2px;
	    /* Use transform instead of margin changes */
	    position: relative;
		height: 38px;
	  }

	  .login-btn {
	    background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	  }

	  .signup-btn {
	    background: linear-gradient(90deg, #D4FC79, #96E6A1);
	  }

	  .auth-btn:hover {
	    transform: translateY(-2px);
	    box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
	    text-decoration: none;
	  }

	  .auth-btn:active {
	    transform: translateY(1px);
	    box-shadow: 1px 1px 0px rgba(0,0,0,0.8);
	  }

	  /* Mobile Styles */
	  @media (max-width: 480px) {
	    .auth-buttons {
		    display: flex;
		    flex-direction: row; /* Force horizontal alignment */
		    justify-content: flex-end;
		    align-items: center;
		    gap: 6px; /* Space between buttons */
	    }
		
		
  
	    .auth-btn {
	      padding: 6px 10px; /* Reduced padding */
	      font-size: 12px; /* Smaller font size */
	      border-radius: 6px; /* Slightly smaller border radius */
	      box-shadow: 2px 2px 0px rgba(0,0,0,0.8); /* Smaller shadow */
	      /* Smaller margin compensation for mobile */
	      margin-bottom: 1px;
	      margin-right: 1px;
		  
		  box-sizing: border-box;
		  height: 29px;
	      line-height: 1;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	    }
  
	    .auth-btn:hover {
	      box-shadow: 3px 3px 0px rgba(0,0,0,0.8); /* Smaller hover shadow */
	    }
	  }
	  
	</style>
	
	<style>
	/* Side Menu Styles */
	#sideMenu {
	  position: fixed;
	  left: 0;
	  width: 300px;
	  background-color: #1a1a1a;
	  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.3);
	  z-index: 1900;
	  overflow-y: auto;
	  color: #fff;
	  font-family: 'Nunito', sans-serif;
	  /* Only use transform for animation, not display property */
	  transform: translateX(-100%);
	  transition: transform 0.3s ease;
	  /* Always visible in the DOM but off-screen */
	  visibility: hidden;
	}
	
    @media (min-width: 480px) {
		#sideMenu {
			top: 60px; /* Adjust if your header height is different */
  	  height: calc(100% - 60px);
  		}
    }
	  @media (max-width: 479px) {
	  #sideMenu {
		  top: 56px; /* Adjust if your header height is different */
	  height: calc(100% - 56px);
  		}
 	 }

	#sideMenu.active {
	  transform: translateX(0);
	  visibility: visible;
	}

	.menu-header {
	  padding: 20px 15px;
	  background: #000;
	  text-align: center;
	  border-bottom: 2px solid #333;
	}

	.menu-header .logo {
	  font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
	  font-size: 26px;
	  font-weight: 800;
	}

	.menu-header .logo .normal {
	  background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	  -webkit-background-clip: text;
	  background-clip: text;
	  color: transparent;
	  -webkit-text-fill-color: transparent;
	}

	.menu-header .logo .highlight {
	  background: linear-gradient(90deg, #D4FC79, #96E6A1);
	  -webkit-background-clip: text;
	  background-clip: text;
	  color: transparent;
	  -webkit-text-fill-color: transparent;
	}

	#sideMenu ul {
	  list-style: none;
	  padding: 10px 0;
	  margin: 0;
	}

	.menu-divider {
	  height: 1px;
	  background: #333;
	  margin: 10px 20px;
	}

	#sideMenu li:not(.menu-divider) {
	  margin: 0;
	  transition: background-color 0.2s ease;
	}

	#sideMenu li:not(.menu-divider):hover {
	  background-color: #333;
	}

	#sideMenu a {
	  display: flex;
	  align-items: center;
	  text-decoration: none;
	  color: #fff;
	  font-size: 16px;
	  font-weight: 600;
	  padding: 15px 20px;
	  transition: color 0.2s ease;
	}

	#sideMenu a:hover {
	  color: #A1C4FD;
	  text-decoration: none;
	}

	#sideMenu a i {
	  width: 24px;
	  margin-right: 15px;
	  text-align: center;
	  font-size: 18px;
	}

	.menu-footer {
	  padding: 15px 20px;
	  border-top: 1px solid #333;
	  font-size: 12px;
	  color: #999;
	  text-align: center;
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  background: #151515;
	}

	/* Updated Hamburger Button Styles */
	.hamburger-btn {
	  background: transparent;
	  border: none;
	  cursor: pointer;
	  color: #A1C4FD;
	  transition: transform 0.3s ease, color 0.3s ease;
	  padding: 0;
	  z-index: 1001; /* Make sure it's above the menu */
  
	  /* Fixed width and height to prevent layout shift */
	  width: 40px;
	  height: 40px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	.hamburger-btn i {
	  /* Fixed font size */
	  font-size: 24px;
	  /* Center the icon within the fixed-width container */
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 24px; /* Ensure the icon itself has a fixed width */
	  height: 24px; /* Ensure the icon itself has a fixed height */
	}

	.hamburger-btn:hover {
	  transform: scale(1.1);
	  color: #D4FC79;
	}

	/* Ensure minimum width on mobile */
	@media (max-width: 768px) {
	  #sideMenu {
	    width: 280px;
	  }
  
	  #sideMenu a {
	    font-size: 15px;
	    padding: 12px 20px;
	  }
  
	  .menu-header .logo {
	    font-size: 22px;
	  }
	  
	  .hamburger-btn {
	      width: 36px;
	      height: 36px;
	    }
  
	    .hamburger-btn i {
	      font-size: 20px;
	      width: 20px;
	      height: 20px;
	    }
		
		/* HIDING LOGIN AND SIGNUP ON MEME */
		.meme-detail-page .header-right {
		    /* display: none; */
		  }
	}
	</style>
	
	<style>
	  /* Improved sidebar search styles */
	  #sideMenu li.search-item {
	    padding: 0;
	    margin: 0;
	  }
  
	  #sideMenu li.search-item:hover {
	    background-color: transparent;
	  }
  
	  #sideMenu .sidebar-search-form {
	    padding: 5px 20px 15px;
	    background-color: #1a1a1a;
	  }
  
	  #sideMenu .sidebar-search-form form {
	    display: flex;
	    width: 100%;
	    box-shadow: 3px 3px 0px rgba(0,0,0,0.3);
	    border-radius: 6px;
	    overflow: hidden;
	  }
  
	  #sideMenu .sidebar-search-form input {
	    flex: 1;
	    padding: 10px 12px;
	    border: none;
	    background: #333;
	    color: #fff;
	    font-family: 'Nunito', sans-serif;
	    font-size: 14px;
	    outline: none;
	  }
  
	  #sideMenu .sidebar-search-form input::placeholder {
	    color: #aaa;
	  }
  
	  #sideMenu .sidebar-search-form button {
	    padding: 0 15px;
	    border: none;
	    background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	    color: #000;
	    font-family: 'Nunito', sans-serif;
	    font-weight: 800;
	    cursor: pointer;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	  }
  
	  #sideMenu .sidebar-search-form button:hover {
	    background: linear-gradient(90deg, #D4FC79, #96E6A1);
	  }
	</style>
	
	<style>
	  /* Desktop search box styles */
	  .desktop-search-box {
	    display: none; /* Initially hidden, will be shown with media query */
	    margin-left: 15px;
	    position: relative;
	  }
  
	  .desktop-search-box form {
	    display: flex;
	    height: 38px; /* Match the height of other buttons */
	  }
  
	  .desktop-search-box input {
	    padding: 8px 12px;
	    border-radius: 8px 0 0 8px;
	    border: none;
	    font-family: 'Nunito', sans-serif;
	    font-size: 14px;
	    width: 180px;
	    box-shadow: 3px 3px 0 rgba(0,0,0,0.8);
	    position: relative;
	    z-index: 1;
	  }
  
	  .desktop-search-box button {
	    padding: 8px 12px;
	    border-radius: 0 8px 8px 0;
	    border: none;
	    background: linear-gradient(90deg, #A1C4FD, #C2E9FB);
	    color: #000;
	    font-family: 'Nunito', sans-serif;
	    font-weight: 800;
	    cursor: pointer;
	    box-shadow: 3px 3px 0 rgba(0,0,0,0.8);
	    position: relative;
	    z-index: 1;
	  }
  
	  /* Only show desktop search on larger screens */
	  @media (min-width: 769px) {
	    .desktop-search-box {
	      display: flex;
	    }
	  }
  
	  /* Adjust on smaller screens */
	  @media (max-width: 1024px) {
	    .desktop-search-box input {
	      width: 150px;
	    }
	  }
	</style>
  
  
  <meta name="description" content="Explore the best Photo memes on meme.am. Browse a collection of hilarious, trending, and viral memes in our gallery. Updated daily!">

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    "name": "Photo Memes | meme.am",
    "description": "Discover a collection of hilarious Photo memes. Browse trending, viral, and user-generated memes at meme.am.",
    "url": "http://meme.am/tag/photo",
    "thumbnailUrl": [
      
      "https://meme.am/binary/vFtXJjc-a-refreshing-escape-with-scandinavia-and-beyond.png",
      
      "https://meme.am/binary/if0beqI-what-the-heck-just-happened.png",
      
      "https://meme.am/binary/C5BNpc3-i-hope-youre-wealthy-because-taxes-are-about-to-skyrocket.jpeg",
      
      "https://meme.am/binary/zMX0ytg-the-face-that-signals-the-end-of-the-world.jpeg",
      
      "https://meme.am/binary/lOfN8gw-a-mysterious-date-with-cryptic-symbols.png"
      
    ],
    "hasPart": [
      
      {
        "@type": "ImageObject",
        "name": "A Refreshing Escape with Scandinavia and Beyond",
        "contentUrl": "https://meme.am/binary/vFtXJjc-a-refreshing-escape-with-scandinavia-and-beyond.png",
        "url": "https://meme.am/meme/vFtXJjc-a-refreshing-escape-with-scandinavia-and-beyond",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "What the heck just happened?",
        "contentUrl": "https://meme.am/binary/if0beqI-what-the-heck-just-happened.png",
        "url": "https://meme.am/meme/if0beqI-what-the-heck-just-happened",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "I Hope You&#39;re Wealthy Because Taxes Are About to Skyrocket!",
        "contentUrl": "https://meme.am/binary/C5BNpc3-i-hope-youre-wealthy-because-taxes-are-about-to-skyrocket.jpeg",
        "url": "https://meme.am/meme/C5BNpc3-i-hope-youre-wealthy-because-taxes-are-about-to-skyrocket",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "The face that signals the end of the world.",
        "contentUrl": "https://meme.am/binary/zMX0ytg-the-face-that-signals-the-end-of-the-world.jpeg",
        "url": "https://meme.am/meme/zMX0ytg-the-face-that-signals-the-end-of-the-world",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "A Mysterious Date with Cryptic Symbols",
        "contentUrl": "https://meme.am/binary/lOfN8gw-a-mysterious-date-with-cryptic-symbols.png",
        "url": "https://meme.am/meme/lOfN8gw-a-mysterious-date-with-cryptic-symbols",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "The Battle Against Gun Culture: A Turning Point",
        "contentUrl": "https://meme.am/binary/E2eBaKm-the-battle-against-gun-culture-a-turning-point.png",
        "url": "https://meme.am/meme/E2eBaKm-the-battle-against-gun-culture-a-turning-point",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "Celebrating 16 Years of Imgur: Happy Birthday!",
        "contentUrl": "https://meme.am/binary/BwsfuJ4-celebrating-16-years-of-imgur-happy-birthday.jpeg",
        "url": "https://meme.am/meme/BwsfuJ4-celebrating-16-years-of-imgur-happy-birthday",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "Spinning Like a Rotisserie Chicken",
        "contentUrl": "https://meme.am/binary/EZ5EK8I-spinning-like-a-rotisserie-chicken.jpeg",
        "url": "https://meme.am/meme/EZ5EK8I-spinning-like-a-rotisserie-chicken",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "The Countdown to Retirement Has Begun",
        "contentUrl": "https://meme.am/binary/XQQzVfK-the-countdown-to-retirement-has-begun.jpeg",
        "url": "https://meme.am/meme/XQQzVfK-the-countdown-to-retirement-has-begun",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "It’s a Game-Changer: Revolutionary Ideas Unleashed!",
        "contentUrl": "https://meme.am/binary/BrE80cL-its-a-game-changer-revolutionary-ideas-unleashed.jpeg",
        "url": "https://meme.am/meme/BrE80cL-its-a-game-changer-revolutionary-ideas-unleashed",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "Hands Off My Mug!",
        "contentUrl": "https://meme.am/binary/5414ZRT-hands-off-my-mug.jpeg",
        "url": "https://meme.am/meme/5414ZRT-hands-off-my-mug",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "It’s snowing like the heavens are showering us with snowflakes!",
        "contentUrl": "https://meme.am/binary/2vruZ9l-its-snowing-like-the-heavens-are-showering-us-with-snowflakes.mp4",
        "url": "https://meme.am/meme/2vruZ9l-its-snowing-like-the-heavens-are-showering-us-with-snowflakes",
        "encodingFormat": "video/mp4"
      },
      
      {
        "@type": "ImageObject",
        "name": "MB ACC II hoses: A closer look.",
        "contentUrl": "https://meme.am/binary/QX2SlWk-mb-acc-ii-hoses-a-closer-look.png",
        "url": "https://meme.am/meme/QX2SlWk-mb-acc-ii-hoses-a-closer-look",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "My Sixteenth Favorite: The Fascinating Magnus Effect",
        "contentUrl": "https://meme.am/binary/Jl48lg8-my-sixteenth-favorite-the-fascinating-magnus-effect.mp4",
        "url": "https://meme.am/meme/Jl48lg8-my-sixteenth-favorite-the-fascinating-magnus-effect",
        "encodingFormat": "video/mp4"
      },
      
      {
        "@type": "ImageObject",
        "name": "Behind the scenes at Cloudy Pass Raceway",
        "contentUrl": "https://meme.am/binary/chz4JDl-behind-the-scenes-at-cloudy-pass-raceway.png",
        "url": "https://meme.am/meme/chz4JDl-behind-the-scenes-at-cloudy-pass-raceway",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "The Ultimate STTNG Episode: Dare to Challenge My Opinion!",
        "contentUrl": "https://meme.am/binary/VBepQhn-the-ultimate-sttng-episode-dare-to-challenge-my-opinion.mp4",
        "url": "https://meme.am/meme/VBepQhn-the-ultimate-sttng-episode-dare-to-challenge-my-opinion",
        "encodingFormat": "video/mp4"
      },
      
      {
        "@type": "ImageObject",
        "name": "Witty One-Liners That Will Make You Smile",
        "contentUrl": "https://meme.am/binary/PQi12H2-witty-one-liners-that-will-make-you-smile.jpeg",
        "url": "https://meme.am/meme/PQi12H2-witty-one-liners-that-will-make-you-smile",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "A Steaming Bowl of Noodles for Just $4!",
        "contentUrl": "https://meme.am/binary/5xNjGrZ-a-steaming-bowl-of-noodles-for-just-4.mp4",
        "url": "https://meme.am/meme/5xNjGrZ-a-steaming-bowl-of-noodles-for-just-4",
        "encodingFormat": "video/mp4"
      },
      
      {
        "@type": "ImageObject",
        "name": "A Reflection on Immigrants",
        "contentUrl": "https://meme.am/binary/prtEYCK-a-reflection-on-immigrants.jpeg",
        "url": "https://meme.am/meme/prtEYCK-a-reflection-on-immigrants",
        "encodingFormat": "image/jpeg"
      },
      
      {
        "@type": "ImageObject",
        "name": "Introducing the New Mug Baby!",
        "contentUrl": "https://meme.am/binary/JymOzNR-introducing-the-new-mug-baby.jpeg",
        "url": "https://meme.am/meme/JymOzNR-introducing-the-new-mug-baby",
        "encodingFormat": "image/jpeg"
      }
      
    ]
  }
  </script>

  <style>
    /* Gallery Styles for Tag Page */
    .gallery {
      column-count: 4;
      column-gap: 10px;
      padding: 10px;
    }
    @media (max-width: 768px) {
      .gallery {
        column-count: 1;
      }
    }
    
    .meme {
      display: inline-block;
      width: 100%;
      margin-bottom: 10px;
      break-inside: avoid;
      position: relative;
      background-color: #eee; /* fallback background */
      min-height: 150px;      /* ensures container isn’t empty */
      border: 2px solid #000; /* 2px border for all memes */
      overflow: hidden;
    }
    .meme a {
      display: block;
      text-decoration: none;
      color: inherit;
    }
    /* Updated Media Styles */
    .meme img,
    .meme video {
      max-width: 100%;
      width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
      transition: opacity 0.5s ease-in;
      opacity: 0;
    }
    .meme img.loaded,
    .meme video.loaded {
      opacity: 1;
    }
    #loader {
      text-align: center;
      padding: 20px;
    }
    /* Meme title overlay */
    .meme-title {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 5px;
      text-align: center;
      z-index: 1;
    }
  </style>

</head>
<body>


  <header>
    <div class="header-left">
      <!-- Hamburger Menu Button -->
      <button id="hamburgerBtn" class="hamburger-btn">
        <i class="fa fa-bars"></i>
      </button>
      <!-- Mobile upload icon (only visible on mobile) -->
      <div class="mobile-upload-icon">
        <i class="fa fa-upload" id="mobileUploadIcon"></i>
        <!-- Hidden file input -->
        <input type="file" id="mobileUploadInput" name="meme" accept="image/*" style="display:none;" />
      </div>
      
      <div class="logo">
        <a href="/"><span class="normal">meme</span><span class="highlight">.am</span></a>
      </div>
      
      <a href="/upload" class="upload-btn">Upload</a>
	  
	  <div class="desktop-search-box">
	    <form id="header-search-form" onsubmit="handleSearch(event)">
	      <input type="text" id="header-search-input" placeholder="Search memes...">
	      <button type="submit">
	        <i class="fa fa-search"></i>
	      </button>
	    </form>
	  </div>
    </div>
  
    <!-- Centered Navigation with Previous and Next Arrows -->
    <div class="header-center">
      <div class="arrow-container">
        
        <span class="arrow-btn left-arrow" style="cursor:default; opacity: 1.0 !important;">
          <i class="fa fa-arrow-left"></i>
        </span>
        
        
        <span class="arrow-btn right-arrow" style="cursor:default; opacity: 1.0 !important;">
          <i class="fa fa-arrow-right"></i>
        </span>
        
      </div>
    </div>
  
    <div class="header-right" >
		
      
      <div class="auth-buttons">
        <a href="/login" class="auth-btn login-btn">Login</a>
        <a href="/signup" class="auth-btn signup-btn">Sign Up</a>
      </div>
      
    </div>
  </header>

  <!-- Add mobile navigation arrows that appear on scroll -->
  <div class="mobile-nav-arrows">
    <div class="arrow-container">
      
      <span class="arrow-btn left-arrow" style="cursor:default; opacity: 1;">
        <i class="fa fa-arrow-left"></i>
      </span>
      
      
      <span class="arrow-btn right-arrow" style="cursor:default; opacity: 1;">
        <i class="fa fa-arrow-right"></i>
      </span>
      
    </div>
  </div>
  
  <!-- Updated JavaScript for mobile scroll behavior -->
  <script>
	  // Run immediately instead of waiting for DOMContentLoaded
	  (function() {
	    // Check if we're on a meme detail page
	    const path = window.location.pathname;
	    const isMemeDetailPage = path.startsWith('/m/') || path.startsWith('/meme/');

	    // Add a class to the body for CSS targeting
	    if (isMemeDetailPage) {
	      document.body.classList.add('meme-detail-page');
	    }
	  })();

	  // Keep your other DOMContentLoaded code
	  document.addEventListener('DOMContentLoaded', function() {
	    // Your other functionality here
  
	    // Remove the scroll behavior entirely for meme pages on mobile
	    const isMobile = window.matchMedia('(max-width: 768px)').matches;
	    const isMemeDetailPage = document.body.classList.contains('meme-detail-page');

	    if (isMobile && isMemeDetailPage) {
	      // Set the mobile arrows to be visible immediately
	      const mobileNavArrows = document.querySelector('.mobile-nav-arrows');
	      if (mobileNavArrows) {
	        mobileNavArrows.style.display = 'flex';
	        mobileNavArrows.style.visibility = 'visible';
	        mobileNavArrows.style.opacity = '1';
	      }
	    }
	  });
  </script>
  
  <!-- Side Menu (opens below header) -->
  <nav id="sideMenu">
    <ul>
      <li>
        <a href="/">
          <i class="fa fa-home"></i>
          <span>Home</span>
        </a>
      </li>
      <li>
        <a href="/popular">
          <i class="fa fa-fire"></i>
          <span>Popular</span>
        </a>
      </li>
      <li>
        <a href="/newest">
          <i class="fa fa-star"></i>
          <span>Newest</span>
        </a>
      </li>
      <li>
        <a href="/most-liked">
          <i class="fa fa-heart"></i>
          <span>Most Liked</span>
        </a>
      </li>
	  <li>
	    <a href="/top-tags">
	      <i class="fa fa-tags"></i>
	      <span>Top 500 Tags</span>
	    </a>
	  </li>
	  <!--<li>
	          <a href="https://www.reddit.com/r/memeampm/" target="_blank" rel="nofollow">
	            <i class="fa fa-reddit"></i>
	            <span>meme.am pm Reddit</span>
	          </a>
        </li>-->
	  
	  
		<li>
		  <a href="#" onclick="toggleSidebarSearch(event)">
		    <i class="fa fa-search"></i>
		    <span>Search</span>
		  </a>
		</li>
		<li class="search-item" style="display: none;" id="sidebar-search-container">
		  <div class="sidebar-search-form">
		    <form onsubmit="handleSearch(event)">
		      <input type="text" placeholder="Search memes..." aria-label="Search">
		      <button type="submit">
		        <i class="fa fa-search"></i>
		      </button>
		    </form>
		  </div>
		</li>

	  
	  
      <li>
        <a href="/upload">
          <i class="fa fa-upload"></i>
          <span>Upload Meme</span>
        </a>
      </li>
      
      
      <li class="menu-divider"></li>
      <li>
        <a href="/login">
          <i class="fa fa-sign-in"></i>
          <span>Login</span>
        </a>
      </li>
      <li>
        <a href="/signup">
          <i class="fa fa-user-plus"></i>
          <span>Sign Up</span>
        </a>
      </li>
      
    </ul>
  </nav>
  
  <!-- Fixed JavaScript for Menu Toggle -->
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const hamburgerBtn = document.getElementById('hamburgerBtn');
    const sideMenu = document.getElementById('sideMenu');
  
    // Improved toggle menu visibility
    hamburgerBtn.addEventListener('click', function(event) {
      // Prevent event bubbling to document click
      event.stopPropagation();
    
      if (sideMenu.classList.contains('active')) {
        // Close menu
        sideMenu.classList.remove('active');
        this.innerHTML = '<i class="fa fa-bars"></i>';
      } else {
        // Open menu
        sideMenu.classList.add('active');
        this.innerHTML = '<i class="fa fa-times"></i>';
      }
    });
  
    // Close menu when clicking outside
    document.addEventListener('click', function(event) {
      if (sideMenu.classList.contains('active') && 
          !sideMenu.contains(event.target) && 
          !hamburgerBtn.contains(event.target)) {
        sideMenu.classList.remove('active');
        hamburgerBtn.innerHTML = '<i class="fa fa-bars"></i>';
      }
    });
  
    // Close menu when pressing escape key
    document.addEventListener('keydown', function(event) {
      if (event.key === 'Escape' && sideMenu.classList.contains('active')) {
        sideMenu.classList.remove('active');
        hamburgerBtn.innerHTML = '<i class="fa fa-bars"></i>';
      }
    });
  });
  </script>



  <div id="tags-section" >
    <div id="tags-wrapper" class="collapsed">
      
        
          <span class="tag">
            <a href="/tag/photography">
              photography
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/selfie">
              selfie
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/black_and_white">
              black and white
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/portrait">
              portrait
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/landscape">
              landscape
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/wildlife_photography">
              wildlife photography
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/landscape_photography">
              landscape photography
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/camera">
              camera
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/macro_photography">
              macro photography
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/memes">
              memes
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/fun">
              fun
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/friends">
              friends
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/instagram">
              instagram
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/social_media">
              social media
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/snapchat">
              snapchat
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/filter">
              filter
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/vintage">
              vintage
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/retro">
              retro
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/classic">
              classic
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/nature">
              nature
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/wildlife">
              wildlife
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/travel">
              travel
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/sunset">
              sunset
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/river">
              river
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/mountains">
              mountains
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/beach">
              beach
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/ocean">
              ocean
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/hiking">
              hiking
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
          <span class="tag">
            <a href="/tag/adventure">
              adventure
              
                <span class="hide-memes"> memes</span>
              
            </a>
          </span>
        
      
      <span class="tag">
        <a href="https://wallpapers.com/cool" target="_blank">cool wallpapers</a>
      </span>
    </div>
  </div>
  
    <button id="more-tags-button" onclick="toggleTags()">▼ MORE TAGS ▼</button>
  




  <main>
    
  <!-- Header -->
  <h1 style="text-align: center;">Photo Memes</h1>

  <!-- Gallery of memes with this tag -->
  <div class="gallery" id="gallery">
    
	
	  <div class="meme" data-id="1128" style="background-color: #3498DB;">
	    <a href="/meme/vFtXJjc-a-refreshing-escape-with-scandinavia-and-beyond">
	      
	        <img 
	          data-src="/binary/vFtXJjc-a-refreshing-escape-with-scandinavia-and-beyond.png" 
	          alt="A Refreshing Escape with Scandinavia and Beyond" 
	          loading="lazy"
	          width="900"
	          height="1260"
	          style="aspect-ratio: 900/1260;">
	      
	      <div class="meme-title">A Refreshing Escape with Scandinavia and Beyond</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="9904" style="background-color: #3357FF;">
	    <a href="/meme/if0beqI-what-the-heck-just-happened">
	      
	        <img 
	          data-src="/binary/if0beqI-what-the-heck-just-happened.png" 
	          alt="What the heck just happened?" 
	          loading="lazy"
	          width="1020"
	          height="1194"
	          style="aspect-ratio: 1020/1194;">
	      
	      <div class="meme-title">What the heck just happened?</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="10989" style="background-color: #33FF57;">
	    <a href="/meme/C5BNpc3-i-hope-youre-wealthy-because-taxes-are-about-to-skyrocket">
	      
	        <img 
	          data-src="/binary/C5BNpc3-i-hope-youre-wealthy-because-taxes-are-about-to-skyrocket.jpeg" 
	          alt="I Hope You&#39;re Wealthy Because Taxes Are About to Skyrocket!" 
	          loading="lazy"
	          width="1290"
	          height="1673"
	          style="aspect-ratio: 1290/1673;">
	      
	      <div class="meme-title">I Hope You&#39;re Wealthy Because Taxes Are About to Skyrocket!</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="11345" style="background-color: #3357FF;">
	    <a href="/meme/zMX0ytg-the-face-that-signals-the-end-of-the-world">
	      
	        <img 
	          data-src="/binary/zMX0ytg-the-face-that-signals-the-end-of-the-world.jpeg" 
	          alt="The face that signals the end of the world." 
	          loading="lazy"
	          width="180"
	          height="188"
	          style="aspect-ratio: 180/188;">
	      
	      <div class="meme-title">The face that signals the end of the world.</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="12408" style="background-color: #33FF57;">
	    <a href="/meme/lOfN8gw-a-mysterious-date-with-cryptic-symbols">
	      
	        <img 
	          data-src="/binary/lOfN8gw-a-mysterious-date-with-cryptic-symbols.png" 
	          alt="A Mysterious Date with Cryptic Symbols" 
	          loading="lazy"
	          width="1280"
	          height="960"
	          style="aspect-ratio: 1280/960;">
	      
	      <div class="meme-title">A Mysterious Date with Cryptic Symbols</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="13580" style="background-color: #F39C12;">
	    <a href="/meme/E2eBaKm-the-battle-against-gun-culture-a-turning-point">
	      
	        <img 
	          data-src="/binary/E2eBaKm-the-battle-against-gun-culture-a-turning-point.png" 
	          alt="The Battle Against Gun Culture: A Turning Point" 
	          loading="lazy"
	          width="521"
	          height="366"
	          style="aspect-ratio: 521/366;">
	      
	      <div class="meme-title">The Battle Against Gun Culture: A Turning Point</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="15046" style="background-color: #F39C12;">
	    <a href="/meme/BwsfuJ4-celebrating-16-years-of-imgur-happy-birthday">
	      
	        <img 
	          data-src="/binary/BwsfuJ4-celebrating-16-years-of-imgur-happy-birthday.jpeg" 
	          alt="Celebrating 16 Years of Imgur: Happy Birthday!" 
	          loading="lazy"
	          width="2048"
	          height="1536"
	          style="aspect-ratio: 2048/1536;">
	      
	      <div class="meme-title">Celebrating 16 Years of Imgur: Happy Birthday!</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="16138" style="background-color: #3357FF;">
	    <a href="/meme/EZ5EK8I-spinning-like-a-rotisserie-chicken">
	      
	        <img 
	          data-src="/binary/EZ5EK8I-spinning-like-a-rotisserie-chicken.jpeg" 
	          alt="Spinning Like a Rotisserie Chicken" 
	          loading="lazy"
	          width="1080"
	          height="1163"
	          style="aspect-ratio: 1080/1163;">
	      
	      <div class="meme-title">Spinning Like a Rotisserie Chicken</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="16649" style="background-color: #E74C3C;">
	    <a href="/meme/XQQzVfK-the-countdown-to-retirement-has-begun">
	      
	        <img 
	          data-src="/binary/XQQzVfK-the-countdown-to-retirement-has-begun.jpeg" 
	          alt="The Countdown to Retirement Has Begun" 
	          loading="lazy"
	          width="599"
	          height="788"
	          style="aspect-ratio: 599/788;">
	      
	      <div class="meme-title">The Countdown to Retirement Has Begun</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="18144" style="background-color: #1ABC9C;">
	    <a href="/meme/BrE80cL-its-a-game-changer-revolutionary-ideas-unleashed">
	      
	        <img 
	          data-src="/binary/BrE80cL-its-a-game-changer-revolutionary-ideas-unleashed.jpeg" 
	          alt="It’s a Game-Changer: Revolutionary Ideas Unleashed!" 
	          loading="lazy"
	          width="1080"
	          height="1004"
	          style="aspect-ratio: 1080/1004;">
	      
	      <div class="meme-title">It’s a Game-Changer: Revolutionary Ideas Unleashed!</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="19935" style="background-color: #E67E22;">
	    <a href="/meme/5414ZRT-hands-off-my-mug">
	      
	        <img 
	          data-src="/binary/5414ZRT-hands-off-my-mug.jpeg" 
	          alt="Hands Off My Mug!" 
	          loading="lazy"
	          width="3024"
	          height="4032"
	          style="aspect-ratio: 3024/4032;">
	      
	      <div class="meme-title">Hands Off My Mug!</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="21528" style="background-color: #33FF57;">
	    <a href="/meme/2vruZ9l-its-snowing-like-the-heavens-are-showering-us-with-snowflakes">
	      
	        <video 
	          draggable="false" 
	          playsinline 
	          autoplay 
	          loop 
	          muted 
	          preload="none" 
	          title="It’s snowing like the heavens are showering us with snowflakes!"
	          width="480"
	          height="854"
	          style="width: 100%; height: auto; aspect-ratio: 480/854;">
	          <source data-src="/binary/2vruZ9l-its-snowing-like-the-heavens-are-showering-us-with-snowflakes.mp4" type="video/mp4">
	          Your browser does not support the video tag.
	        </video>
	      
	      <div class="meme-title">It’s snowing like the heavens are showering us with snowflakes!</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="23436" style="background-color: #E74C3C;">
	    <a href="/meme/QX2SlWk-mb-acc-ii-hoses-a-closer-look">
	      
	        <img 
	          data-src="/binary/QX2SlWk-mb-acc-ii-hoses-a-closer-look.png" 
	          alt="MB ACC II hoses: A closer look." 
	          loading="lazy"
	          width="869"
	          height="1139"
	          style="aspect-ratio: 869/1139;">
	      
	      <div class="meme-title">MB ACC II hoses: A closer look.</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="24721" style="background-color: #1ABC9C;">
	    <a href="/meme/Jl48lg8-my-sixteenth-favorite-the-fascinating-magnus-effect">
	      
	        <video 
	          draggable="false" 
	          playsinline 
	          autoplay 
	          loop 
	          muted 
	          preload="none" 
	          title="My Sixteenth Favorite: The Fascinating Magnus Effect"
	          width="718"
	          height="404"
	          style="width: 100%; height: auto; aspect-ratio: 718/404;">
	          <source data-src="/binary/Jl48lg8-my-sixteenth-favorite-the-fascinating-magnus-effect.mp4" type="video/mp4">
	          Your browser does not support the video tag.
	        </video>
	      
	      <div class="meme-title">My Sixteenth Favorite: The Fascinating Magnus Effect</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="25733" style="background-color: #E74C3C;">
	    <a href="/meme/chz4JDl-behind-the-scenes-at-cloudy-pass-raceway">
	      
	        <img 
	          data-src="/binary/chz4JDl-behind-the-scenes-at-cloudy-pass-raceway.png" 
	          alt="Behind the scenes at Cloudy Pass Raceway" 
	          loading="lazy"
	          width="1786"
	          height="1430"
	          style="aspect-ratio: 1786/1430;">
	      
	      <div class="meme-title">Behind the scenes at Cloudy Pass Raceway</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="28109" style="background-color: #3498DB;">
	    <a href="/meme/VBepQhn-the-ultimate-sttng-episode-dare-to-challenge-my-opinion">
	      
	        <video 
	          draggable="false" 
	          playsinline 
	          autoplay 
	          loop 
	          muted 
	          preload="none" 
	          title="The Ultimate STTNG Episode: Dare to Challenge My Opinion!"
	          width="854"
	          height="634"
	          style="width: 100%; height: auto; aspect-ratio: 854/634;">
	          <source data-src="/binary/VBepQhn-the-ultimate-sttng-episode-dare-to-challenge-my-opinion.mp4" type="video/mp4">
	          Your browser does not support the video tag.
	        </video>
	      
	      <div class="meme-title">The Ultimate STTNG Episode: Dare to Challenge My Opinion!</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="28235" style="background-color: #E67E22;">
	    <a href="/meme/PQi12H2-witty-one-liners-that-will-make-you-smile">
	      
	        <img 
	          data-src="/binary/PQi12H2-witty-one-liners-that-will-make-you-smile.jpeg" 
	          alt="Witty One-Liners That Will Make You Smile" 
	          loading="lazy"
	          width="526"
	          height="709"
	          style="aspect-ratio: 526/709;">
	      
	      <div class="meme-title">Witty One-Liners That Will Make You Smile</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="29721" style="background-color: #E67E22;">
	    <a href="/meme/5xNjGrZ-a-steaming-bowl-of-noodles-for-just-4">
	      
	        <video 
	          draggable="false" 
	          playsinline 
	          autoplay 
	          loop 
	          muted 
	          preload="none" 
	          title="A Steaming Bowl of Noodles for Just $4!"
	          width="480"
	          height="854"
	          style="width: 100%; height: auto; aspect-ratio: 480/854;">
	          <source data-src="/binary/5xNjGrZ-a-steaming-bowl-of-noodles-for-just-4.mp4" type="video/mp4">
	          Your browser does not support the video tag.
	        </video>
	      
	      <div class="meme-title">A Steaming Bowl of Noodles for Just $4!</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="31445" style="background-color: #33FF57;">
	    <a href="/meme/prtEYCK-a-reflection-on-immigrants">
	      
	        <img 
	          data-src="/binary/prtEYCK-a-reflection-on-immigrants.jpeg" 
	          alt="A Reflection on Immigrants" 
	          loading="lazy"
	          width="960"
	          height="922"
	          style="aspect-ratio: 960/922;">
	      
	      <div class="meme-title">A Reflection on Immigrants</div>
	    </a>
	  </div>
	  
	
	  <div class="meme" data-id="32084" style="background-color: #3357FF;">
	    <a href="/meme/JymOzNR-introducing-the-new-mug-baby">
	      
	        <img 
	          data-src="/binary/JymOzNR-introducing-the-new-mug-baby.jpeg" 
	          alt="Introducing the New Mug Baby!" 
	          loading="lazy"
	          width="2992"
	          height="2992"
	          style="aspect-ratio: 2992/2992;">
	      
	      <div class="meme-title">Introducing the New Mug Baby!</div>
	    </a>
	  </div>
	  
	
  </div>

  <!-- Loader indicator for infinite scroll -->
 <!--<div id="loader" style="text-align: center; padding: 20px;">Loading more memes...</div>-->
  <!--<div id="loader">Loading more memes...</div>-->
	<div id="loader">
	  <span style="display:block;">
	    <img src="/static/ninja-loading.gif" width="70" alt="Loading">
	  </span>
	  <span style="display:block;">Loading...</span>
	</div>

  <!-- JavaScript for Lazy Loading and Infinite Scroll -->
  <script>
    // Function to lazy load images and videos
    function loadMedia(media) {
      const tagName = media.tagName.toLowerCase();
      if (tagName === 'img') {
        media.src = media.getAttribute('data-src');
        media.onload = function() {
          media.classList.add('loaded');
        };
      } else if (tagName === 'video') {
        const source = media.querySelector('source');
        if (source) {
          source.src = source.getAttribute('data-src');
          media.load();
          media.onloadeddata = function() {
            media.classList.add('loaded');
          };
        }
      }
    }

    // Intersection Observer for lazy loading
    let mediaObserver;
    document.addEventListener("DOMContentLoaded", function() {
      mediaObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            loadMedia(entry.target);
            observer.unobserve(entry.target);
          }
        });
      }, { rootMargin: "0px 0px 200px 0px" });
      
	  document.querySelectorAll('img[data-src], video').forEach(media => {
	    if (media.getBoundingClientRect().top < window.innerHeight) {
	      loadMedia(media);
	    } else {
	      mediaObserver.observe(media);
	    }
	  });
    });

    // Infinite scroll for the tag page
    let isLoading = false;
    const loader = document.getElementById('loader');
    const gallery = document.getElementById('gallery');

	function loadMoreMemes() {
	  if (isLoading) return;
	  isLoading = true;

	  // Get the last meme's production_id for pagination
	  const memeElements = document.querySelectorAll('#gallery .meme');
	  const lastMeme = memeElements[memeElements.length - 1];
	  const lastId = lastMeme ? lastMeme.getAttribute('data-id') : "";

	  // Fetch more memes using production_id as the pagination token
	  fetch(`/load_more_tag?last_id=${encodeURIComponent(lastId)}&tag=${encodeURIComponent("photo")}`)
	    .then(response => response.json())
	    .then(data => {
	      if (data.length === 0) {
	        loader.style.display = 'none';
	        isLoading = false;
	        return;
	      }
	      data.forEach(meme => {
	        const colors = ['#FF5733', '#33FF57', '#3357FF', '#F39C12', '#9B59B6', '#1ABC9C', '#E74C3C', '#2ECC71', '#3498DB', '#E67E22'];
	        const randomColor = colors[Math.floor(Math.random() * colors.length)];
	        const memeDiv = document.createElement('div');
	        memeDiv.classList.add('meme');
	        // Use production_id here
	        memeDiv.setAttribute('data-id', meme.meme_id);
	        memeDiv.style.backgroundColor = randomColor;
	        let innerHTML = '';
	        if (meme.local_file_path.endsWith('.mp4')) {
	          innerHTML = `<a href="/meme/${meme.shortener}-${meme.slug}">
	                        <video draggable="false" playsinline autoplay loop muted preload="none" title="${meme.title}" 
	                               width="${meme.width}" height="${meme.height}" 
	                               style="width: 100%; height: auto; aspect-ratio: ${meme.width}/${meme.height};">
	                          <source data-src="/binary/${meme.local_file_path.substring(5)}" type="video/mp4">
	                          Your browser does not support the video tag.
	                        </video>
	                        <div class="meme-title">${meme.title}</div>
	                      </a>`;
	        } else {
	          innerHTML = `<a href="/meme/${meme.shortener}-${meme.slug}">
	                        <img data-src="/binary/${meme.local_file_path.substring(5)}" alt="${meme.title}" loading="lazy"
	                             width="${meme.width}" height="${meme.height}" 
	                             style="aspect-ratio: ${meme.width}/${meme.height};">
	                        <div class="meme-title">${meme.title}</div>
	                      </a>`;
	        }
	        memeDiv.innerHTML = innerHTML;
	        gallery.appendChild(memeDiv);
	      });
	      // Observe newly added media elements for lazy loading
	      document.querySelectorAll('#gallery img[data-src]:not(.loaded), #gallery video:not(.loaded)').forEach(media => {
	        mediaObserver.observe(media);
	      });
	      isLoading = false;
	    })
	    .catch(err => {
	      console.error("Error loading more memes:", err);
	      isLoading = false;
	    });
	}
 

    // Use an Intersection Observer to trigger infinite scroll when the loader is in view
    const observer = new IntersectionObserver((entries, obs) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          loadMoreMemes();
        }
      });
    }, { rootMargin: "0px 0px 100px 0px" });

    observer.observe(loader);
  </script>

  </main>

  <footer>
    <p>&copy; 2025 <span class="normal">meme</span><span class="highlight">.am</span>. All rights reserved.</p>
<ul class="footer-links">
  <li><a href="https://calculator.now/" target="_blank" rel="noopener noreferrer"><i class="fas fa-calculator"></i>Online Calculators</a></li>
  <li><a href="https://audioconverters.co" target="_blank" rel="noopener noreferrer"><i class="fas fa-music"></i>Audio Converter</a></li>
  <li><a href="https://jpg.now/" target="_blank" rel="noopener noreferrer"><i class="fas fa-file-image"></i>JPG Converter</a></li>
  <li><a href="https://heic.now/" target="_blank" rel="noopener noreferrer"><i class="fas fa-images"></i>HEIC Converter</a></li>
  <li><a href="https://whatsmyip.now/" target="_blank" rel="noopener noreferrer"><i class="fas fa-network-wired"></i>Whatsmyip</a></li>
  <li><a href="https://coloring-pages.com" target="_blank" rel="noopener noreferrer"><i class="fas fa-paint-brush"></i>Coloring Pages</a></li>
</ul>
  </footer>	

  <script>
    // When the user scrolls down, collapse the banner ad.
    document.addEventListener('scroll', function() {
      const banner = document.getElementById('banner-ad');
      if (banner) {
        if (window.scrollY > 50) {
          banner.style.maxHeight = '0';
        } else {
          banner.style.maxHeight = '100px';
        }
      }
    });

    // Toggle function for desktop More Tags button
    function toggleTags() {
      const tagsWrapper = document.getElementById('tags-wrapper');
      const button = document.getElementById('more-tags-button');
      if (tagsWrapper.classList.contains('expanded')) {
        tagsWrapper.classList.remove('expanded');
        button.textContent = '▼ MORE TAGS ▼';
      } else {
        tagsWrapper.classList.add('expanded');
        button.textContent = '▲ LESS TAGS ▲';
      }
    }
  </script>
<script>
	// Function to generate user icon based on username or profile picture
	document.addEventListener('DOMContentLoaded', function() {
	  // Get all user buttons
	  const userButtons = document.querySelectorAll('.user-button');
  
	  userButtons.forEach(button => {
	    const userIcon = button.querySelector('.user-icon');
	    const username = userIcon.getAttribute('data-username') || '';
	    const profilePicUrl = userIcon.getAttribute('data-profile-pic');
    
	    if (profilePicUrl && profilePicUrl !== 'None' && profilePicUrl !== '') {
	      // User has a profile picture
	      userIcon.classList.add('with-image');
	      userIcon.src = profilePicUrl;
	      userIcon.alt = username || 'User';
	    } else {
	      // No profile picture, create a letter avatar
	      userIcon.removeAttribute('src');
      
	      // Create a div for the letter avatar
	      const avatarDiv = document.createElement('div');
	      avatarDiv.className = 'user-icon';
      
	      // Get the first letter of the username, default to 'U' if username is empty
	      const firstLetter = username ? username.charAt(0).toUpperCase() : 'U';
	      avatarDiv.textContent = firstLetter;
      
	      // Replace the img element with the div
	      button.replaceChild(avatarDiv, userIcon);
	    }
	  });
  
	  // Add hover effect for dropdown
	  const dropdowns = document.querySelectorAll('.user-dropdown');
	  dropdowns.forEach(dropdown => {
	    const dropdownContent = dropdown.querySelector('.dropdown-content');
    
	    dropdown.addEventListener('mouseenter', () => {
	      dropdownContent.style.display = 'block';
	      setTimeout(() => {
	        dropdownContent.style.opacity = '1';
	        dropdownContent.style.transform = 'translateY(5px)';
	      }, 10);
	    });
    
	    dropdown.addEventListener('mouseleave', () => {
	      dropdownContent.style.opacity = '0';
	      dropdownContent.style.transform = 'translateY(10px)';
	      setTimeout(() => {
	        dropdownContent.style.display = 'none';
	      }, 300);
	    });
	  });
	});
</script>
<script>
  // When the upload icon is clicked, open the file selection dialog
  document.addEventListener('DOMContentLoaded', function() {
    const mobileUploadIcon = document.getElementById('mobileUploadIcon');
    const mobileUploadInput = document.getElementById('mobileUploadInput');
    
    if (mobileUploadIcon && mobileUploadInput) {
      mobileUploadIcon.addEventListener('click', function() {
        mobileUploadInput.click();
      });
    
      // When a file is selected, upload it directly
      mobileUploadInput.addEventListener('change', function() {
        var file = this.files[0];
        if (file) {
          var formData = new FormData();
          // Append the file with the name "meme" to match your backend expectation
          formData.append('meme', file);
    
          // Use fetch API to POST the file
          fetch('/upload', {
            method: 'POST',
            body: formData
          })
          .then(response => {
            // If the response is a redirect (as your /upload route does on success), follow it
            if (response.redirected) {
              window.location.href = response.url;
              return;
            }
            // Otherwise, parse the JSON (which might contain error info)
            return response.json();
          })
          .then(data => {
            // Handle error response, if any
            if (data && data.error) {
              alert("Error uploading file: " + data.error);
            }
          })
          .catch(error => {
            console.error("Upload error:", error);
            alert("Upload failed.");
          });
        }
      });
    }
  });
</script>
  <script>
    // Function to toggle sidebar search
    function toggleSidebarSearch(event) {
      event.preventDefault();
      const searchContainer = document.getElementById('sidebar-search-container');
    
      if (searchContainer) {
        // Toggle visibility
        const isVisible = searchContainer.style.display !== 'none' && searchContainer.style.display !== '';
        searchContainer.style.display = isVisible ? 'none' : 'block';
      
        // Focus the input if showing
        if (!isVisible) {
          setTimeout(() => {
            const input = searchContainer.querySelector('input');
            if (input) input.focus();
          }, 10);
        }
      }
    }
  
    // Ensure the search function works for all forms
    function handleSearch(event) {
      event.preventDefault();
      const input = event.target.querySelector('input');
      if (!input) return;
    
      const query = input.value.trim();
      if (query === "") return;
    
      window.location.href = '/search/' + encodeURIComponent(query);
    }
  
    // Make the functions available globally
    window.toggleSidebarSearch = toggleSidebarSearch;
    window.handleSearch = handleSearch;
  
    // Attach event listeners when the DOM is loaded
    document.addEventListener('DOMContentLoaded', function() {
      // Add event listeners to all search forms
      const searchForms = document.querySelectorAll('.sidebar-search-form form, #header-search-form');
      searchForms.forEach(form => {
        form.addEventListener('submit', handleSearch);
      });
    });
  </script>

</body>
</html>