/* ==========================================
   CUSTOM SETTING
========================================== */

:root{

    /* WARNA */

    --color-main:#1d3c2b;

    --button-bg:#ffffff;

    --button-text:#1d3c2b;

    --button-hover-bg:#1d3c2b;

    --button-hover-text:#ffffff;


    /* FONT */

    --font-title-small:Georgia, serif;

    --font-couple:'Great Vibes', cursive;

    --font-label:Georgia, serif;

    --font-guest:'Cormorant Garamond', serif;

    --font-instansi:'Cormorant Garamond', serif;

    --font-button:Arial, sans-serif;


    /* SIZE */

    --size-title-small:20px;

    --size-couple:70px;

    --size-label:18px;

    --size-guest:34px;

    --size-instansi:22px;

    --size-button:18px;


    /* WEIGHT */

    --weight-title-small:400;

    --weight-couple:400;

    --weight-label:400;

    --weight-guest:600;

    --weight-instansi:500;

    --weight-button:600;


    /* ANIMATION */

    --animation-duration:10s;
}


/* ==========================================
   RESET
========================================== */

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


/* ==========================================
   BODY
========================================== */

body{

    font-family:Georgia, serif;

    background:url('background.png');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    height:100vh;
}


/* ==========================================
   OVERLAY
========================================== */

.overlay{

    height:100vh;

    background:rgba(255,255,255,0.15);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;
}


/* ==========================================
   CONTENT
========================================== */

.content{

    text-align:center;

    color:var(--color-main);

    animation:
    tectonicText
    var(--animation-duration)
    ease-out
    forwards;
}


/* ==========================================
   TITLE
========================================== */

.title-small{

    font-family:var(--font-title-small);

    font-size:var(--size-title-small);

    font-weight:var(--weight-title-small);

    color:var(--color-main);

    margin-bottom:10px;
}


h1{

    font-family:var(--font-couple);

    font-size:var(--size-couple);

    font-weight:var(--weight-couple);

    color:var(--color-main);

    margin-bottom:40px;
}


/* ==========================================
   GUEST
========================================== */

.guest{

    margin-bottom:35px;
}


.guest-label{

    font-family:var(--font-label);

    font-size:var(--size-label);

    color:var(--color-main);

    margin-bottom:5px;
}


/* ==========================================
   NAMA TAMU
========================================== */

#guestName{

    margin-top:15px;

    font-family:var(--font-guest);

    font-size:var(--size-guest);

    font-weight:var(--weight-guest);

    color:var(--color-main);
}


/* ==========================================
   INSTANSI
========================================== */

#guestInstansi{

    margin-top:5px;

    font-family:var(--font-instansi);

    font-size:var(--size-instansi);

    font-weight:var(--weight-instansi);

    color:var(--color-main);

    opacity:0;

    animation:
    fadeInstansi
    2s ease forwards;

    animation-delay:1s;
}


/* ==========================================
   BUTTON
========================================== */

button{

    background:var(--button-bg);

    color:var(--button-text);

    padding:15px 35px;

    border:2px solid var(--button-text);

    border-radius:50px;

    font-size:var(--size-button);

    font-family:var(--font-button);

    font-weight:var(--weight-button);

    cursor:pointer;

    transition:all .4s ease;
}


button:hover{

    background:var(--button-hover-bg);

    color:var(--button-hover-text);

    transform:translateY(-3px);
}


button:active{

    transform:scale(.96);
}


/* ==========================================
   ANIMATIONS
========================================== */

@keyframes tectonicText{

    0%{

        opacity:0;

        transform:
        translateY(60px)
        rotate(2deg);
    }

    25%{

        opacity:1;

        transform:
        translateY(-12px)
        rotate(-1deg);
    }

    50%{

        transform:
        translateY(8px)
        rotate(.5deg);
    }

    75%{

        transform:
        translateY(-4px)
        rotate(-.3deg);
    }

    100%{

        opacity:1;

        transform:
        translateY(0)
        rotate(0);
    }
}


@keyframes fadeInstansi{

    from{

        opacity:0;

        transform:translateY(15px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}


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

@media(max-width:768px){

    h1{

        font-size:52px;
    }

    #guestName{

        font-size:26px;
    }

    #guestInstansi{

        font-size:18px;
    }

    button{

        width:100%;
    }
}