/*Fade in on load*/
div {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


.rainbow-text { 
    background: linear-gradient(124deg, #e81d1d, #969642, #67910a, #198c2d, #1da334, #49bfbd, #93209e, #d14391);
    background-size: 1800% 1800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: rainbow 30s ease infinite;
    -z-animation: rainbow 30s ease infinite;
    -o-animation: rainbow 30s ease infinite;
    animation: rainbow 30s ease infinite;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
}
@keyframes rainbow { 
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
}

.rainbow-on-hover:hover {
    background: linear-gradient(124deg, #000000, #e81d1d, #969642, #67910a, #198c2d, #1da334, #49bfbd, #93209e, #d14391);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: rainbow 5s ease infinite;
    -z-animation: rainbow 5s ease infinite;
    -o-animation: rainbow 5s ease infinite;
    animation: rainbow 5s ease infinite;
}