@import url('https://fonts.googleapis.com/css?family=Nunito:400,600,700');

body {
    font-family: 'Nunito', sans-serif;
    background-color: skyblue;
}

.btn {
    margin-bottom: 100px;
}

.container {
    margin-top: 150px;
}

.text-center {
    text-align: center;
}

.rainbow {
    background-color: #343A40;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    padding: 16px 30px;
}

.rainbow-1 {
    color: orangered;
}

.rainbow-1:hover {
    background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
    animation: slidebg 5s linear infinite;
}

.rainbow-2 {
    color: yellow;
}

.rainbow-2:hover {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red);
    animation: slidebg 2s linear infinite;
}

.rainbow-3 {
    color: lawngreen;
}

.rainbow-3:hover {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, red);
    animation: slidebg 2s linear infinite;
}

.rainbow-4 {
    color: skyblue;
}

.rainbow-4:hover {
    background-image: linear-gradient(to right,
            #E7484F,
            #F68B1D,
            #FCED00,
            #009E4F,
            #00AAC3,
            #732982);
    animation: slidebg 2s linear infinite;
}

.rainbow-5 {
    color: violet;
}

.rainbow-5:hover {
    background-image: linear-gradient(to right,
            #E7484F,
            #E7484F 16.65%,
            #F68B1D 16.65%,
            #F68B1D 33.3%,
            #FCED00 33.3%,
            #FCED00 49.95%,
            #009E4F 49.95%,
            #009E4F 66.6%,
            #00AAC3 66.6%,
            #00AAC3 83.25%,
            #732982 83.25%,
            #732982 100%,
            #E7484F 100%);
    animation: slidebg 2s linear infinite;
}


@keyframes slidebg {
    to {
        background-position: 20vw;
    }
}