:root{
    --colorNormalText: white;
    --principalColor: #d4af37;
    --secundaryColor: #f7e08e;
    --terciaryColor: #b78f2a;
    --card-dark: #0f0f10;
    --muted: #bfbdbd;
    --glass: rgba(255,255,255,0.04);
    --radius: 14px;
    --container: 1400px;
    --top: 105px;
}

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

html{
    scroll-behavior: smooth;
    font-size: 16px;
}

body{
    margin:0;
    font-family: 'Poppins', sans-serif;
    background: black;
    color: #fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
    overflow-x: hidden;
    position: relative;
}

h1, h2, h3, h4 {font-family: "Cinzel", serif;}


@media (max-width: 768px) {
    h3{
        font-size: 1.5rem;
    }
}

/* ---------------------- PARTICLES ---------------------- */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* PAGE LAYOUT */
.wrap{
    width: 100%;
    max-width: 1200px;
    margin:0 auto;
    padding:0 20px;}

/* simple animations */
.fade-up{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s ease, transform .6s ease;}

.in-view{
    opacity:1;
    transform:translateY(0);}