/* for the pen */
            
            html,
            body {
                margin: 0;
                min-height: 100%;
                background-color: #000;
                font-family: Montserrat, "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
            }
            /* waves */
            
            footer {
                width: 100vw;
                position: fixed;
                bottom: 0px
            }
            
            footer div {
                background-color: #4478e3;
                margin: -5px 0px 0px 0px;
                padding: 0px;
                color: #fff;
                text-align: center;
            }
            
            svg {
                width: 100%;
            }
            
            .arrow {
                stroke-width: .3px;
                stroke: yellow;
            }
            
            .topball {
                animation: ball 1.5s ease-in-out;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                animation-delay: 0.3s;
                cursor: pointer;
            }
            
            .wave {
                animation: wave 3s linear;
                animation-iteration-count: infinite;
                fill: #00fEC5;
            }
            
            .drop {
                fill: transparent;
                animation: drop 5s ease infinite normal;
                stroke: #00fEC5;
                stroke-width: 0.5;
                opacity: .6;
                transform: translateY(80%);
            }
            
            .drop1 {
                transform-origin: 20px 3px;
            }
            
            .drop2 {
                animation-delay: 3s;
                animation-duration: 3s;
                transform-origin: 25px 3px;
            }
            
            .drop3 {
                animation-delay: -2s;
                animation-duration: 3.4s;
                transform-origin: 16px 3px;
            }
            
            .gooeff {
                filter: url(#goo);
            }
            
            #wave2 {
                animation-duration: 5s;
                animation-direction: reverse;
                opacity: .6
            }
            
            #wave3 {
                animation-duration: 7s;
                opacity: .3;
            }
            
            @keyframes drop {
                0% {
                    transform: translateY(80%);
                    opacity: .6;
                }
                80% {
                    transform: translateY(80%);
                    opacity: .6;
                }
                90% {
                    transform: translateY(10%);
                    opacity: .6;
                }
                100% {
                    transform: translateY(0%) scale(1.5);
                    stroke-width: 0.2;
                    opacity: 0;
                }
            }
            
            @keyframes wave {
                to {
                    transform: translateX(-100%);
                }
            }
            
            @keyframes ball {
                to {
                    transform: translateY(20%);
                }
            }
            
            nav {
                position: fixed;
                top: 0;
                width: 100vw;
                z-index: 2;
            }
            
            aside {
                background-color: #bfbfbf;
                box-shadow: 0 1px 10px;
                padding: 1em;
                display: grid;
                grid-template-columns: auto 40px;
                z-index: 1;
            }
            
            #avatar {
                width: 50px;
                border-radius: 50%;
                display: none;
            }
            
            figcaption {
                color: #fff;
                font-size: 1.4em;
                font-weight: bold;
            }
            
            .hamburger {
                cursor: pointer;
                width: 30px;
                height: 30px;
                z-index: 3;
            }
            
            .bar {
                display: block;
                width: 30px;
                height: 5px;
                margin: 5px 0;
                background: white;
                border-radius: 15px;
                transition: 0.2s ease-in;
            }
            
            .responsive :first-child {
                transform: rotate(45deg) translate(7px, 7px);
            }
            
            .responsive :nth-child(2) {
                opacity: 0;
            }
            
            .responsive :last-child {
                transform: rotate(-45deg) translate(7px, -7px);
            }
            
            ul {
                background-color: #fff;
                padding: .5em 0;
                position: relative;
                left: -100%;
                z-inex: 0;
                transition: left .7s ease-out;
                -moz-transition: left .7s ease-out;
                -webkit-transition: left .7s ease-out;
            }
            
            .active {
                left: 0;
                width: 100%;
                transition: left .7s ease-out;
                -moz-transition: left .7s ease-out;
                -webkit-transition: left .7s ease-out;
            }
            
            ul {
                width: auto;
            }
            
            ul li {
                list-style-type: none;
                margin: 1em 0;
            }
            
            ul li a {
                text-decoration: none;
                color: #000;
                font-size: 1.3em;
                display: block;
                text-align: center;
            }
            
            main {
                background-color: #000;
                margin: 2em;
                height: 80vh;
                box-shadow: 3px 3px;
            }
            
            #home {
                display: flex;
                flex-direction: column;
                /*height: auto;*/
            }
            
            .caption {
                text-align: center;
                padding-top: 5em;
                font-weight: bold;
                text-transform: uppercase;
                line-height: 1.3;
                color: #fff;
            }
            
            .cta {
                background-color: #e3b245;
                text-decoration: none;
                color: #fff;
                padding: 1em;
                border-radius: 8px;
                display: inline-block;
                margin: 2em auto;
                text-align: center;
                font-size: 18px;
                font-weight: 600;
            }
            
            @media only screen and (min-width: 768px) {
                nav {
                    position: fixed;
                    top: 0;
                    width: 100vw;
                    overflow: hidden;
                }
                #avatar {
                    display: block;
                    float: left;
                }
                figcaption {
                    display: inline-block;
                    margin: .5em 1em;
                }
                .hamburger {
                    display: none;
                }
                ul {
                    background-color: inherit;
                    display: block;
                    position: absolute;
                    top: 0;
                    left: auto;
                    right: 0;
                    right: 20px;
                }
                ul li {
                    display: inline-block;
                    height: 60px;
                    margin: 0;
                }
                ul li a {
                    color: #fff;
                    padding: 1.4em 1em;
                    margin: 0 -3px;
                }
                ul li a:hover {
                    background-color: #7F9ED5;
                    transition: ease-in-out .5s, ease in-out .5s;
                }
                .caption {
                    text-align: left;
                    width: 50%;
                    font-size: 24px;
                }
                .cta {
                    margin-left: 17%;
                    margin-top: -0.5em;
                }
            }
            
            @media screen and (min-width: 1000px) and (max-width: 1200px) {
                .caption {
                    font-size: 22px;
                }
            }
            
            @media screen and (min-width: 768px) and (max-width:999px) {
                .caption {
                    font-size: 19px;
                    width: 57%;
                }
            }
            
            @media screen and (min-width: 1201px) and (max-width:1440px) {
                .caption {
                    font-size: 23px;
                }
            }

            @media screen and (min-width: 320px) and (max-width:767px) {
                .cta{
                    margin-left: none;
                    margin-top: 0.5em;
                }
            }


            .caption img{
                width: 150px;
            }