/* Make receipt background responsive and centered */ #home { background-position: center center !important; background-size: contain !important; background-repeat: no-repeat !important; height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Container that holds invisible buttons */ #home .container { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 400px !important; max-width: 90% !important; padding-top: 180px !important; /* Adjust to align with first receipt item */ } /* Invisible clickable buttons over receipt items */ #home .button { background: transparent !important; border: none !important; color: transparent !important; width: 100% !important; height: 45px !important; /* Height of each receipt line */ margin-bottom: 8px !important; /* Space between items */ cursor: pointer !important; transition: background 0.2s ease !important; } /* Hover effect - subtle highlight */ #home .button:hover { background: rgba(204, 6, 51, 0.05) !important; /* Light red tint */ } /* Back buttons on secondary pages */ .back-button { font-family: 'Courier New', monospace !important; background: transparent !important; color: #cc0033 !important; border: 2px solid #cc0033 !important; padding: 12px 24px !important; font-size: 16px !important; cursor: pointer !important; text-decoration: none !important; } .back-button:hover { background: #cc0033 !important; color: white !important; } /* Receipt-style typography for all sections */ body, h1, h2, h3, p, button, input, textarea { font-family: 'Courier New', Courier, monospace !important; } /* Secondary section styling */ #instagram, #tiktok, #portfolio, #contact { background: #f9f9f9 !important; padding: 60px 20px !important; min-height: 100vh !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* Receipt-style headings */ #instagram h2, #tiktok h2, #portfolio h2, #contact h2 { font-size: 24px !important; color: #333 !important; margin-bottom: 20px !important; text-transform: uppercase !important; letter-spacing: 2px !important; } /* Contact form styling */ #contact form input, #contact form textarea { background: white !important; border: 2px dotted #ccc !important; padding: 12px !important; font-size: 14px !important; width: 100% !important; max-width: 400px !important; margin-bottom: 15px !important; } #contact form button[type="submit"] { background: #cc0033 !important; color: white !important; border: none !important; padding: 15px 40px !important; font-size: 16px !important; cursor: pointer !important; text-transform: uppercase !important; } #contact form button[type="submit"]:hover { background: #990025 !important; } /* Mobile adjustments */ @media screen and (max-width: 768px) { #home .container { width: 90% !important; padding-top: 160px !important; /* Adjust for mobile alignment */ } #home .button { height: 50px !important; /* Larger touch targets on mobile */ margin-bottom: 10px !important; } } /* Smooth scrolling */ html { scroll-behavior: smooth !important; }