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

body{

    font-family:'Be Vietnam Pro', sans-serif;
    
}

h1{
    font-family: 'Lost Vietnam', serif;
    font-size:clamp(3rem, 9vw, 8rem);
}

a {
    color:#c75739
}

/*section 1*/
.hero{

    position:relative;

    height:100vh;
}

.hero img{

    width:100%;
    height:100%;

    object-fit:cover;
}

.hero-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    color:white;

    text-align:center;

    text-shadow: 2px 2px 4px #000000;
}

.hero-overlay p {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
}

/*==================================================
SECTION 2
==================================================*/

.postcard-section{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background-image:url("../vn_ninhbinh/background_nb.webp");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

/*==================================================
STACK
==================================================*/

.postcard-stack{

    position:relative;

    width:760px;

    height:760px;
}

/*==================================================
POSTCARD
==================================================*/

.postcard{

    position:absolute;

    top:50%;

    left:50%;

    transform:

    translate(-50%,-50%);

    cursor:pointer;

    transition:

    transform .45s,

    opacity .45s;
}

.postcard.portrait{

    width:500px;

    aspect-ratio:500/680;
}

.postcard.landscape{

    width:680px;

    aspect-ratio:680/500;
}


/*==================================================
INNER
==================================================*/

.card-inner{

    position:relative;

    width:100%;

    height:100%;

    transform-style:preserve-3d;

    transition:

    transform .75s ease;

    will-change:transform;
}

.card-inner.flipped{

    transform:rotateY(180deg);
}

/*==================================================
FRONT / BACK
==================================================*/

.card-face{

    position:absolute;

    inset:0;

    overflow:hidden;

    border-radius:12px;

    background:white;

    backface-visibility:hidden;

    box-shadow:

    0 18px 40px rgba(0,0,0,.18);
    transform-style: preserve-3d;
}

/*==================================================
FRONT
==================================================*/

.card-front img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;
}

/*==================================================
BACK
==================================================*/

.card-back{

    transform:rotateY(180deg);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:48px;

    box-sizing:border-box;
}

/*==================================================
STORY
==================================================*/

.story{

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;
}

.story h2{

    font-family:

    "Playwrite VN";

    color:#C75739;

    font-size:2.2rem;

    margin-bottom:28px;
}

.story p{

    flex:1;

    font-size:1.3rem;

    line-height:1.9;
}

.story-info{

    display:flex;

    justify-content:space-between;

    color:#777;

    font-size:.95rem;
}

/*==================================================
TOP CARD
==================================================*/

.postcard.top:hover{

    filter:brightness(1.05);

}

.postcard.top .card-face{

    transition:
    box-shadow .3s;
}

.postcard.top:hover .card-face{

    box-shadow:
    0 25px 55px rgba(0,0,0,.25);
}

/*==================================================
MOVE ANIMATION
==================================================*/

.postcard.moving{

    animation:

    moveCard .45s ease forwards;
}

@keyframes moveCard{

    0%{

        opacity:1;

        transform:

        translate(-50%,-50%)

        translateY(0)

        scale(1);

    }

    100%{

        opacity:0;

        transform:

        translate(-50%,-50%)

        translateY(35px)

        scale(.90);

    }

}

/*section 3*/
.credits{

    min-height:auto;

    display:flex;

    justify-content:center;
    align-items:center;

    padding:80px 40px;
}
.message{

    max-width:900px;

    width:100%;

    padding:60px;

    background:white;

    border:none;

    border-radius:20px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

    font-size:1.4rem
}

/*==================================================
TABLET
==================================================*/

@media(max-width:1024px){

    .postcard-stack{

        width:420px;

        height:560px;
    }
    .postcard.portrait{
        width:clamp(340px, 45vw, 500px);
    }

    .postcard.landscape{
        width:clamp(360px, 58vw, 680px);
    }

    .card-back{
        padding:32px;
    }
}

/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

    .postcard-section{

        flex-direction:column;

        gap:30px;
    }

    .postcard-stack{

        width:90vw;

        height:70vh;
    }

    .stack-btn{

        width:50px;

        height:50px;

        font-size:1.6rem;
    }
.postcard.portrait{

    width:clamp(260px, 80vw, 340px);

}
.postcard.landscape{

    width:clamp(280px, 88vw, 360px);

}
.story h2{

    font-size:1.4rem;

}

.story p{

    font-size:.8rem;
    line-height:1.6;

}

.credits p,a{
    font-size:.95rem;
    line-height:1.6;
}

.message{
    padding:40px 24px;
}

.card-back{
    padding:20px;
}
}




/*nav*/
#navbar{

    position:absolute;

    top:5px;
    left:0;

    width:100%;

    display:flex;

    justify-content:space-around;
    align-items:center;

    z-index:1000;
}

#navbar a{

    font-family:'Lost Vietnam';

    font-size:2rem;

    color:#C75739;

    text-decoration:none;
}

#navbar a:hover{

    text-decoration:underline;
}

#nav-middle{

    display:flex;

    justify-content:center;
    align-items:center;
}

#nav-logo{

    width:100px;

    height:auto;

    display:block;
}

#nav-home{

    display:none;
}

#navbar.scrolled{

    position:fixed;

    top:0;

    background:#C75739;

    padding:7px 0;
}

#navbar.scrolled a{

    color:white;
}

#navbar.scrolled #nav-logo{

    display:none;
}

#navbar.scrolled #nav-home{

    display:block;
}

/*accessibility*/
.toolbox{

    position:fixed;

    top:120px;
    left:30px;

    z-index:9999;

    display:flex;

    gap:12px;
}

.toolbox button{

    width:48px;
    height:48px;

    border:none;

    background:none;

    padding:0;

    cursor:pointer;
}

.toolbox img{

    width:100%;
    height:100%;

    display:block;
}

/*resize*/

.font-big .story{

    font-size:1.35rem;
}

.font-big .story *{

    font-size:inherit;
}

.font-small .story{

    font-size:.95rem;
}

.font-small .story *{

    font-size:inherit;
}

@media(max-height:600px){

    .toolbox{

        top:70px;
    }
}