/* =============================================
   SPIDER-MAN COMIC INVITE — ENHANCED THEME
   Fonts: Bangers (headlines), Inter (body)
   Icons: Tabler Icons (ti-*)
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.3.0/tabler-icons.min.css');

/* ─── RESET & BASE ─────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --spider-red:    #cc1111;
  --spider-blue:   #0052a3;
  --spider-gold:   #f5c400;
  --spider-dark:   #0a0a0a;
  --spider-white:  #fdfaf2;
  --ink:           #0a0a0a;
  --ink-light:     #1a1a2e;
  --halftone-size: 9px;
  --panel-radius:  2px;
  --border-width:  3px;
  --border-thick:  5px;
}



/* dark overlay */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:-1;
}

body{
    margin:0;
    font-family:'Inter', Arial, sans-serif;
    background:
        radial-gradient(circle,#ffffff12 1px,transparent 1px),
        linear-gradient(135deg,#111 0%,#1b1b1b 100%);
    background-size:12px 12px,100% 100%;
}

/* VIDEO BACKGROUND */
.bg-video{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-2;
    overflow:hidden;
}

.bg-video video{
    width:100%;
    height:100%;
    object-fit:cover;
}

img{
    max-width:100%;
    display:block;
}

/* ─── UTILITY: HALFTONE BACKGROUND ────────── */
.halftone {
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.22) 1.2px, transparent 1.2px);
  background-size: var(--halftone-size) var(--halftone-size);
}

/* ─── MAIN WRAPPER ─────────────────────────── */


/* ─── PANEL (generic section block) ─────────── */
.panel {
  border: var(--border-width) solid var(--ink);
  margin: 6px;
  background: var(--spider-white);
  border-radius: var(--panel-radius);
}

/* ─── SECTION TITLE BAR ──────────────────── */
.title {
  font-family: 'Bangers', cursive;
  background: var(--spider-blue);
  color: var(--spider-gold);
  text-align: center;
  font-size: 24px;
  letter-spacing: 1.5px;
  padding: 8px 12px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.45);
  border-bottom: var(--border-width) solid var(--ink);
}

/* ─── HERO / COVER HEADER ───────────────── */
.comic-top,
.hero {
  background-color: var(--spider-red);
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.20) 1.2px, transparent 1.2px),
    linear-gradient(135deg, var(--spider-red) 0 50%, var(--spider-blue) 50% 100%);
  background-size: var(--halftone-size) var(--halftone-size), 100% 100%;
  padding: 24px 20px;
  text-align: center;
  border-bottom: var(--border-thick) solid var(--ink);
  position: relative;
}

.about-panel{
    background:#fdfaf2;
}

.about-text{
    flex:1;
    background:
    radial-gradient(circle,#00000022 1px,transparent 1px),
    #e31b23;
    background-size:8px 8px;
    border:4px solid #000;
    padding:14px;
    color:white;
    box-shadow:4px 4px #000;
}

.hero-tag{
    display:inline-block;
    background:#ffe600;
    color:#000;
    border:3px solid #000;
    padding:6px 10px;
    font-family:Bangers,cursive;
    font-size:18px;
    letter-spacing:1px;
    margin-bottom:10px;
}

.about-text h2{
    font-family:Bangers,cursive;
    font-size:42px;
    line-height:.95;
    margin:8px 0;
    color:#fff;
    text-shadow:3px 3px #000;
    letter-spacing:1px;
}

.about-text p{
    font-size:16px;
    line-height:1.7;
    font-weight:bold;
    margin-top:12px;
}

.mini-pow{
    margin-top:14px;
    background:#0057b8;
    border:3px solid #000;
    color:#ffe600;
    text-align:center;
    padding:8px;
    font-family:Bangers,cursive;
    font-size:26px;
    text-shadow:2px 2px #000;
    box-shadow:3px 3px #000;
}

.hero {
  height: auto;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

/* ─── COVER / HERO TYPOGRAPHY ───────────── */
.invite-text {
  font-family: 'Bangers', cursive;
  color: white;
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  margin-bottom: 4px;
}

.hero h1 {
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  margin-bottom: 8px;
}

.main-name,
.name {
  font-family: 'Bangers', cursive;
  line-height: 0.92;
  margin: 8px 0 12px;
  text-shadow: 5px 5px 0 rgba(0,0,0,0.55);
}

.main-name { font-size: 76px; }
.name      { font-size: 64px; }

.main-name .white,
.name .white { color: var(--spider-white); }
.main-name .blue,
.name .blue  { color: #5faaff; }
.main-name .red,
.name .red   { color: #ff6060; }

/* ─── EVENT BANNER / RIBBON ─────────────── */
.event-banner,
.ribbon {
  display: inline-block;
  background: var(--spider-red);
  color: white;
  padding: 8px 20px;
  border: var(--border-width) solid var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 14px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
}

/* ─── POW / ACTION TEXT ──────────────────── */
.pow-section,
.pow {
  font-family: 'Bangers', cursive;
  color: var(--spider-gold);
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.55);
  letter-spacing: 3px;
}

.pow-section {
  background: var(--spider-blue);
  font-size: 80px;
  padding: 12px 0;
  border-top: var(--border-thick) solid var(--ink);
  border-bottom: var(--border-thick) solid var(--ink);
}

.pow { font-size: 56px; }

/* ─── COMIC GRID (2-col photo panels) ────── */
.comic-cover {
  background: white;
  border: var(--border-thick) solid var(--ink);
  overflow: hidden;
}

.comic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  background: var(--spider-white);
}

.comic-box {
  border: var(--border-width) solid var(--ink);
  overflow: hidden;
  background: var(--spider-blue);
}

.comic-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spiderman-box { height: 240px; }
.baby-box      { height: 240px; }



.rsvp-success{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    background:#ffe600 !important;
    color:#000 !important;
    border:4px solid #000 !important;
    padding:18px !important;
    text-align:center;
    box-shadow:5px 5px #000;
    margin-bottom:20px;
}

.rsvp-success .guest-list-link{
    display:block;
    width:100%;
    max-width:260px;
    margin:0 auto;
    background:#cc1111 !important;
    color:#fff !important;
    border:4px solid #000;
    padding:12px;
    text-decoration:none !important;
    font-family:Bangers,cursive;
    font-size:22px;
    letter-spacing:1px;
    box-shadow:4px 4px #000;
    text-align:center;
}

@media(max-width:600px){
    .rsvp-success{
        padding:14px !important;
    }

    .rsvp-success p{
        font-size:14px;
    }

    .rsvp-success .guest-list-link{
        font-size:20px;
        max-width:100%;
    }
}



/* ─── BOTTOM GALLERY (3-col) ────────────── */




/* ─── GALLERY (3-col generic) ───────────── */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.pic {
  height: 90px;
  background: #ddd;
  border: var(--border-width) solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ink);
  font-size: 24px;
}

/* ─── CONTENT AREA ──────────────────────── */
.content {
  padding: 14px;
  color: var(--ink);
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ─── BOX (info card) ────────────────────── */
.box {
  border: var(--border-width) solid var(--ink);
  padding: 14px 12px;
  min-height: 90px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
  border-radius: var(--panel-radius);
  background: #f8f6ee;
  color: var(--ink);
}

.box .icon {
  display: block;
  font-size: 26px;
  margin-bottom: 8px;
  color: var(--spider-blue);
}

.box b,
.box strong {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

/* ─── SEMANTIC COLOR BOXES ───────────────── */
.box.red    { background: var(--spider-red);  color: white; }
.box.blue   { background: var(--spider-blue); color: white; }
.box.yellow { background: var(--spider-gold); color: var(--ink); }

.box.red .icon  { color: rgba(255,255,255,0.85); }
.box.blue .icon { color: rgba(255,255,255,0.85); }
.box.yellow .icon { color: var(--ink); }

/* ─── ABOUT / PHOTO SECTION ─────────────── */
.about{
    display:grid;
    grid-template-columns:1.2fr .9fr;
    gap:12px;
    align-items:stretch;
}
.about-text{
    background:
    radial-gradient(circle,#00000022 1px,transparent 1px),
    #e31b23;
    background-size:8px 8px;
    border:4px solid #000;
    padding:14px;
    color:white;
    box-shadow:4px 4px #000;
    text-align:center;
}

.inside-photo{
    width:100%;

    border:4px solid #000;
    overflow:hidden;
    margin:12px 0;
    background:#fff;
}

.inside-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
}
.about-text h2{
    font-family:Bangers,cursive;
    font-size:38px;
    line-height:.95;
    margin:10px 0;
    color:#fff;
    text-shadow:3px 3px #000;
}


.about-text{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.photo{
    width:100%;
    height:100%;
    min-height:320px;
}

.photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.photo {
  width: 136px;
  height: 176px;
  border: var(--border-width) solid var(--ink);
  overflow: hidden;
  background: #ddd;
  flex-shrink: 0;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.spidey-img {
  padding: 0;
  overflow: hidden;
}

.spidey-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── VENUE CARD ────────────────────────── */
.venue-card {
  border: var(--border-width) solid var(--ink);
  padding: 16px 14px;
  margin-bottom: 14px;
  color: white;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}

.venue-card .venue-icon {
  font-size: 28px;
  margin-bottom: 8px;
  color: var(--spider-gold);
  display: block;
}

.venue-card h2 {
  font-family: 'Bangers', cursive;
  font-size: 30px;
  margin: 10px 0 6px;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}

.venue-card p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
}

.venue-img {
  width: 100%;
  height: 176px;
  object-fit: cover;
  border: var(--border-width) solid var(--ink);
  display: block;
}

.venue-card.blue{
    background:#0052a3;
    color:white;
}

.venue-card.red{
    background:#cc1111;
    color:white;
}

.map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: var(--spider-gold);
  color: var(--ink);
  text-decoration: none;
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 1px;
  padding: 12px;
  border: var(--border-width) solid var(--ink);
  margin-top: 14px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
  transition: transform 0.1s, box-shadow 0.1s;
}

.map-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
}

.map-btn i {
  font-size: 22px;
}

/* ─── GODPARENTS SECTION ─────────────────── */
.godparents-panel {
  background: var(--spider-white);
}

.god-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}

.god-column {
  border: var(--border-width) solid var(--ink);
  padding: 8px;
  position: relative;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  border-radius: var(--panel-radius);
}

.blue-bg { background: var(--spider-blue); }
.red-bg  { background: var(--spider-red); }

.god-header {
  background: var(--spider-gold);
  color: var(--ink);
  border: 2px solid var(--ink);
  text-align: center;
  font-family: 'Bangers', cursive;
  font-size: 20px;
  letter-spacing: 1.5px;
  padding: 7px 10px;
  margin-bottom: 8px;
}

.god-card {
  background: var(--spider-white);
  border: 2px solid var(--ink);
  padding: 8px;
  margin-bottom: 6px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.18);
  flex: 1;
  transition: transform 0.1s;
}

.god-card:last-child { margin-bottom: 0; }
.god-card:hover { transform: scale(1.02); }

/* ─── EVENT DETAILS SECTION ───────────────── */

.event-panel{
    background:#fdfaf2;
}

.event-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    align-items:stretch;
}

.event-photo{
    border:4px solid #000;
    overflow:hidden;
    background:#0057b8;
    box-shadow:4px 4px #000;
    min-height:320px;
}

.event-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.event-info{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.event-card{
    flex:1;
    border:4px solid #000;
    padding:18px 14px;
    color:white;
    text-align:center;
    box-shadow:4px 4px #000;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.blue-card{
    background:
    radial-gradient(circle,#ffffff22 1px,transparent 1px),
    #0057b8;
    background-size:8px 8px;
}

.red-card{
    background:
    radial-gradient(circle,#ffffff22 1px,transparent 1px),
    #e31b23;
    background-size:8px 8px;
}

.event-card h2{
    font-family:Bangers,cursive;
    font-size:30px;
    line-height:1;
    margin-bottom:14px;
    letter-spacing:1px;
    text-shadow:3px 3px #000;
}

.event-date{
    font-size:18px;
    font-weight:bold;
    letter-spacing:.5px;
}

.event-time{
    margin-top:14px;
    background:#ffe600;
    color:#000;
    border:3px solid #000;
    padding:8px;
    font-family:Bangers,cursive;
    font-size:24px;
    letter-spacing:1px;
    box-shadow:3px 3px #000;
}



/* GIFT GUIDE */
.gift-panel{
    background:#fdfaf2;
}

.gift-box{
    background:
    radial-gradient(circle,#00000022 1px,transparent 1px),
    #ffe600;
    background-size:8px 8px;
    color:#000;
    text-align:center;
    border:4px solid #000;
    box-shadow:4px 4px #000;
}

.gift-image,
.dress-image{
    width:100%;
    aspect-ratio:16/9;
    height:auto;
    border:4px solid #000;
    overflow:hidden;
    background:#fff;
    margin-bottom:15px;
}

.gift-image img,
.dress-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.gift-title{
    font-family:Bangers,cursive;
    font-size:38px;
    line-height:1;
    margin-bottom:14px;
    letter-spacing:1px;
    text-shadow:2px 2px #fff;
}

.gift-text{
    font-size:16px;
    line-height:1.7;
    font-weight:600;
}

.gift-text b{
    display:inline;
    font-weight:800;
}

.gift-note{
    background:#fff;
    border:3px solid #000;
    padding:12px;
    margin:16px 0;
    font-size:15px;
    line-height:1.6;
    font-weight:700;
    box-shadow:3px 3px #000;
}

.gift-small{
    font-size:14px;
    line-height:1.6;
    font-weight:600;
}

/* DRESS CODE + HEALTH */
.reminder-panel{
    background:#fdfaf2;
}

.reminder-box{
    background:
    radial-gradient(circle,#ffffff22 1px,transparent 1px),
    #0057b8;
    background-size:8px 8px;
    color:#fff;
    text-align:center;
    border:4px solid #000;
    box-shadow:4px 4px #000;
}

.reminder-title{
    font-family:Bangers,cursive;
    font-size:38px;
    line-height:1;
    margin-bottom:14px;
    letter-spacing:1px;
    color:#ffe600;
    text-shadow:3px 3px #000;
}

.dress-code{
    background:#fff;
    color:#000;
    border:3px solid #000;
    padding:12px;
    font-size:17px;
    font-weight:800;
    letter-spacing:1px;
    box-shadow:3px 3px #000;
}

.reminder-line{
    margin:20px 0;
    border:2px solid rgba(255,255,255,.8);
}

.health-text{
    font-size:15px;
    line-height:1.7;
    font-weight:600;
}

.health-list{
    margin-top:14px;
    display:grid;
    gap:8px;
}

.health-list span{
    background:#fff;
    color:#000;
    border:3px solid #000;
    padding:10px;
    font-size:14px;
    font-weight:700;
    box-shadow:3px 3px #000;
}

.health-footer{
    margin-top:16px;
    font-size:14px;
    line-height:1.6;
    font-weight:600;
}

/* ─── FORM ──────────────────────────────── */
form input,
form select,
form textarea {
  width: 100%;
  padding: 10px 12px;
  margin: 5px 0;
  border: 2px solid var(--ink);
  border-radius: var(--panel-radius);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  background: white;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--spider-blue);
  box-shadow: 0 0 0 3px rgba(0,82,163,0.2);
}

button {
  width: 100%;
  background: var(--spider-blue);
  color: white;
  border: var(--border-width) solid var(--ink);
  padding: 12px;
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.25);
  transition: transform 0.1s, box-shadow 0.1s;
  border-radius: var(--panel-radius);
}

button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.3);
}

button:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

/* ─── SUCCESS MESSAGE ───────────────────── */
.success {
  background: #147a14;
  color: white;
  padding: 12px;
  text-align: center;
  border: var(--border-width) solid var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.success i {
  font-size: 20px;
}

/* ─── FOOTER ────────────────────────────── */
.footer {
  text-align: center;
  padding: 20px 18px;
  color: var(--ink);
}

.footer h2 {
  font-family: 'Bangers', cursive;
  font-size: 38px;
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.12);
}

/* ─── THANK YOU PANEL ────────────────────── */
.thankyou-panel {
  background-color: var(--spider-red);
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.18) 1.2px, transparent 1.2px),
    linear-gradient(135deg, var(--spider-red) 0 50%, var(--spider-blue) 50% 100%);
  background-size: var(--halftone-size) var(--halftone-size), 100% 100%;
  color: white;
  text-align: center;
  padding: 24px 20px;
}

.thankyou-img {
  width: 100%;
  max-width: 270px;
  border: var(--border-thick) solid var(--ink);
  margin-bottom: 14px;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.thankyou-title {
  font-family: 'Bangers', cursive;
  font-size: 48px;
  letter-spacing: 2px;
  color: var(--spider-gold);
  text-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  margin: 10px 0;
}

.thankyou-text {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
  margin-bottom: 18px;
}

.spidey-line {
  background: var(--spider-gold);
  color: var(--ink);
  border: var(--border-width) solid var(--ink);
  padding: 12px 16px;
  font-family: 'Bangers', cursive;
  font-size: 26px;
  letter-spacing: 1.5px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.spidey-line i {
  font-size: 24px;
}

/* ─── ICON UTILITIES (used alongside Tabler) */
.icon-block {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  margin: 6px 0;
}

.icon-block i {
  font-size: 18px;
  flex-shrink: 0;
}

/* ─── WEB SWINGER DIVIDER ────────────────── */
.web-divider {
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--spider-red)   0 6px,
    var(--spider-blue)  6px 12px,
    var(--spider-gold)  12px 18px
  );
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  margin: 0;
}

/* PROFESSIONAL SCROLL ANIMATION */
.reveal{
    opacity:0;
    transform:translateY(35px);
    transition:opacity .7s ease, transform .7s ease;
}

.reveal.show{
    opacity:1;
    transform:translateY(0);
}

/* IMAGE HOVER EFFECT */
img{
    transition:transform .4s ease;
}

.comic-box:hover img,
.venue-card:hover img,
.gift-image:hover img,
.dress-image:hover img,
.thankyou-panel:hover img{
    transform:scale(1.04);
}

/* CARD HOVER EFFECT */
.panel,
.event-card,
.venue-card,
.god-card,
.gift-box,
.reminder-box{
    transition:transform .25s ease, box-shadow .25s ease;
}

.event-card:hover,
.venue-card:hover,
.god-card:hover,
.gift-box:hover,
.reminder-box:hover{
    transform:translateY(-3px);
}

/* ==================================================
   RESPONSIVE DESIGN
================================================== */

/* DESKTOP */

.invite{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

.invite{
    width:95%;
    max-width:1400px;
    margin:auto;
    background:#f4f0e8;
    border-left:12px solid #000;
    border-right:12px solid #000;
    position:relative;
}
.panel{
    width:100%;
    box-sizing:border-box;
}
.about,
.event-layout,
.god-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

/* TABLET */
@media (max-width:900px){

    .invite{
        width:95%;
        max-width:500px;
    }

}

/* MOBILE */
@media (max-width:768px){

    .about,
    .event-layout,
    .god-wrap{
        grid-template-columns:1fr;
    }
   
    .invite{
        width:100%;
        border-left:6px solid #000;
        border-right:6px solid #000;
    }

    .title{
        font-size:20px;
        padding:10px;
    }

    .main-name{
        font-size:58px;
        line-height:.9;
    }

    .event-banner{
        font-size:11px;
        padding:8px 12px;
    }

    /* STACK LAYOUTS */
    .two,
    .about,
    .event-layout,
    .god-wrap,
    .comic-grid{
        grid-template-columns:1fr;
    }

    /* HERO SECTION */
    .comic-box,
    .spiderman-box,
    .baby-box{
        height:auto;
    }

    .comic-box img{
        height:auto;
    }

    .bottom-gallery{
        grid-template-columns:1fr;
    }

    .bottom-gallery img{
        height:auto;
    }

    /* ABOUT */
    .inside-photo{
        height:280px;
    }

    .about-text h2{
        font-size:32px;
    }

    .hero-tag{
        font-size:15px;
    }

    /* EVENT */
    .event-photo{
        min-height:auto;
    }

    .event-card h2{
        font-size:24px;
    }

    .event-time{
        font-size:20px;
    }

    /* VENUE */
    .venue-img{
        height:auto;
    }

    .venue-card h2{
        font-size:26px;
    }

    /* GODPARENTS */
    .god-header{
        font-size:18px;
    }

    .god-card{
        font-size:12px;
    }

    /* GIFT + REMINDER */
    .gift-title,
    .reminder-title{
        font-size:30px;
    }

    

    /* THANK YOU */
    .thankyou-title{
        font-size:38px;
    }

    .spidey-line{
        font-size:20px;
        padding:10px;
    }

    /* FORMS */
    form input,
    form select,
    form textarea,
    button{
        font-size:14px;
    }

}

/* EXTRA SMALL DEVICES */
@media (max-width:400px){

    .main-name{
        font-size:48px;
    }

    .pow-section{
        font-size:58px;
    }

    .gift-title,
    .reminder-title,
    .thankyou-title{
        font-size:26px;
    }

    .event-card h2{
        font-size:22px;
    }

}
/* FIX ABOUT PHOTO RESPONSIVE */
.inside-photo{
    width:100%;
    height:auto;
    aspect-ratio:3 / 4;
}

.inside-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
}

/* mobile */
@media (max-width:600px){
    .inside-photo{
        aspect-ratio:3 / 4;
        height:auto;
    }
}

/* FIX BABY1 + SPIDERMAN BG RESPONSIVE */

/* first page images */
.spiderman-box,
.baby-box{
    height:auto;
    aspect-ratio:3 / 4;
}

.spiderman-box img,
.baby-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
}

/* event spiderman bg */
.event-photo{
    min-height:unset;
    height:auto;
    aspect-ratio:3 / 4;
}

.event-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}

/* mobile */
@media (max-width:768px){

    .spiderman-box,
    .baby-box,
    .event-photo{
        aspect-ratio:3 / 4;
        height:auto;
        min-height:unset;
    }

}

/* FIX BOTTOM GALLERY RESPONSIVE */

.bottom-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}

.bottom-gallery img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
    object-fit:cover;
    object-position:center;
}

/* mobile */
@media (max-width:768px){

    .bottom-gallery{
        grid-template-columns:1fr;
    }

    .bottom-gallery img{
        aspect-ratio:4 / 3;
    }

}

/* UPDATED COUNTDOWN DESIGN */
.countdown-panel{
    background:
    radial-gradient(circle,#00000022 1px,transparent 1px),
    linear-gradient(135deg,#cc1111 0 50%,#0052a3 50% 100%);
    background-size:8px 8px,100% 100%;
    color:#fff;
    text-align:center;
    padding-bottom:14px;
}

.countdown-panel .title{
    background:#0052a3;
    color:#ffe600;
}

.countdown-wrap{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    padding:14px;
}

.count-box{
    background:#fdfaf2;
    border:4px solid #000;
    padding:14px 8px;
    box-shadow:4px 4px #000;
    position:relative;
}

.count-box::before{
    content:"";
    display:none;
}

.count-box span{
    display:block;
    font-family:Bangers,cursive;
    font-size:46px;
    line-height:1;
    color:#cc1111;
    text-shadow:2px 2px #000;
}

.count-box p{
    margin-top:6px;
    font-size:12px;
    font-weight:900;
    color:#000;
    letter-spacing:1px;
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){
    .countdown-wrap{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
        padding:12px;
    }

    .count-box span{
        font-size:38px;
    }
}

@media(max-width:420px){
    .countdown-wrap{
        grid-template-columns:1fr 1fr;
    }

    .count-box{
        padding:12px 6px;
    }

    .count-box span{
        font-size:32px;
    }

    .count-box p{
        font-size:11px;
    }
}

.delete-btn{
    background:#cc1111;
    color:#fff;
    border:3px solid #000;
    padding:8px 12px;
    font-family:Bangers,cursive;
    font-size:18px;
    cursor:pointer;
    box-shadow:3px 3px #000;
}

.delete-btn:hover{
    background:#0052a3;
}

td form{
    margin:0;
}

/* SUPER RESPONSIVE FINAL FIX */

html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.invite{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    border-left:clamp(4px,1vw,12px) solid #000;
    border-right:clamp(4px,1vw,12px) solid #000;
}

.panel{
    margin:clamp(4px,1vw,10px);
}

.content{
    padding:clamp(10px,2vw,20px);
}

.title{
    font-size:clamp(18px,4vw,28px);
}

.main-name{
    font-size:clamp(48px,12vw,96px);
}

.invite-text{
    font-size:clamp(12px,3vw,18px);
}

.event-banner{
    font-size:clamp(11px,2vw,15px);
}

/* all major grids */
.comic-grid,
.event-layout,
.god-wrap,
.countdown-wrap,
.bottom-gallery{
    width:100%;
}

/* images */
.comic-box,
.spiderman-box,
.baby-box,
.event-photo,
.inside-photo,
.gift-image,
.dress-image,
.venue-img{
    width:100%;
}

.comic-box img,
.spiderman-box img,
.baby-box img,
.event-photo img,
.inside-photo img,
.gift-image img,
.dress-image img,
.venue-img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* desktop better layout */
@media(min-width:901px){
    .comic-grid{
        grid-template-columns:1fr 1fr;
    }

    .event-layout,
    .god-wrap{
        grid-template-columns:1fr 1fr;
    }

    .bottom-gallery{
        grid-template-columns:repeat(3,1fr);
    }

    .countdown-wrap{
        grid-template-columns:repeat(4,1fr);
    }
}

/* tablet */
@media(max-width:900px){
    .invite{
        max-width:720px;
    }

    .comic-grid,
    .event-layout,
    .god-wrap{
        grid-template-columns:1fr;
    }

    .bottom-gallery{
        grid-template-columns:1fr 1fr;
    }

    .countdown-wrap{
        grid-template-columns:1fr 1fr;
    }

    .pow-section{
        font-size:clamp(42px,12vw,70px);
    }
}

/* mobile */
@media(max-width:600px){
    body{
        padding:0;
    }

    .invite{
        width:100%;
        border-left:4px solid #000;
        border-right:4px solid #000;
    }

    .panel{
        margin:5px;
    }

    .comic-grid,
    .event-layout,
    .god-wrap,
    .bottom-gallery{
        grid-template-columns:1fr;
    }

    .countdown-wrap{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .spiderman-box,
    .baby-box,
    .event-photo,
    .inside-photo{
        aspect-ratio:3 / 4;
        height:auto;
    }

    .bottom-gallery img{
        aspect-ratio:4 / 3;
    }

    .gift-image,
    .dress-image,
    .venue-img{
        aspect-ratio:16 / 9;
        height:auto;
    }

    .about-text h2,
    .gift-title,
    .reminder-title,
    .thankyou-title{
        font-size:clamp(26px,9vw,38px);
    }

    .spidey-line{
        font-size:clamp(18px,6vw,24px);
        flex-wrap:wrap;
    }

    .rsvp-success .guest-list-link{
        width:100%;
        font-size:clamp(18px,6vw,22px);
    }

    form input,
    form select,
    form textarea,
    button{
        width:100%;
        font-size:15px;
    }
}

/* very small phones */
@media(max-width:380px){
    .countdown-wrap{
        grid-template-columns:1fr;
    }

    .main-name{
        font-size:44px;
    }

    .pow-section{
        font-size:44px;
    }

    .count-box span{
        font-size:30px;
    }
}