body {
    background-color: #01677C;
    color: #4DDDFB;
}
#header {
    height: 6em;
    text-align: center;
    position: relative;
}
#the-shit {
    font-family: 'Khand', sans-serif;
    font-size: 72px;
    animation:  slidein 2s, bounce 4s 0s infinite;
    transition: .5s color, .5s text-shadow;
    cursor: pointer;
    display: block;
    text-shadow: 6px 6px #379DB2, 10px 10px #0187A2, 14px 14px #016e88, 18px 18px #015b74;
    position: relative;
    z-index: 100;
}
.bubble {
    position:absolute;
    bottom: 0;
    z-index: 10;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ddf1f8, #7ec7d7);
    animation-name: float, wiggle;
    animation-duration: 4s;
    animation-iteration-count: 1;
}
#about-me {
    padding: 10px;
    position:relative;
    background: #015065;
    color: white;
    font-family: sans-serif;
    border-radius: 4px;
    box-shadow: 0 0 1px white, 0 0 3px #222;
    z-index: 20;
    text-align: center;
}
#footer{
    color: #888888;
}

@keyframes nothing {
    from{ }
    to{ }
}

@keyframes fadein {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

@keyframes slidein {
    from {
        opacity: 0;
        margin-top: 3em;
    }
    to {
        opacity: 1;
    }
}

@keyframes bounce {
    0% {
        padding-top: 00px;
        text-shadow: 10px 10px #379DB2, 18px 18px #0187A2;
    }
    50% {
        padding-top: 20px;
        text-shadow: 6px 6px #379DB2, 10px 10px #0187A2;
    }
    100% {
        padding-top: 00px;
        text-shadow: 10px 10px #379DB2, 18px 18px #0187A2;
    }
}

@keyframes float {
    0% {
        bottom: -10px;
        opacity: 0;
    }
    5% {
        bottom: 0;
        opacity: 1;
    }
    99% {
        bottom: 100%
    }
    100% {
        opacity: 0;
    }
}
a {
    color: whitesmoke;
}