body
{
    margin: 0;
    padding: 0;
}
section
{
    position: relative;
    width: 100%;
    height: 100vh;
    background: url(ocean.jpg);
    background-size: cover;
    background-attachment: fixed;
}

section .wave
{
    position: absolute;
    width: 100%;
    height: 143px;
    bottom: 0;
    left: 0;
    background: url(wave.png);
    opacity: 0.6;
    animation: animate 10s linear infinite;
}

section .wave:before
{
    content: '';
    width: 100%;
    height: 143px;
    background: url(wave.png);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.4;
    animation: animate-reverse 10s linear infinite;
}

section .wave:after
{
    content: '';
    width: 100%;
    height: 143px;
    background: url(wave.png);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.6;
    animation-delay: -5s;
    animation: animate 20s linear infinite;
}
@keyframes animate
{
    0%
    {
        background-position: 0;
    }
    100%
    {
        background-position: 1360px;
    }
}

@keyframes animate-reverse
{
    0%
    {
        background-position: 1360px;
    }
    100%
    {
        background-position: 0px;
    }
}

*
{
    padding: 0;
    margin: 0;
    font-family: "HYPE";
}



.container{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%
}

.container span{
    text-transform: uppercase;
    display: block;
}

@font-face {
    src: url(fonts/HYPE.ttf);
    font-family: HYPE;
}

.text1{
    color: #4683ec;
    font-size: 350px;
    font-weight: 700;
    font-family: HYPE; 
    letter-spacing: 0px;
    margin-bottom: 0px;
    position: center;
    animation: text 8s 1;
    text-shadow: 6px 4px #0d3b7c;
}

.text2{
    font-size: 100px;
    font-family: HYPE;
    color:#f0e258;
    letter-spacing: 8px;
    position: center;
    animation: text 5s 1;
    text-shadow: 3px 2px #bfa62d;
}

@keyframes text {
    0%{
        color:white;
        margin-bottom: -40px;
        font-size: 50px;
    }
    30%{
        letter-spacing: 8px;
        margin-bottom: -40px;
        font-size: 200px;
    }
    85%{
        letter-spacing: 8px;
        margin-bottom: -40px;
        font-size: 350px;
    }
}

#myVideo {
    min-width: 100%; 
    min-height: 100%;
  }