/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}

@media only screen and (min-width : 450px) {
    .header-button a {
        border: none;
        background: linear-gradient(141deg, #000 0, #1c9cfe 60%, #000);
        width: 200px;
    }
    
    .header-button:before {
        content: "";
        background: linear-gradient(45deg, red, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, red);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: gradient-btn 20s linear infinite;
        transition: opacity .3s ease-in-out;
        border-radius: 10px;
    }
    
    @keyframes gradient-btn {
        0%, 100% { background-position: 0 0; }
        50% { background-position: 400% 0; }
    }
}