* {
    margin: 0;
    padding: 0;
}
.body {
    width: 100%;
    height: 100vh;
    background: #000;
    overflow: hidden;
}
.block {
    color: white;
    width: 350px;
    height: 100px;
    border-radius: 20px;
    font-family: monospace;
    font-weight: bold;
    font-size: 44px;
    transition: 0.3s;
    position: relative;
}
.block::before {
    content: '';
    z-index: -1;
    position: absolute;
    width: 65%;
    background: #000;
    top: 50;
    left: 50;
    transition: 0.2s;
    border-radius: 40px;
}
.block::after {
    content: '';
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    opacity: 0.15;
}
.block:hover {
    background: linear-gradient(170deg, rgba(255,0,209,1) 20%, rgba(73,35,234,1) 39%, rgba(35,144,234,1) 52%, rgba(35,198,234,1) 62%, rgba(35,234,230,1) 75%, rgba(35,234,147,1) 95%);
    animation: gradient 3s ease infinite;
    background-size: 400% 400%;
    cursor: pointer;
}
.block:hover::before {
    box-shadow: 0 -10px 40px 50px #00ffd04b, 0 10px 40px 50px #4000ff5e;
}
.block:hover:after {
    background: url(../noise.gif);
}

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0 50%;
    }
}

.watermark {
    position: absolute;
    font-weight: bold;
    bottom: 20px;
    z-index: 2;
}