<div class="container">

        <header>
            <a href="#" class="logo">NatureComp</a>

            <nav>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/menu.svg" alt="menu">
            </nav>
        </header>

        <h1 class="lax" data-lax-translate-y="0 0, 400 -400">View on Mobile Resolution</h1>
        <div class="line lax" data-lax-opacity="0 1, 100 0"></div>

    </div>

    <div class="container secondary lax" data-lax-translate-y="0 0, 400 -600" data-lax-opacity="0 0, 300 1">
        <h2>Strategic</h2>
        <p class="subtext">Alliances</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur excepturi saepe vero, delectus cum nulla consequuntur qui illum minus vel architecto officiis sunt totam similique pariatur culpa eligendi repudiandae inventore.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur excepturi saepe vero, delectus cum nulla consequuntur qui illum minus vel architecto officiis sunt totam similique pariatur culpa eligendi repudiandae inventore.</p>
    </div>  

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/mountains.png" alt="Mountains" class="mountains lax" data-lax-translate-y="0 1, 400 -100">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/forest.png" alt="Mountains" class="trees lax" data-lax-translate-y="0 1, 400 -260">

@import url('https://fonts.googleapis.com/css?family=Nobile:400,700&display=swap');

body {
    margin: 0;
    height: 100vh;
    background: #191919;
    font-family: 'Nobile';
}

*, *:before, *:before {
    box-sizing: border-box;
}

.container {
    padding: 2em;
    height: 100vh;
    
    &:first-child {
        display: grid;
        grid-template-rows: 10% 30% auto;
    }

    h1 {
        text-align: center;
        margin-top: 2em;
        font-weight: normal;
        font-size: 3em;
        line-height: .9em;
    }

    p {
        line-height: 1.5em;
        color: rgb(194,194,194);
    }

    .line {
        align-self: end;
        width: 50%;
        border-right: 1px solid white;
        height: 50%;
        margin-bottom: 4em;
        position: relative;

        &::after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 11px 11px 0 11px;
            border-color: white transparent transparent transparent;
            right: -.7em;
            bottom: -2px;
        }
    }

}

header {
     display: flex;
     justify-content: space-between;
}

.logo {
    color: black;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
}
h2 {
    color: white;
    font-size: 3em;
    margin: 0;
    font-weight: normal;
}
.subtext {
    margin-top: 0;
    font-size: 1.4em;
    text-transform: uppercase;
}
.secondary {
    margin-top: -3em;
}
.mountains, .trees {
    position: absolute;
    z-index: -1;
    width: 100%;
}
.mountains {
    top: 0;
}
.trees {
    top: 18%;
}

@media only screen and (min-width: 665px) {
    .mountains {
        top: -25%;
    }
    
    .trees {
        top: -5%;
    }
}

@media only screen and (min-width: 930px) {
    .mountains {
        top: -60%;
    }
    
    .trees {
        top: -30%;
    }
}

@media only screen and (min-width: 1050px) {
    .mountains {
        top: -60%;
    }
    
    .trees {
        top: -40%;
    }
}

        window.onload = function() {
            lax.setup() // init

            const updateLax = () => {
                lax.update(window.scrollY)
                window.requestAnimationFrame(updateLax)
            }

            window.requestAnimationFrame(updateLax)
        }