@charset "utf-8";
/* CSS Document */
 /* <link rel="stylesheet" href="welcome.css">*/
/* =====================================================
   WELCOME
   ===================================================== */

.welcome {

    width: 100%;

    max-width: 600px;

    text-align: center;

    padding: 50px 20px;

    margin: 0 auto;

}


/* =====================================================
   TOP SYMBOL
   ===================================================== */

.welcome-top {

    font-family: Georgia, serif;

    font-size: 18px;

    color: #777;

    margin-bottom: 18px;

    animation: fadeDown 1.2s ease forwards;

}


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

.welcome-title {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 38px;

    font-weight: 400;

    letter-spacing: 12px;

    margin-left: 12px;

    /* GOLD */

    background: linear-gradient(
        90deg,
        #9c7418,
        #d4af37,
        #f3d878,
        #d4af37,
        #9c7418
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    animation: fadeUp 1.2s ease forwards;

}


/* =====================================================
   CENTER DIAMOND
   ===================================================== */

.welcome-diamond {

    font-family: Georgia, serif;

    font-size: 12px;

    color: #888;

    margin-top: 16px;

    margin-bottom: 18px;

    animation: fadeIn 1.5s ease forwards;

}


/* =====================================================
   LINE
   ===================================================== */

.welcome-line {

    width: 240px;

    height: 1px;

    margin: 0 auto 18px;

    background: #999;

    animation: lineOpen 1.4s ease forwards;

}


/* =====================================================
   SUBTITLE
   ===================================================== */

.welcome-subtitle {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    letter-spacing: 6px;

    color: #e8e8e8;

    margin-left: 6px;

    animation: fadeUp 1.6s ease forwards;

}


.welcome-subtitle span {

    margin: 0 8px;

    color: #d4af37;

}


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

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes fadeDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes lineOpen {

    from {

        opacity: 0;

        width: 0;

    }

    to {

        opacity: 1;

        width: 240px;

    }

}


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

@media (max-width: 480px) {

    .welcome-title {

        font-size: 28px;

        letter-spacing: 8px;

        margin-left: 8px;

    }


    .welcome-line {

        width: 180px;

    }


    .welcome-subtitle {

        font-size: 10px;

        letter-spacing: 4px;

        margin-left: 4px;

    }

}