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

/* body{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#020816;
    overflow:hidden;
    font-family:Arial, sans-serif;
} */

/* BUTTON */

.btn-gold {
    position: relative;
    max-width: 650px;
    /* height: 90px; */
    /* background: #020816; */
    border: none;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.22);
    font-size: 25px;
    font-weight: 300;
    letter-spacing: 8px;
    text-transform: uppercase;
    transition: 0.4s ease;
    margin: auto;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
    color: #8c8c8c;
}

/* INNER BACKGROUND */

.btn-gold::before{
    content:"";
    position:absolute;
    inset:1px;
    background:#08090a;
    border-radius:10px;
    z-index:1;
}

/* TEXT */

.btn-gold{
    display:flex;
    justify-content:center;
    align-items:center;
}

.btn-gold span{
    position:relative;
    z-index:5;
}

/* BORDER */

.btn-gold::after{
    content:"";
    position:absolute;
    inset:0;
      border-radius:8px;
    padding:2px;

    background:
    linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 55%,
        #c76204 100%
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    z-index:2;
}

/* MOVING LIGHT */

.light{
    position:absolute;
    width:140px;
    /* height:3px; */

    background:
    linear-gradient(
        90deg,
        transparent,
        #ffffff,
        #ff9d3f,
        transparent
    );

    filter:
    blur(1px)
    drop-shadow(0 0 8px white)
    drop-shadow(0 0 15px #ff7a00);

    z-index:4;
}

/* TOP LIGHT */

.top-light{
    top:0;
    animation:topMove 4s linear infinite;
}

/* BOTTOM LIGHT */

.bottom-light{
    bottom:0;
    animation:bottomMove 4s linear infinite;
}

/* ANIMATION */

@keyframes topMove{

    0%{
        left:-25%;
    }

    100%{
        left:100%;
    }

}

@keyframes bottomMove{

    0%{
        left:100%;
    }

    100%{
        left:-25%;
    }

}

/* HOVER */

.btn-gold:hover{
   transform:scale(1.02);
   box-shadow:
    0 0 15px rgba(255,255,255,0.06),
    0 0 35px rgba(255,122,0,0.12);
}