/* Animations */
body {

    --wave-timing1: 0.5s;
    --wave-timing2: 0.8s;
    --wave-timing3: 1.1s;
    --wave-timing4: 1.4s;
    --wave-start-time: 1.4s;
    --wave-animation-duration: 6s;

    --title-rise-time: 1.5s;
    --title-rise-delay: 1.4s;
}

/* Theme */
body {
    --title-color: rgb(49, 49, 49);
    --section-title-color: #fff;
    --section-content-color: #fff;
    --footer-content-color: #fff;
}

/* fonts */
body {
    --title-font: 'Orelega One', sans-serif;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.page {
    display: flex;
    flex-direction: column;
}

.splash {
    height: 100vh;
    display: flex;
    background: linear-gradient(27deg, rgb(70, 185, 252) 0%, rgb(226, 238, 247) 100%);
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;
    /* align-items: stretch; */
    /* background-color: brown; */
    width: 100%;
    position: relative;
    z-index: -4;
}

.splashTop {
    display: inline-flex;
    /* background-color: aquamarine; */
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    overflow: show;
}

.splashBottom {
    position: relative;
    bottom: 0;
    left: 0;
    display: inline-flex;
    flex-direction: column;
    /* background-color: seagreen; */
    height: calc(var(--wave-height) * 2);
    width: 100%;
    overflow: hidden;
}

.splash .title {
    display: inline-flex;
    font-weight: 500;
    font-size: var(--splash-font-size);
    margin: 0 25px 0 25px;
    font-family: var(--title-font);
    text-shadow: var(--splash-title-shadow-offset) 0 rgba(0, 0, 0, 0.26);
    color: var(--title-color);

    animation: titleReveal var(--title-rise-time) ease-out var(--title-rise-delay) both;
    z-index: -4;
}

@keyframes titleReveal {
    from {
        transform: translateY(calc(50vh + 200%));
        /* transform: translateY(0vh); */
    }

    to {
        transform: translateY(0vh);
    }
}

.wave {
    position: absolute;
    bottom: 0;
    left: -25%;
    /* background-color: brown; */
    width: 150%;
    height: var(--wave-height);
    flex-shrink: 0;
    background-size: contain;
}

.wave.light {
    background-image: url(img/waveLight.svg);
}

.wave.dark {
    background-image: url(img/waveDark.svg);
}

.wave.wave1 {
    bottom: var(--wave-height);
    animation:
        waveLeftArrive var(--wave-timing1) ease-out 0s forwards,
        waveLeft var(--wave-animation-duration) ease-in-out calc(var(--wave-start-time) + 0.1s) infinite;
}

.wave.wave2 {
    bottom: calc(var(--wave-height) / 2);
    animation:
        waveRightArrive var(--wave-timing2) ease-out 0s forwards,
        waveRight var(--wave-animation-duration) ease-in-out calc(var(--wave-start-time) + 0.1s) infinite;
}

.wave.wave3 {
    bottom: 0px;
    animation:
        waveLeftArrive var(--wave-timing3) ease-out 0s forwards,
        waveLeft var(--wave-animation-duration) ease-in-out calc(var(--wave-start-time) + 0.1s) infinite;
}

.wave.wave4 {
    bottom: calc(var(--wave-height) / -2);
    animation:
        waveRightArrive var(--wave-timing4) ease-out 0s forwards,
        waveRight var(--wave-animation-duration) ease-in-out calc(var(--wave-start-time) + 0.1s) infinite;
}


@keyframes waveLeftArrive {
    from {
        transform: translate(50px, 500px);
        /* transform: translate(50px, 0px); */
    }

    to {
        transform: translate(50px, 0px);
    }
}

@keyframes waveLeft {
    0% {
        transform: translate(50px, 0px);
        animation-timing-function: ease-in;
    }

    25% {
        transform: translate(0px, var(--wave-swing-height));
        animation-timing-function: ease-out;
    }

    50% {
        transform: translate(-50px, 0px);
        animation-timing-function: ease-in;
    }

    75% {
        transform: translate(0px, var(--wave-swing-height));
        animation-timing-function: ease-out;
    }

    100% {
        transform: translate(50px, 0px);
    }
}

@keyframes waveRightArrive {
    from {
        /* transform: translate(-50px, 0px); */
        transform: translate(-50px, 500px)
    }

    to {
        transform: translate(-50px, 0px);
    }
}

@keyframes waveRight {
    0% {
        transform: translate(-50px, 0px);
        animation-timing-function: ease-in;
    }

    25% {
        transform: translate(0px, var(--wave-swing-height));
        animation-timing-function: ease-out;
    }

    50% {
        transform: translate(50px, 0px);
        animation-timing-function: ease-in;
    }

    75% {
        transform: translate(0px, var(--wave-swing-height));
        animation-timing-function: ease-out;
    }

    100% {
        transform: translate(-50px, 0px);
    }
}

.underwater {
    background: linear-gradient(180deg, #397cb0 0%, #17354d 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
}

.section {
    display: inline-flex;
    flex-direction: column;
    margin-top: 50px;
    margin-bottom: 150px;
    align-items: center;
    width: 100%;
}
.section .title {
    font-size: var(--section-title-size);
    font-family: var(--title-font);
    color: var(--section-title-color);
    margin-bottom: 15px;
    text-align: center;
    text-shadow: var(--section-titloffsete-shadow-offset) 2px rgba(0, 0, 0, 0.26);
}
.section .content {
    max-width: var(--section-content-max-width);
    width: var(--section-content-width);
    color: var(--section-content-color);
    text-align: center;
    font-size: var(--section-content-size);
    text-shadow: var(--section-content-shadow-offset) 2px rgba(0, 0, 0, 0.26);
}
.footer {
    display: inline-flex;
    background-color: #128571;
    background-color: #91843e;
    width: 100%;
    margin-top: var(--footer-height);
    position: relative;
    /* height: 300px; */
    flex-direction: row;
    color: var(--footer-content-color);
}
.footer .topper {
    position: absolute;
    top: calc(-1 * var(--footer-height));
    width: 100%;
    height: var(--footer-height);
    transform: translateY(2px);
    background: url(img/SeaFloor.svg);
    background-size: auto 100%;
    background-repeat: repeat-x;
}
.footer .content {
    display: inline-flex;
    flex-direction: row;
    font-size: var(--section-content-size);
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    padding: 15px;
}
.footer .content .item {
    /* background-color: pink; */
    display: inline-flex;
    margin: 5px;
}
.footer .content .item span, .footer .content .item a {
    margin-left: 5px;
    margin-right: 5px;
}
.footer .content a {
    color: var(--footer-content-color);
}

@media (hover: hover) {
}