/* onderka.com client parking page */

body {
    user-select: none;
    padding: 10px;
    text-align: center;
    font-size: 2em;
    font-family: sans-serif;
    background: #ffffff;
    overflow: hidden;
    background: linear-gradient(60deg, rgba(0, 94, 189, 1) 0%, rgba(0,172,193,1) 100%);
}

#content {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 90%;
    color: #ffffff;
    transform: translate(-50%, -50%);
}

a,
a:visited,
a:hover,
a:active {
    color: #ffffff;
}

.smaller {
    font-size: 50%;
}

#ocean{
    position:absolute;
    width: 100%;
    min-height: 100%;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgba(0, 94, 189, 1)),
        color-stop(0.50, rgb(0,150,255))
    );
}

.wave{
    background:#a8e3ff;
    display:inline-block;
    height:60%;
    width:10px;
    position:absolute;
    -webkit-animation-name:             dostuff;
    -webkit-animation-duration:         3s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: ease-in-out;
}

@-webkit-keyframes dostuff{
    0% {
        height: 60%;
    }
    50% {
        height: 40%;
    }
    100% {
        height: 60%;
    }
}

.waves {
    position:absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 15vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px;
}

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px,0,0);
    }
    100% {
        transform: translate3d(85px,0,0);
    }
}

@media (max-width: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }

    .content {
        height: 30vh;
    }

    h1 {
        font-size: 24px;
    }
}