/* Gemensamt */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

@font-face{
    font-family:"TAN-Garland-Regular";
    src:url("TAN-Garland-Regular.ttf");
}

@font-face {
    font-family: "Citadel";
    src: url(Citadel-Script-Regular.ttf);
}
.top-image {
    width: 70%;
    max-width: 1500px;
    height: auto;
    display: block;
    margin: 0 auto;
}

body{
    
    font-family: "Cinzel", serif, "TAN-Garland-Regular";
    background:white;
}

.envelope-page body {
    background-color:#949271;
}

html,
body{
    overflow-x:hidden;
}

.page-wrapper{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

/* =======================
   Envelope
======================= */
.image img{
    width: 100%; 
    height: auto; 
    object-fit: cover; 
}

.envelope-page{
    overflow:hidden;
    
}

.fullscreen-link{
    position:relative;
    display:block;
    width:100vw;
    height:100vh;
}

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


.envelope-text{
    position:absolute;
    top:30%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#fff7ed;
    width:80%;
}

.envelope-text-2{
    position:absolute;
    bottom:10%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#fff7ed;
    width:80%;
    font-family:"Cinzel";
    font-size: 1.2rem;
    opacity:0;
    animation: fadeOpen 1.5s ease forwards;
    animation-delay:4.7s;

}

.envelope-text p{
    font-size:1.2rem;
    margin:20px 0;
    font-family:"Cinzel";

    opacity:0;
    transform:translateY(15px);

    animation:introText 1.2s ease forwards;
    animation-delay:0.3s;
}


.envelope-text h1{
    font-family:"Citadel";
    font-size:5rem;
    font-weight:400;
    margin:20px 0;
    min-height:100px;
}

@media (max-width: 768px){

    .envelope-text h1{
    font-size: 3.5rem;
    }

    
    
}

@media (min-width: 1200px){

    .envelope-text p{
    font-size:2rem;
    
}

.envelope-text h1{
    font-size: 5rem;
    }

    .envelope-text-2{
        font-size: 1.5rem;
    }

}




.typing{
    display:block;
    text-align:center;
}


@keyframes typingFade{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

@keyframes fadeOpen{

    from{
        opacity:0;
        
    }

    to{
        opacity:1;
        
    }

}

@keyframes introText{

    from{
        opacity:0;
        transform:translateY(15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
/* =======================
   Info
======================= */

.info-page{
    text-align:center;
    background-image:url("/images/background2.png");

}

.top-image{
    width:100%;
    height:auto;
    display:block;

}





.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s ease, transform .8s ease;
}

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


.info-text{
    margin-top:30px;
}

.notice {
    margin-top: 20px;
}

.small-text{
    font-size:1.3rem;
    margin-bottom:18px;
    color:#666;
}

.small-text-form  {
    align-self: center;
    font-size: 1rem;
    text-align: center;
}

.address-form h2,
.address-form .small-text-form{
    text-align:center;
    align-self:center;
}

.info-text h1{
    font-size:clamp(3rem, 8vw, 6rem);
    font-weight:400;
    margin-bottom:20px;
    font-family:"TAN-Garland-Regular";
}

.date{
    font-size:1.4rem;
    color:#666;
}

.image-nationalmuseum img{
    width:min(90%,600px);
    margin-top:40px;
}

.flower-divider{
    position:relative;
    height:0;
    z-index:5;
}


.flower-divider img{
    position:absolute;
    left:0;
    top:-15vw;
    width:25vw;
    min-width:150px;
}


.countdown-section{
    text-align:center;
    margin-top:40px;
    padding-top:8vh;
    padding-bottom:10vh;
    background-color:#696447;
}

@media(min-width:1200px){

    .countdown-section{
        padding-top:180px;
        padding-bottom:220px;
    }

    .flower-divider img{
        width:500px;
        top:-300px;
        
    }

        .countdown-section h2{
        font-size:3rem;
    }

    .countdown span{
        font-size: 7rem;
    }

    .image-nationalmuseum img {
        width:1000px;
    }
    
}



.countdown-section h2{
    font-size:1.8rem;
    font-weight:400;
    margin-bottom:40px;
    color: white;
}

.countdown{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:clamp(10px,2vw,30px);
}

.countdown div{
    min-width:80px;
}

.countdown span{
    font-size:clamp(2rem,6vw,7rem);
    font-weight:300;
    color: white;
}



.countdown p{
    font-size:1rem;
    color: white;
    margin-top: 20px;
}



.form-class{
    background-image:url("/images/background.png");
    background-size:cover;
    background-position:center;
    padding:50px 0px; /* luft ovanför och under formuläret */

    display:flex;
    justify-content:center;
}


.invitation-section{
    position:relative;
    text-align:center;
    
    height: 100%;
    max-width:700px;
   
    
    border-radius:20px;

    width:min(92%,700px);
    padding:clamp(30px,5vw,70px);

    background: url("/images/hej.png") no-repeat center;
    background-size:contain;
    padding:
        90px   /* topp */
        80px   /* höger */
        90px   /* botten */
        80px;
    
}


.lace-border{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:fill;
    pointer-events:none;

}



.invitation-section h2{
    font-size:2rem;
    font-weight:400;
    margin-bottom:20px;
    margin-top: 20px;
    position:relative;
    z-index:2;
}


.invitation-section p{
    font-size:1rem;
    line-height:1.6;
    color:#666;
    margin-bottom:40px;
    z-index:2;
    position:relative;
}


.address-form{
    display:flex;
    flex-direction:column;
    text-align:left;
    gap:10px;
    position:relative;
    z-index:1;

    width: 70%;

    margin:0 auto;
}


.address-form label{
    font-size:1rem;
    margin-top:1px;
    margin-left: 10px;
}


.address-form input{
    padding:14px;
    border:none;
    border-radius:50px !important;
    font-size:1rem;
}

.address-form input:focus{
    outline:none;
}


button{
    margin-top:20px;
    padding:15px;
    border:none;
    background:#989d87;
    color:white;
    font-size:1rem;
    cursor:pointer;
    border-radius:3px;
    width: 40%;
    align-self:center;
    margin-bottom: 20px;
    font-family: "TAN-Garland-Regular";
    outline:none;

}

.address-button{
    width:300px;
}



button:hover{
    opacity:0.85;
}




.page-leave{
    animation: envelopeClose 0.8s ease forwards;
}


@keyframes envelopeClose{

    from{
        opacity:1;
        transform:scale(1);
    }

    to{
        opacity:0;
        transform:scale(1.08);
    }

}

.page-transition{
    position:fixed;
    inset:0;
    background:white;
    opacity:0;
    pointer-events:none;
    z-index:999;
    transition:opacity 1.2s ease;
}


.page-transition.active{
    opacity:1;
}


@media (max-width:900px){

    .info-text h1{
        font-size:3.3rem;
    }

    .small-text{
        font-size:1rem;
    }

    .date{
        font-size:1.1rem;
    }

    .countdown{
        gap:10px;
    }

    .countdown span{
        font-size:2.2rem;
    }

    .countdown p{
        font-size:0.8rem;
    }

    

    button{
        width:70%;
    }

    .flower-divider img{
        
        top:-100px;
        
    }

     .countdown{
        gap:15px;
    }

    .countdown span{
        font-size:2rem;
    }

    .countdown div{
        min-width:60px;
    }

    .countdown-section h2{
    font-size:1rem;
    
    }

    

}

@media (max-width: 768px){

    /* Lappen */
    .invitation-section{
        width:95%;
        padding:80px 5px 70px;
        background-size:100% 100%;
    }

    /* Formuläret */
    .address-form{
        width:60%;
        gap:8px;
    }

    /* Rubrik */
    .address-form h2{
        font-size:1.4rem;
        margin-top:0;
        margin-bottom:12px;
    }

    /* Text */
    .address-form .small-text-form {
        font-size:0.8rem;
        line-height:1.5;
        margin-bottom:20px;
        width:100%;
    }

    /* Labels */
    .address-form label{
        font-size:0.85rem;
        margin-left:6px;
    }

    /* Inputs */
    .address-form input{
        padding:10px 14px;
        font-size:0.9rem;
    }

    /* Knappen */
    button{
        width:40%;
        padding:12px;
        font-size:0.9rem;
        margin-top:18px;
    }

    .notice {
        font-size: 0.8rem;
        padding-left:10px;
        padding-right: 10px;
    }



}

@media (max-width:768px){

    .fullscreen-link{
        overflow:hidden;
        display:flex;
        justify-content:center;
        align-items:center;
    }

   .fullscreen-link img{
        height:100vh;
        width:100%;
        max-width:none;
    }
   .top-image {
    width: 100%;
    max-width: none;
    height: auto;
}
   .envelope-text h1 {
    font-size: 3rem;
}


}