.header-button-1 a {
            color: #ffce21;
            background: linear-gradient(to top, #f40000, #dd5f11);
        }

        .header-button-1 a:hover {
            color: #dd5f11;
            background: linear-gradient(to top, #ffce21, #ffffff);
        }

        .header-button-1::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 50%;
            height: 50%;
            -webkit-box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
            box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
            z-index: -1;
            -webkit-animation-name: yellow-shadow;
            animation-name: yellow-shadow;
            -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            border-radius: 7px;
            -webkit-border-radius: 7px;
            -moz-border-radius: 7px;
            -ms-border-radius: 7px;
            -o-border-radius: 7px;
        }

        @keyframes yellow-shadow {
            0% {
                top: 0;
                left: 0;
            }

            25% {
                top: 50%;
                left: 0;
            }

            50% {
                top: 50%;
                left: 50%;
            }

            75% {
                top: 0;
                left: 50%;
            }

            100% {
                top: 0;
                left: 0;
            }
        }

        .header-button-1::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 50%;
            height: 50%;
            -webkit-box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
            box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
            z-index: -1;
            -webkit-animation-name: cyan-shadow;
            animation-name: cyan-shadow;
            -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            border-radius: 7px;
            -webkit-border-radius: 7px;
            -moz-border-radius: 7px;
            -ms-border-radius: 7px;
            -o-border-radius: 7px;
        }


@keyframes cyan-shadow {
            0% {
                right: 0;
                bottom: 0;
            }

            25% {
                right: 0;
                bottom: 50%;
            }

            50% {
                right: 50%;
                bottom: 50%;
            }

            75% {
                right: 50%;
                bottom: 0;
            }

            100% {
                right: 0;
                bottom: 0;
            }
        }


.header-button-2 a {
            color: #ffce21;
            background: linear-gradient(to top, #f40000, #dd5f11);
        }

        .header-button-2 a:hover {
            color: #dd5f11;
            background: linear-gradient(to top, #ffce21, #ffffff);
        }

        .header-button-2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 50%;
            height: 50%;
            -webkit-box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
            box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
            z-index: -1;
            -webkit-animation-name: yellow-shadow;
            animation-name: yellow-shadow;
            -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            border-radius: 7px;
            -webkit-border-radius: 7px;
            -moz-border-radius: 7px;
            -ms-border-radius: 7px;
            -o-border-radius: 7px;
        }

        @keyframes yellow-shadow {
            0% {
                top: 0;
                left: 0;
            }

            25% {
                top: 50%;
                left: 0;
            }

            50% {
                top: 50%;
                left: 50%;
            }

            75% {
                top: 0;
                left: 50%;
            }

            100% {
                top: 0;
                left: 0;
            }
        }

        .header-button-2::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 50%;
            height: 50%;
            -webkit-box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
            box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
            z-index: -1;
            -webkit-animation-name: cyan-shadow;
            animation-name: cyan-shadow;
            -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            border-radius: 7px;
            -webkit-border-radius: 7px;
            -moz-border-radius: 7px;
            -ms-border-radius: 7px;
            -o-border-radius: 7px;
        }
h1 {text-transform: uppercase;
   background-image: linear-gradient(-225deg, #d9d911 0, #bb7316 25%, #14a926 30%, #fdfdfd 45%, #f2f50b 50%, #0d9494 67%, #d0d5db 80%, #ff8507 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 7s linear infinite textclip;
    display: inline-block;}
@keyframes textclip{0% {
    background-position: 500% center;
}}