Style.css

*{
    margin: 0%;
    padding: 0%;
    font-family: sans-serif;
}
.container{
    background-color: rgba(68, 22, 29, 0.84);
    height: 100vh;
    width: 100%;
    text-align: center;
    position: absolute;
}
.wrapper{
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.wrapper p{
    position: relative;
    display: inline-block;
    color: white;
    z-index: 999999;
    font-size: 48px;
    margin-bottom: 220px;
}
.wrapper p::before{
    content: '';
    position: absolute;
    width: 325px;
    height: 325px;
    background-color: #1f1719;
    z-index: -1;
    border-radius: 50%;
    left: -31%;
    top: -195%;
    animation-name: round;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}
@keyframes round{
    0% , 100%{
            box-shadow: 0px  0px  32px -12px  rgba(246, 12, 0, 0.661);
    }
    50%{
        box-shadow: 0px  0px  32px 3px  rgba(246, 90, 0, 0.5);
    }
}
button{
    background-color: rgba(0, 0, 0, 0.889);
    padding: 15px 48px;
    border: 1px solid #A9A9A9;
    border-radius: 28px;
    color: #fff;
    transition: all .2s ease;
    outline: 0;
    font-size: 16px;
}
button:hover,
button:focus{
    border-color: hsl(15, 100%, 48%);
    color: #f63e00;
    box-shadow: 0px 4px 27px -12px  #f63500;
    
}