body {
    /* background-image: url(../img/background.png); */
    background-repeat: no-repeat;
    background-size: 100% auto;
}

div {
    color: white;
    background-color: rgba(214, 205, 205, 0.322);
    border-radius: 10px;
    box-shadow: 10px 10px 10px 1px rgb(0, 0, 0, .3);
    padding: 20px;
    animation: backgroundrainbow 20s infinite linear;
}

a {
    display: inline-block;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, .2);
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    margin: 2px;
}


a:hover {
    background-color: rgba(0, 98, 204, .4);
    color: #fff;
    animation: colorrainbow 7s infinite linear;
}

@keyframes backgroundrainbow {
    0% {
        background-color: rgba(255, 0, 0, .332);
    }

    14% {
        background-color: rgba(255, 165, 0, .332);
    }

    28% {
        background-color: rgba(255, 255, 0, .332);
    }

    44% {
        background-color: rgba(0, 255, 0, .332);
    }

    58% {
        background-color: rgba(0, 127, 255, .332);
    }

    72% {
        background-color: rgba(0, 0, 255, .332);
    }

    86% {
        background-color: rgba(139, 0, 255, .332);
    }

    100% {
        background-color: rgba(255, 0, 0, .332);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 1s infinite;
}

@keyframes colorrainbow {
    0% {
        color: rgba(255, 0, 0);
    }

    14% {
        color: rgba(255, 165, 0);
    }

    28% {
        color: rgba(255, 255, 0);
    }

    44% {
        color: rgba(0, 255, 0);
    }

    58% {
        color: rgba(0, 127, 255);
    }

    72% {
        color: rgba(0, 0, 255);
    }

    86% {
        color: rgba(139, 0, 255);
    }

    100% {
        color: rgba(255, 0, 0);
    }
}