#head {
    background: linear-gradient(-45deg, #3cb537a6, #2999c1bd, #ca44448e);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
  
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
@import url(https://fonts.googleapis.com/css?family=Montserrat);
.navbar {
    list-style-type: none;
    background: linear-gradient(#f9f9f9, #b1c0cd);
    border-radius: 8px;
    border: solid 1px #eee;
}

a, li {
    position: relative
}

ul {
    margin: 0px auto 0;
    padding: 0;
    list-style: none;
    display: table;
    font-family: Georgia, serif;
    text-align: center
}

li {
    display: table-cell
}

a {
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .15em;
    display: inline-block;
    padding: 15px 20px
}

    a:after {
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        position: absolute;
        background: #000;
        transition: width .3s ease 0s,left .3s ease 0s;
        width: 0
    }

    a:hover:after {
        width: 100%;
        left: 0
    }