@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;400;500;600;700&family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

@font-face {
  font-family: 'Alta_R';
  src: url('https://januarnatasyha.lavierproject.com/font/alta-regular.otf');
}

@font-face {
  font-family: 'Melinda_S';
  src: url('https://januarnatasyha.lavierproject.com/font/Melinda Script.ttf');
}

@font-face {
  font-family: 'Southland';
  src: url('https://januarnatasyha.lavierproject.com/font/Southland.ttf');
}

@font-face {
    font-family: 'Alta Regular';
    /*src: url('https://januarnatasyha.lavierproject.com/font/alta-regular.otf');*/
    src: url('https://januarnatasyha.lavierproject.com/font/alta_regular.eot'); 
    src: url('https://januarnatasyha.lavierproject.com/font/alta_regular.eot?#iefix') format("embedded-opentype"), 
       url('https://januarnatasyha.lavierproject.com/font/alta_regular.woff2') format('woff2'), 
       url('https://januarnatasyha.lavierproject.com/font/alta_regular.woff') format('woff'), 
       url('https://januarnatasyha.lavierproject.com/font/alta_regular.ttf')  format('truetype'), 
       url('https://januarnatasyha.lavierproject.com/font/alta_regular.svg#Alta Regular') format('svg'); 
}

@font-face {
    font-family: 'Southland Regular';
    src: url('https://januarnatasyha.lavierproject.com/font/southland_regular.eot'); 
    src: url('https://januarnatasyha.lavierproject.com/font/southland_regular.eot?#iefix') format("embedded-opentype"), 
       url('https://januarnatasyha.lavierproject.com/font/southland_regular.woff2') format('woff2'), 
       url('https://januarnatasyha.lavierproject.com/font/southland_regular.woff') format('woff'), 
       url('https://januarnatasyha.lavierproject.com/font/southland_regular.ttf')  format('truetype'), 
       url('https://januarnatasyha.lavierproject.com/font/southland_regular.svg#Southland Regular') format('svg'); 
}

@font-face {
    font-family: 'Melinda Script';
    src: url('https://januarnatasyha.lavierproject.com/font/melinda_script.eot'); 
    src: url('https://januarnatasyha.lavierproject.com/font/melinda_script.eot?#iefix') format("embedded-opentype"), 
       url('https://januarnatasyha.lavierproject.com/font/melinda_script.woff2') format('woff2'), 
       url('https://januarnatasyha.lavierproject.com/font/melinda_script.woff') format('woff'), 
       url('https://januarnatasyha.lavierproject.com/font/melinda_script.ttf')  format('truetype'), 
       url('https://januarnatasyha.lavierproject.com/font/melinda_script.svg#Melinda Script') format('svg'); 
}

@font-face {
    font-family: "Great Vibes";
    src: url("https://db.onlinewebfonts.com/t/5bf06596a053153248631d74f9fc4e28.eot");
    src: url("https://db.onlinewebfonts.com/t/5bf06596a053153248631d74f9fc4e28.eot?#iefix") format("embedded-opentype"),
         url("https://db.onlinewebfonts.com/t/5bf06596a053153248631d74f9fc4e28.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/5bf06596a053153248631d74f9fc4e28.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/5bf06596a053153248631d74f9fc4e28.ttf") format("truetype"),
         url("https://db.onlinewebfonts.com/t/5bf06596a053153248631d74f9fc4e28.svg#Great Vibes") format("svg");
}


body,html{
    height: 100vh;
    margin:0px;
    padding:0px;
    overflow-x:hidden;
    overflow-y:hidden;
    background:#e6ddd2;
    background:url('../image/cover_bg.webp');
    background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
}

.container-fluid{
    height:100vh;
    /*margin:2.5vh;*/
    display: flex;
    flex-direction: column;
    font-size: 1.875rem;
    text-align: center;
    justify-content:center;
    align-items: center;
    align-content: space-between;
    flex-direction: column;
}

.useMobilePhone{
    display:block;
}

.invitationButton{
    display:none;
}

.logo{
    display:none;
}

.hadimelisa-text{
    display:none;
}

.youAreInvited{
    display:none;
}

.theWeddingOf{
    display:none;
}

.theWeddingName{
    display:none;
}

.theWeddingDate{
    display:none;
}

#for{
    /*position: absolute;*/
    /*bottom: 15%;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    color:#dad4b5;
    /*color:#7d633b;*/
        font-family:"Cormorant Garamond";
        font-size:1.5rem;
    text-align:center;
    text-transform:uppercase;
    text-decoration: underline;
    /*margin: 1rem;*/
    display: none;
    align-items: center;
    justify-content: center;
    font-weight:600;
    /*width:90vw;*/
}


@media only screen and (max-width: 768px)  {
    body{
        background-repeat: no-repeat;
	    -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background:#e6ddd2;
        background:url('../image/cover.webp');
        /*filter: brightness(1.2) saturate(1.1);*/
        background-position: center;
        background-size: cover;
	    height: 100vh;

    }
    
    .useMobilePhone{
        display:none;
    }
    
    .cover-top{
	    height: 60vh;
	    width:100vw;
	    position:relative;
    }
    /*.cover-top::before {*/
    /*    content: "";*/
    /*    position: absolute;*/
    /*    inset: 0;*/
    /*    background: */
    /*  linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.05) 100%);*/
    /*backdrop-filter: blur(1px);*/
    /*-webkit-backdrop-filter: blur(1px);*/
    /*}*/
    .cover-top-content{
	    position:relative;
    }
    
    .youAreInvited{
        display:block;
        margin-top:20px;
    }
    
    .youAreInvited h1{
        color:#800000;
        font-family:"Playfair Display";
        font-size:1rem;
        letter-spacing: 0.12rem;
        font-weight:600;
    }
    
    .theWeddingOf{
        display:block;
        /*position: absolute;*/
        /*bottom: 45%;*/
        /*left: 50%;*/
    }
    
    .theWeddingOf h1{
        color:#dad4b5;
        font-family:"Cormorant Garamond";
        font-size:1.2rem;
        letter-spacing: 0.12rem;
        margin-top:40px;
        font-weight:700;
    }
    
    /*.hadimelisa-text{*/
    /*    display:block;*/
    /*    position: absolute;*/
    /*    bottom: 30%;*/
        /*left: 50%;*/
    /*}*/
    
    /*.hadimelisa-text img {*/
    /*  width: 280px;         */
    /*  height: auto;*/
      /*filter: drop-shadow(0 0 8px rgba(0,0,0,0.2)); */
    /*}*/
    
    .theWeddingName{
        display:block;
    }
    
    .theWeddingName h1{
        color:#dad4b5;
        font-family:"Alex Brush","Great Vibes";
        font-size:3rem;
        margin-bottom:0px;
        /*letter-spacing: 0.1875rem;*/
    }
    
    .theWeddingDate{
        display:block;
        /*position: absolute;*/
        /*bottom: 28%;*/
        /*left: 50%;*/
    }
    
    .theWeddingDate h1{
        color:#dad4b5;
        font-family:"Cormorant Garamond";
        font-size:1rem;
        font-weight:700;
        letter-spacing: 0.1875rem;
    }
    
    .cover-bottom{
        height: 40vh;
        width:100vw;
        /*margin-top:2vh;*/
        position: relative;
    }
    
    .cover-bottom::before {
        content: "";
        position: absolute;
        inset: 0;
    /*    background: */
    /*  linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.5) 100%);*/
    /*backdrop-filter: blur(1px);*/
    /*-webkit-backdrop-filter: blur(1px);*/
    }
    
    .cover-bottom-content{
        position: relative;
    }
    
    .logo{
        display:block;
        position: absolute;
        bottom: 48%;
        /*left: 50%;*/
    }
    
    .logo img {
      width: 90px;         /* atur sesuai ukuran logo */
      height: auto;
      /*margin-bottom: 20px;*/
      /*filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));*/
    }
    
    #for{
        display:flex;
        position: absolute;
        /*bottom: 25%;*/
        bottom: calc(110px + env(safe-area-inset-bottom, 0px));
        /*left: 50%;*/
    }
    
    .invitationButton {
      display: block;
      position: absolute;
      /*bottom: 13%;*/
      bottom: calc(50px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%);
      padding: 14px 20px;
      border: 1px solid rgba(59, 36, 21, 0.15); /* soft border */
      /*background: linear-gradient(*/
      /*  180deg,*/
      /*  rgba(255, 253, 208, 0.95),*/
      /*  rgba(255, 253, 208, 0.8)*/
      /*);*/
      background: white;
      color:#800000;
      font-family:"Playfair Display";
      font-size: 0.8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-radius: 14px;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(59, 36, 21, 0.08);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: all 0.3s ease;
    }
    
    .invitationButton:hover {
      transform: translateX(-50%) translateY(-4px) scale(1.03);
      background: linear-gradient(
        180deg,
        rgba(255, 253, 208, 1),
        rgba(255, 253, 208, 0.9)
      );
      box-shadow: 0 12px 28px rgba(59, 36, 21, 0.15);
    }
    
    .invitationButton:active {
      transform: translateX(-50%) translateY(-1px) scale(0.98);
      box-shadow: 0 4px 12px rgba(59, 36, 21, 0.12);
    }
    
    .invitationButton:focus {
      outline: 3px solid rgba(59, 36, 21, 0.2);
      outline-offset: 4px;
    }
}