</div>


<div id="credit" class="text-right">
    <div>Created with <a href="https://web.imasmi.com/webcss" target="blank">WebCss</a></div>
    <div>Created with <a href="https://fontawesome.com/" target="blank">Font Awesome</a></div>
</div>

body{font-family: helvetica, sans-serif; background-color: #000000; color: #ffffff;}
.color-1, .menu-show a{color: #555555;}
#menu-control{list-style-type: none; top: 20px; left: 20px; width: 80px; cursor: pointer; z-index: 2; position: fixed;}
#menu-control li{width: 100%; height: 3px; margin:15px 0; background-color: #ffffff; transition: 0.3s;}
#menu-control.active li{background-color: #000000;}
#menu-control li:first-child{width: 85%;}
#menu-control li:last-child{width: 60%;}
#menu-control:hover li:first-child{width: 100%;}
#menu-control:hover li:nth-child(2){width: 60%;}
#menu-control:hover li:last-child{width: 85%;}
#menu-control.active li:first-child, #menu-control.active:hover li:first-child{transform: rotate(45deg); width: 70%;}
#menu-control.active li:nth-child(2), #menu-control.active:hover li:nth-child(2){width: 0; transition: 0s;}
#menu-control.active li:last-child, #menu-control.active:hover li:last-child{transform: rotate(-45deg) translate(25px, -25px); width: 70%;}

#pages{margin-top: 100px;}
.menu{height: 100%; width: 40%; left: -40%; top: 0; opacity: 0; transition: 0.5s; overflow-y: auto;}
.menu.active{left: 0; opacity: 1;}
.menu ul{list-style-type: none; padding: 0; margin: 0;}
.menu ul li{font-size: 2.3em; margin: 20px 0; position: relative; overflow: hidden;}
.menu ul li a{position: relative; display: block; top: 1em; color: #555555;}
.menu.active ul li a{top: 0; transition: top 0.5s; transition-delay: 0.5s; cursor: pointer;}
.menu ul li a:hover, .menu ul li a:active, .menu.active .menu-show a:hover{color: #000000;}

#menu-info{margin-top: 50px;}
.menu-show{margin: 10px 0; font-size: 1.2em; overflow: hidden; position: relative;}
.menu-show a{text-decoration: none;}
.show-element{position: relative; top: 1.4em;}
.menu.active .show-element{transition: top 0.3s; top: 0;}
.menu.active #show-2 .show-element{transition-delay: 1.2s;}
.menu.active #show-3 .show-element{transition-delay: 1.6s;}
.menu.active #show-4 .show-element{transition-delay: 2s;}
.menu.active #show-5 .show-element{transition-delay: 2.4s;}
#menu-socials li{font-size: 1em; display: inline-block; margin: 0 5px;}

#credit{margin: 50px 50px 0 0; float: right;}
#credit a{color: #97b5d0; text-decoration: none;}

@media (max-width: 1080px){
    .menu{width: 100%; left: -100%;}
}

    function menuOpen(){
        var menu = document.getElementById("header-menu");
        var menuControl = document.getElementById("menu-control");
        if(menu.classList.contains("active")){
            menu.classList.remove("active");
            menuControl.classList.remove("active");
            document.body.style.overflow = "initial";
        } else {
            menu.classList.add("active");
            menuControl.classList.add("active");
            document.body.style.overflow = "none";
        }
    }