/*body{
        background:transparent;
        display:flex;
        justify-content:center;
        align-items:center;
        height:100vh;
        background-color: #000;
    }
    */
    section.button-wrapper{
        position:relative;
        width:140px;
        height:45px;
        display:flex;
        justify-content:center;
        align-items:center;
        
    }
    .sparkle-button{
        position:relative;
        width:140px;
        height:45px;
        padding:5px 30px;
        font-size:1.2rem;
        font-weight:bold;
        color:rgb(255, 255, 255);
        background:transparent;
        border:2px solid gold;
        border-radius:30px;
        cursor:pointer;
        overflow:hidden;
        text-transform:uppercase;
        letter-spacing:1px;
        transition:0.3s ease-in-out;
    }
    

    .sparkle-button:hover{
        box-shadow:0 0 15px gold,0 0 30px gold;
    }

    /* Golden animated border */
    .sparkle-button::before{
        content:"";
        position:absolute;
        top:-2px;left:-2px;
        width:calc(100% + 3px);
        height:calc(100% + 3px);
        border-radius:12px;
        background:conic-gradient(from 0deg,gold,transparent 30%,gold);
        z-index:-1;
        animation:rotateBorder 4s linear infinite;
        -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
        -webkit-mask-composite:xor;
        mask-composite:exclude;
        padding:2px;
    }
    @keyframes rotateBorder{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}
    }

    /* Stars */
    .star{
        position:absolute;
        width:16px;
        height:16px;
        background:gold;
        border-radius:50%;
        opacity:0;
        animation:twinkle 3s infinite;
    }
    @keyframes twinkle{
        0%,100%{opacity:0;}
        50%{opacity:1;}
    }