:root{
    --maroon:#5b1a1f;
    --burgundy:#7a1e2a;
    --darkred:#3b0d12;
    --gold:#c8a96a;
    --gold-light:#e9d49a;
    --cream:#f6efe3;
    --cream-2:#efe6d2;
    --brown:#3a241a;
    --white:#ffffff;
    --shadow-premium: 0 20px 50px rgba(59,13,18,.25);
    --shadow-soft: 0 10px 30px rgba(59,13,18,.12);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Cormorant Garamond', serif;
    background:var(--cream);
    color:#2b1a14;
    overflow-x:hidden;
    font-size:18px;
    line-height:1.6;
  }
  .serif{font-family:'Cinzel',serif;letter-spacing:2px}
  .script{font-family:'Great Vibes',cursive}
  .sans{font-family:'Poppins',sans-serif}

  /* Background ornamental texture */
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;
    background:
      radial-gradient(1200px 800px at 10% 0%, rgba(200,169,106,.10), transparent 60%),
      radial-gradient(1000px 700px at 90% 100%, rgba(91,26,31,.12), transparent 60%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='%23c8a96a' stroke-opacity='0.07' stroke-width='1'><path d='M110 10 C 150 50, 150 90, 110 110 C 70 90, 70 50, 110 10 Z'/><path d='M110 210 C 150 170, 150 130, 110 110 C 70 130, 70 170, 110 210 Z'/><circle cx='110' cy='110' r='4'/></g></svg>"),
      var(--cream);
    background-size:auto,auto,220px 220px,auto;
  }

  /* ===== LOADING ===== */
  #loader{
    position:fixed;inset:0;background:linear-gradient(135deg,var(--darkred),var(--maroon));
    z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;
    transition:opacity .8s ease, visibility .8s ease;
  }
  #loader.hide{opacity:0;visibility:hidden}
  .loader-ring{
    width:90px;height:90px;border:3px solid rgba(255,255,255,.15);
    border-top-color:var(--gold);border-radius:50%;animation:spin 1.1s linear infinite;
  }
  .loader-text{color:var(--gold-light);margin-top:24px;letter-spacing:6px;font-family:'Cinzel',serif;font-size:14px}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ===== OPENING / LANDING ===== */
  #opening{
    position:fixed;inset:0;z-index:9000;
    background:
      linear-gradient(180deg, rgba(20,7,10,.55), rgba(20,7,10,.75)),
      url("https://images.unsplash.com/photo-1519741497674-611481863552?w=1600") center/cover no-repeat;
    color:#fff;display:flex;align-items:center;justify-content:center;
    transition:transform 1.2s cubic-bezier(.77,0,.18,1), opacity .8s ease;
  }
  #opening.open{ transform:translateY(-100%); opacity:0; pointer-events:none;}
  .opening-card{
    text-align:center;padding:40px 28px;max-width:560px;width:92%;
    border:1px solid rgba(232,212,154,.35);
    background:rgba(20,7,10,.35);
    backdrop-filter: blur(8px);
    border-radius:18px;
    box-shadow:var(--shadow-premium);
    animation:fadeUp 1.2s ease;
  }
  .opening-card .frame{
    width:160px;height:160px;border-radius:50%;margin:0 auto 18px;
    background:url("https://images.unsplash.com/photo-1606216794074-735e91aa2c92?w=600") center/cover;
    border:4px solid var(--gold);box-shadow:0 0 0 8px rgba(200,169,106,.18);
  }
  .opening-card .label{letter-spacing:5px;font-family:'Cinzel',serif;color:var(--gold-light);font-size:12px;text-transform:uppercase}
  .opening-card .names{font-family:'Great Vibes',cursive;font-size:62px;line-height:1;color:#fff;margin:10px 0 6px}
  .opening-card .date{font-family:'Cinzel',serif;letter-spacing:6px;font-size:13px;color:var(--gold-light)}
  .opening-card .to{margin-top:22px;padding-top:18px;border-top:1px solid rgba(232,212,154,.25)}
  .opening-card .to small{letter-spacing:3px;color:var(--gold-light);font-family:'Cinzel',serif;font-size:11px}
  .opening-card .to h4{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:22px;margin:6px 0 0}
  .btn-open{
    margin-top:24px;display:inline-flex;align-items:center;gap:10px;
    padding:13px 26px;border-radius:50px;border:1px solid var(--gold);
    background:linear-gradient(135deg,var(--gold),#a3854f);
    color:#2b1a14;font-family:'Cinzel',serif;letter-spacing:3px;font-size:12px;font-weight:600;
    cursor:pointer;transition:.3s;text-transform:uppercase;
    box-shadow:0 10px 30px rgba(200,169,106,.4);
  }
  .btn-open:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(200,169,106,.55)}
  .btn-open i{transition:.3s}
  .btn-open:hover i{transform:translateX(4px)}

  @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

  /* ===== NAVBAR ===== */
  .nav-premium{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    padding:14px 24px;display:flex;justify-content:space-between;align-items:center;
    background:rgba(246,239,227,.0);transition:.4s;
  }
  .nav-premium.scrolled{
    background:rgba(246,239,227,.85);backdrop-filter:blur(12px);
    box-shadow:0 6px 20px rgba(59,13,18,.08);
  }
  .nav-premium .brand{font-family:'Great Vibes',cursive;color:var(--maroon);font-size:28px}
  .nav-premium .menu-btn{
    background:var(--maroon);color:#fff;border:none;width:44px;height:44px;border-radius:50%;
    cursor:pointer;box-shadow:var(--shadow-soft);
  }
  .nav-premium .menu-btn:hover{background:var(--burgundy)}

  .side-menu{
    position:fixed;top:0;right:-340px;width:320px;height:100%;
    background:linear-gradient(180deg,var(--darkred),var(--maroon));
    z-index:1100;padding:80px 28px 28px;transition:right .5s cubic-bezier(.77,0,.18,1);
    box-shadow:-20px 0 50px rgba(0,0,0,.35);
  }
  .side-menu.show{right:0}
  .side-menu .close-btn{
    position:absolute;top:18px;right:18px;background:transparent;border:none;color:var(--gold-light);font-size:24px;
  }
  .side-menu a{
    display:flex;align-items:center;gap:12px;color:#f6efe3;text-decoration:none;
    padding:14px 8px;border-bottom:1px solid rgba(232,212,154,.15);
    font-family:'Cinzel',serif;letter-spacing:2px;font-size:13px;text-transform:uppercase;
    transition:.3s;
  }
  .side-menu a:hover{color:var(--gold-light);padding-left:16px}
  .side-menu a i{color:var(--gold);width:20px}
  .menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1050;opacity:0;visibility:hidden;transition:.3s}
  .menu-overlay.show{opacity:1;visibility:visible}

  /* ===== HERO ===== */
  .hero{
    min-height:100vh;position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;text-align:center;
    background:
      linear-gradient(180deg, rgba(20,7,10,.45), rgba(20,7,10,.75)),
      url("https://images.unsplash.com/photo-1519741497674-611481863552?w=1800") center/cover fixed;
    color:#fff;
  }
  .hero .ornament-top, .hero .ornament-bot{
    position:absolute;left:0;right:0;height:80px;pointer-events:none;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'><path d='M0 40 Q 300 0 600 40 T 1200 40' fill='none' stroke='%23c8a96a' stroke-width='1' opacity='0.6'/><path d='M0 50 Q 300 10 600 50 T 1200 50' fill='none' stroke='%23c8a96a' stroke-width='1' opacity='0.3'/></svg>") center/cover no-repeat;
  }
  .hero .ornament-top{top:0}
  .hero .ornament-bot{bottom:0;transform:rotate(180deg)}
  .hero-inner{padding:40px 20px;z-index:2;max-width:900px}
  .hero .pretitle{letter-spacing:8px;color:var(--gold-light);font-family:'Cinzel',serif;font-size:13px}
  .hero h1{font-family:'Great Vibes',cursive;font-size:clamp(70px,12vw,140px);line-height:1;margin:10px 0 6px;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.4)}
  .hero h1 .amp{color:var(--gold-light);display:inline-block;animation:floaty 3s ease-in-out infinite}
  .hero .subtitle{letter-spacing:6px;font-family:'Cinzel',serif;font-size:14px;color:var(--gold-light);margin-bottom:30px}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

  /* Countdown */
  .countdown{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:14px}
  .cd-box{
    min-width:88px;padding:14px 10px;border-radius:14px;
    background:rgba(255,255,255,.08);border:1px solid rgba(232,212,154,.3);
    backdrop-filter:blur(6px);
  }
  .cd-box .num{font-family:'Cinzel',serif;font-size:30px;color:var(--gold-light);font-weight:600}
  .cd-box .lbl{font-size:11px;letter-spacing:3px;color:#fff;text-transform:uppercase;opacity:.85}

  .scroll-indicator{
    position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
    color:var(--gold-light);font-size:13px;letter-spacing:3px;
    font-family:'Cinzel',serif;animation:bounceY 2s ease-in-out infinite;z-index:3;
  }
  @keyframes bounceY{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}

  /* Particles */
  .particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .particle{position:absolute;color:var(--gold-light);opacity:.7;animation:fall linear infinite}
  @keyframes fall{
    0%{transform:translateY(-10vh) rotate(0)}
    100%{transform:translateY(110vh) rotate(360deg)}
  }

  /* ===== SECTION ===== */
  section.block{padding:100px 0;position:relative}
  .section-title{
    text-align:center;margin-bottom:50px;
  }
  .section-title .kicker{
    letter-spacing:8px;font-family:'Cinzel',serif;font-size:12px;color:var(--gold);text-transform:uppercase;
  }
  .section-title h2{
    font-family:'Great Vibes',cursive;font-size:clamp(46px,7vw,80px);color:var(--maroon);margin:6px 0 12px;
  }
  .divider{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold)}
  .divider .line{width:60px;height:1px;background:var(--gold)}
  .divider i{font-size:14px}

  /* ===== COUPLE ===== */
  .couple-card{
    background:linear-gradient(180deg,#fff, var(--cream-2));
    border:1px solid rgba(200,169,106,.4);
    border-radius:20px;padding:30px;text-align:center;
    box-shadow:var(--shadow-soft);transition:.4s;height:100%;position:relative;overflow:hidden;
  }
  .couple-card::before{
    content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M10 10 Q 50 0 90 10 M10 90 Q 50 100 90 90' stroke='%23c8a96a' fill='none' stroke-width='.6' opacity='.4'/></svg>") center/cover no-repeat;
    opacity:.5;
  }
  .couple-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-premium)}
  .couple-img{
    width:200px;height:200px;border-radius:50%;margin:0 auto 18px;
    border:5px solid var(--gold);box-shadow:0 0 0 8px rgba(200,169,106,.18);
    background-size:cover;background-position:center;
  }
  .couple-card h3{font-family:'Great Vibes',cursive;color:var(--maroon);font-size:48px;margin:6px 0 4px}
  .couple-card .order{color:var(--burgundy);font-style:italic;margin-bottom:6px}
  .couple-card .parents{font-size:16px;color:#5a3a2a;margin-bottom:12px}
  .ig-btn{
    display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:50px;
    background:var(--maroon);color:#fff;text-decoration:none;font-size:13px;letter-spacing:1px;
    font-family:'Poppins',sans-serif;transition:.3s;
  }
  .ig-btn:hover{background:var(--burgundy);color:#fff;transform:scale(1.05)}

  .amp-divider{
    display:flex;align-items:center;justify-content:center;font-family:'Great Vibes',cursive;
    font-size:80px;color:var(--gold);line-height:1;text-align:center;
  }

  /* ===== STORY TIMELINE ===== */
  .timeline{position:relative;padding:20px 0}
  .timeline::before{
    content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
    background:linear-gradient(180deg,transparent,var(--gold),transparent);
    transform:translateX(-50%);
  }
  .tl-item{position:relative;width:50%;padding:20px 40px;margin-bottom:30px}
  .tl-item:nth-child(odd){left:0;text-align:right}
  .tl-item:nth-child(even){left:50%}
  .tl-dot{
    position:absolute;top:30px;width:18px;height:18px;border-radius:50%;
    background:var(--gold);border:3px solid var(--cream);box-shadow:0 0 0 4px rgba(200,169,106,.3);
  }
  .tl-item:nth-child(odd) .tl-dot{right:-9px}
  .tl-item:nth-child(even) .tl-dot{left:-9px}
  .tl-card{
    background:#fff;border-radius:16px;padding:22px;box-shadow:var(--shadow-soft);
    border:1px solid rgba(200,169,106,.3);transition:.3s;
  }
  .tl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-premium)}
  .tl-card .yr{font-family:'Cinzel',serif;color:var(--gold);letter-spacing:3px;font-size:13px}
  .tl-card h4{font-family:'Cormorant Garamond',serif;color:var(--maroon);font-weight:700;font-size:24px;margin:4px 0 8px}
  .tl-card p{margin:0;color:#3a241a}

  @media (max-width:768px){
    .timeline::before{left:20px}
    .tl-item, .tl-item:nth-child(odd), .tl-item:nth-child(even){
      width:100%;left:0;padding-left:50px;padding-right:10px;text-align:left;
    }
    .tl-item:nth-child(odd) .tl-dot, .tl-item:nth-child(even) .tl-dot{left:11px;right:auto}
  }

  /* ===== EVENT CARDS ===== */
  .event-card{
    background:linear-gradient(180deg,#fff,var(--cream-2));
    border:1px solid rgba(200,169,106,.45);border-radius:20px;padding:36px 26px;
    text-align:center;box-shadow:var(--shadow-soft);position:relative;overflow:hidden;transition:.4s;height:100%;
  }
  .event-card::before{
    content:"";position:absolute;top:-30px;left:-30px;right:-30px;height:80px;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'><path d='M0 40 Q 100 0 200 40 T 400 40' fill='none' stroke='%23c8a96a' stroke-width='1' opacity='0.5'/></svg>") center/cover no-repeat;
  }
  .event-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-premium)}
  .event-card .icon-w{
    width:74px;height:74px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--maroon),var(--burgundy));color:var(--gold-light);font-size:30px;margin-bottom:14px;
    box-shadow:0 10px 20px rgba(91,26,31,.25);
  }
  .event-card h3{font-family:'Cinzel',serif;letter-spacing:4px;color:var(--maroon);font-size:22px}
  .event-card .date{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;color:var(--burgundy);margin-top:8px}
  .event-card .time{color:var(--brown);margin-bottom:10px}
  .event-card .loc{font-size:16px;color:#3a241a;margin-bottom:18px}
  .event-card .btn-cal{
    background:transparent;border:1px solid var(--maroon);color:var(--maroon);
    padding:9px 18px;border-radius:50px;font-size:12px;letter-spacing:2px;font-family:'Cinzel',serif;
    transition:.3s;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  }
  .event-card .btn-cal:hover{background:var(--maroon);color:#fff}

  /* ===== MAPS ===== */
  .map-wrap{
    border-radius:20px;overflow:hidden;box-shadow:var(--shadow-premium);
    border:4px solid #fff;outline:1px solid rgba(200,169,106,.4);
  }
  .map-wrap iframe{width:100%;height:420px;display:block;border:0}

  /* ===== GALLERY ===== */
  .gallery-grid{column-count:3;column-gap:14px}
  @media (max-width:992px){.gallery-grid{column-count:2}}
  @media (max-width:576px){.gallery-grid{column-count:1}}
  .gallery-grid a{
    display:block;margin:0 0 14px;border-radius:14px;overflow:hidden;
    box-shadow:var(--shadow-soft);position:relative;
  }
  .gallery-grid img{width:100%;height:auto;display:block;transition:transform .6s ease}
  .gallery-grid a:hover img{transform:scale(1.06)}
  .gallery-grid a::after{
    content:"\f00e";font-family:"Font Awesome 6 Free";font-weight:900;
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,rgba(91,26,31,.0),rgba(91,26,31,.6));
    color:#fff;font-size:22px;opacity:0;transition:.3s;
  }
  .gallery-grid a:hover::after{opacity:1}

  /* ===== RSVP & FORM ===== */
  .glass-card{
    background:rgba(255,255,255,.7);backdrop-filter:blur(14px);
    border:1px solid rgba(200,169,106,.45);border-radius:20px;
    padding:36px;box-shadow:var(--shadow-premium);
  }
  .form-label{font-family:'Cinzel',serif;letter-spacing:2px;font-size:12px;color:var(--maroon);text-transform:uppercase}
  .form-control, .form-select{
    background:#fff;border:1px solid rgba(200,169,106,.4);border-radius:12px;
    padding:12px 14px;font-family:'Poppins',sans-serif;font-size:14px;
  }
  .form-control:focus, .form-select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(200,169,106,.2)}
  .btn-premium{
    background:linear-gradient(135deg,var(--maroon),var(--burgundy));
    color:#fff;border:none;padding:14px 28px;border-radius:50px;
    font-family:'Cinzel',serif;letter-spacing:3px;font-size:13px;text-transform:uppercase;
    box-shadow:0 14px 30px rgba(91,26,31,.35);transition:.3s;
  }
  .btn-premium:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(91,26,31,.5);color:#fff}

  /* ===== GIFT ===== */
  .gift-card{
    background:linear-gradient(135deg,var(--darkred),var(--maroon));color:#fff;
    border-radius:18px;padding:26px;box-shadow:var(--shadow-premium);position:relative;overflow:hidden;
  }
  .gift-card::before{
    content:"";position:absolute;inset:0;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23c8a96a' stroke-opacity='0.18'><path d='M0 0 L 200 200 M 200 0 L 0 200' stroke-width='.5'/></g></svg>") center/cover;
    pointer-events:none;
  }
  .gift-card .bank{letter-spacing:4px;font-family:'Cinzel',serif;color:var(--gold-light);font-size:14px}
  .gift-card .num{font-family:'Cinzel',serif;font-size:22px;margin:8px 0;word-break:break-all}
  .gift-card .name{font-family:'Cormorant Garamond',serif;font-size:18px;opacity:.9}
  .btn-copy{
    background:var(--gold);color:#2b1a14;border:none;padding:8px 18px;border-radius:50px;
    font-family:'Cinzel',serif;letter-spacing:2px;font-size:11px;margin-top:14px;cursor:pointer;
    transition:.3s;
  }
  .btn-copy:hover{background:var(--gold-light)}

  /* ===== WISHES ===== */
  .wish-card{
    background:#fff;border:1px solid rgba(200,169,106,.35);border-radius:16px;
    padding:18px;box-shadow:var(--shadow-soft);margin-bottom:14px;transition:.3s;
  }
  .wish-card:hover{box-shadow:var(--shadow-premium);transform:translateY(-2px)}
  .wish-card .head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .avatar{
    width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#fff;font-family:'Cinzel',serif;background:linear-gradient(135deg,var(--maroon),var(--burgundy));
    font-weight:600;flex-shrink:0;
  }
  .wish-card .name{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--maroon);font-size:18px;line-height:1}
  .wish-card .time{font-size:12px;color:#8a6c5a;font-family:'Poppins',sans-serif}
  .wish-card .badge-att{
    font-size:10px;letter-spacing:1px;padding:3px 8px;border-radius:20px;
    background:rgba(200,169,106,.2);color:var(--maroon);font-family:'Poppins',sans-serif;
  }
  .wish-card p{margin:6px 0 0;color:#3a241a;font-size:16px}

  /* ===== FOOTER ===== */
  footer{
    background:linear-gradient(180deg,var(--maroon),var(--darkred));
    color:#f6efe3;padding:80px 20px 30px;text-align:center;position:relative;overflow:hidden;
  }
  footer::before{
    content:"";position:absolute;top:0;left:0;right:0;height:50px;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50'><path d='M0 25 Q 300 0 600 25 T 1200 25' fill='none' stroke='%23c8a96a' stroke-width='1' opacity='0.7'/></svg>") center/cover no-repeat;
  }
  footer h2{font-family:'Great Vibes',cursive;font-size:60px;color:var(--gold-light);margin:0}
  footer p{max-width:700px;margin:14px auto 24px;font-size:17px;opacity:.9}
  .social-foot a{
    display:inline-flex;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);
    align-items:center;justify-content:center;color:var(--gold-light);margin:0 6px;text-decoration:none;
    border:1px solid rgba(232,212,154,.25);transition:.3s;
  }
  .social-foot a:hover{background:var(--gold);color:#2b1a14;transform:translateY(-4px)}
  .copy{margin-top:30px;font-size:13px;letter-spacing:2px;font-family:'Cinzel',serif;opacity:.8}

  /* ===== MUSIC TOGGLE ===== */
  .music-toggle{
    position:fixed;bottom:24px;right:24px;z-index:900;
    width:54px;height:54px;border-radius:50%;border:none;
    background:linear-gradient(135deg,var(--maroon),var(--burgundy));color:var(--gold-light);
    box-shadow:0 14px 30px rgba(91,26,31,.4);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:18px;
    transition:.3s;
  }
  .music-toggle:hover{transform:scale(1.1)}
  .music-toggle.playing i{animation:spin 4s linear infinite}

  /* Toast */
  .toast-c{
    position:fixed;bottom:90px;right:24px;z-index:9999;
    background:var(--maroon);color:#fff;padding:12px 20px;border-radius:50px;
    box-shadow:var(--shadow-premium);font-family:'Poppins',sans-serif;font-size:13px;
    opacity:0;transform:translateY(20px);transition:.3s;
  }
  .toast-c.show{opacity:1;transform:translateY(0)}

  /* Hide app until opening */
  #app{display:none}
  #app.show{display:block;animation:fadeIn 1.2s ease}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  @media (max-width:576px){
    body{font-size:16px}
    .opening-card .names{font-size:48px}
    section.block{padding:70px 0}
  }