/* ================================ CONTACT PAGE — SCROLLABLE Layout: Header (fixed) → CV+Form → Footer → extra scroll space ================================ */ /* Force scrollable page and proper stacking */ html, body { height: auto !important; width: 100%; margin: 0; padding: 0; background: black; color: white; font-family: "Source Code Pro", monospace; display: block !important; overflow-x: hidden; } /* Keep stars as fullscreen background */ /* ================================ CONTACT PAGE — stars + scrolling Header (fixed, from style.css) → CV+Form → Footer Stars remain on #starry-sky (body) as a fixed background ================================ */ /* DO NOT override body#starry-sky here. style.css keeps #starry-sky fixed and behind content for stars. */ /* The whole page content scrolls inside this wrapper */ .contact-scroll-wrapper { position: relative; z-index: 1; /* above the star background */ width: 100%; height: 100vh; /* create an internal scrolling viewport */ overflow-x: hidden; overflow-y: auto; /* scroll here, not on */ background: transparent; padding-bottom: 280px;/* extra scroll space AFTER footer; adjust to taste */ } /* Two-column area, centered under the header */ .contact-page .content-wrapper { max-width: 1200px; width: 100%; margin: 220px auto 60px; /* push CV/form a bit lower under fixed header */ padding: 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; /* CV left, form ~400px right */ gap: 40px; align-items: start; height: auto; /* allow natural height inside the scroller */ box-sizing: border-box; } /* Columns */ .contact-page .resume-column { min-width: 0; } .contact-page .form-column { width: 100%; } /* Headings */ .contact-page .resume-column h2, .contact-page .form-column h1 { color: #fff; font-family: "Source Code Pro", monospace; font-size: 24px; margin: 0 0 10px 0; text-align: left; } /* CV viewer */ .contact-page .resume-widget { margin-bottom: 20px; } .contact-page .resume-widget embed { width: 100%; height: 600px; /* fixed height so wrapper can scroll */ border: none; } /* Contact form */ .contact-page .form-section { display: flex; flex-direction: column; align-items: center; width: 100%; } .contact-page form { width: 100%; max-width: 400px; margin: 0 auto; } .contact-page .feedback-input { color: #fff; font-family: source-code-pro, "Courier New", monospace; font-weight: 500; font-size: 18px; border-radius: 5px; line-height: 22px; background: transparent; border: 2px solid #CC6666; transition: all 0.3s; padding: 13px; margin-bottom: 15px; width: 100%; box-sizing: border-box; outline: 0; } .contact-page .feedback-input:focus { border: 2px solid mediumpurple; } .contact-page textarea { height: 150px; line-height: 150%; resize: vertical; } .contact-page [type="submit"] { font-family: source-code-pro, "Courier New", monospace; width: 100%; background: #CC6666; border-radius: 5px; border: 0; cursor: pointer; color: #fff; font-size: 24px; padding: 10px 0; transition: all 0.3s; margin-top: -4px; font-weight: 700; } .contact-page [type="submit"]:hover { background: mediumpurple; } /* Footer in normal flow; wrapper provides extra scroll room */ .footer { width: 100%; text-align: center; padding: 20px 0; margin-top: 60px; position: relative; }