/* ==========================================================
   PROJECT RA
   Version : 0.1
========================================================== */
:root{
    --bg:#090909;
    --bg-soft:#1b1b1b;

    --text:#F8F5EF;
    --gold:#D4AF37;
    --emerald:#0E6B56;

    --white:#ffffff;

    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:24px;

    --shadow-gold:0 0 40px rgba(212,175,55,.25);

    --container:1200px;

    --transition:.35s ease;

    --font-heading:'Cinzel',serif;
    --font-display:'Cormorant Garamond',serif;
    --font-body:'Poppins',sans-serif;
}

html,
body{
    width:100%;
    overflow-x:hidden;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);

    color:var(--text);

    overflow:hidden;

    font-family:'Poppins',sans-serif;

}

/* ==========================================================
BACKGROUND
========================================================== */

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-5;

    background:
    radial-gradient(circle at top,#1b1b1b 0%,#090909 65%,#050505 100%);

}

/* ==========================================================
MOON
========================================================== */

.moon{

    position:absolute;

    top:7%;

    right:8%;

    width:180px;

    height:180px;

    border-radius:50%;

    background:
    radial-gradient(circle,#fff6cf,#D4AF37);

    opacity:.18;

    filter:blur(2px);

    box-shadow:

    0 0 150px rgba(212,175,55,.35);

}

/* ==========================================================
STARS
========================================================== */

.stars{

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(white 1px,transparent 1px),

    radial-gradient(#D4AF37 .8px,transparent .8px);

    background-size:

    120px 120px,

    200px 200px;

    opacity:.45;

    animation:starsMove 120s linear infinite;

}

@keyframes starsMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-300px);

    }

}

/* ==========================================================
LOADER
========================================================== */

#loader{

    position:fixed;

    inset:0;

    background:#090909;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.loader-content{

    width:340px;

    text-align:center;

}

.loader-logo{

    font-family:'Cinzel',serif;

    color:var(--gold);

    font-size:78px;

    letter-spacing:15px;

}

.loader-logo span{

    color:white;

}

.loader-content p{

    margin-top:20px;

    font-size:14px;

    letter-spacing:5px;

    color:#ddd;

}

.loader-line{

    width:100%;

    height:2px;

    background:#333;

    margin-top:40px;

    overflow:hidden;

}

.loader-progress{

    width:0%;

    height:100%;

    background:#D4AF37;

}