:root {
    --722-card-color: #F9D199;
    --722-header-color: #8A775C;
    --722-inner-color: #3b6573;

    --722-wave-deep-color: #BBDBF7;

    --722-wave-deeper-color: #92C4EE;
    --722-wave-deeper-width: 100px;
    --722-wave-deeper-height: -20px;
    --722-wave-deeper-anim-height: 15px;

    --722-wave-deepest-color: #64ABC3;
    --722-wave-deepest-width: 125px;
    --722-wave-deepest-height: 100px;
    --722-wave-deepest-anim-height: 25px;
}

@keyframes wave-deeper-x {
    0% {
        background-position-x: 0px;
    }
    100% {
        background-position-x: var(--722-wave-deeper-width);
    }
}

@keyframes wave-deeper-y {
    0% {
        background-position-y: 0px 0px;
    }
    50% {
        background-position-y: 0px calc(var(--722-wave-deeper-anim-height) * -1);
    }
    100% {
        background-position-y: 0px 0px;
    }
}

@keyframes wave-deepest-x {
    0% {
        background-position-x: 0px;
    }
    100% {
        background-position-x: var(--722-wave-deepest-width);
    }
}

@keyframes wave-deepest-y {
    0% {
        background-position-y: 0px;
    }
    50% {
        background-position-y: calc(var(--722-wave-deepest-anim-height) * -1);
    }
    100% {
        background-position-y: 0px;
    }
}

.profile-722 .profile-card {
    background-color: var(--722-card-color);
}

.profile-722 .profile-header .profile-title,
.profile-722 .profile-header .profile-text {
    color: var(--722-header-color);
}

.profile-722 .profile-inner .profile-title,
.profile-722 .profile-inner .profile-text {
    color: var(--722-inner-color);
}

.profile-722 .profile-title,
.profile-722 .profile-text {
    text-shadow: 1px 1px 1px #000;
}

.profile-722 .profile-inner {
    background: radial-gradient(var(--722-wave-deeper-width) 100px at 50% var(--722-wave-deeper-height), var(--722-wave-deep-color) 70px, transparent 75px);
    background-size: var(--722-wave-deeper-width) calc(100% + var(--722-wave-deeper-anim-height));
    background-repeat: repeat-x;
    background-color: var(--722-wave-deeper-color);

    border-radius: var(--redsun-profile-border-radius);
    position: sticky;   /* For mozilla to make :before not go crazy */

    -webkit-animation: wave-deeper-y 8s ease-in-out infinite, wave-deeper-x 10s linear infinite;
    -moz-animation: wave-deeper-y 8s ease-in-out infinite, wave-deeper-x 10s linear infinite;
    -ms-animation: wave-deeper-y 8s ease-in-out infinite, wave-deeper-x 10s linear infinite;
    animation: wave-deeper-y 8s ease-in-out infinite, wave-deeper-x 10s linear infinite;
}

.profile-722 .profile-inner:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: calc(100% - var(--722-wave-deepest-height));
    left: 0;
    top: var(--722-wave-deepest-height);
    z-index: -1;

    border-radius: var(--redsun-profile-border-radius);

    background: radial-gradient(var(--722-wave-deepest-width) 100px at 50% 0px, var(--722-wave-deeper-color) 70px, transparent 75px);
    background-size: var(--722-wave-deepest-width) calc(100% + var(--722-wave-deepest-anim-height));
    background-repeat: repeat-x;
    background-color: var(--722-wave-deepest-color);

    -webkit-animation: wave-deepest-y 5s ease-in-out infinite, wave-deepest-x 7s linear infinite;
    -moz-animation: wave-deepest-y 5s ease-in-out infinite, wave-deepest-x 7s linear infinite;
    -ms-animation: wave-deepest-y 5s ease-in-out infinite, wave-deepest-x 7s linear infinite;
    animation: wave-deepest-y 5s ease-in-out infinite, wave-deepest-x 7s linear infinite;
}

.profile-722 .profile-button:hover,
.profile-722 .profile-button:hover:before {
    background: none;
    background-color: var(--722-wave-deepest-color);
}