@import "https://fonts.googleapis.com/css?family=Cabin";body,html{font-family:cabin,sans-serif;background-color:aqua;margin:0}body a,html a{text-decoration:none}header{padding:2em}header .logo{color:#000;font-weight:700}header .menu-btn{width:18px;float:right;cursor:pointer}section{padding:4em}section h1{font-size:4em;margin:1em auto;width:70%;text-transform:uppercase}section h1::before{content:'';border-top:6px solid #000;display:block}nav{position:absolute;background:#000;padding:2em;width:calc(100% - 4em);height:calc(100vh - 4em);display:none;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:right;transform-origin:right}nav .close-button{width:18px;float:right;cursor:pointer;opacity:0}nav ul{list-style-type:none;margin:10% auto 0;padding:0;display:-ms-grid;display:grid;-ms-grid-columns:(auto)[4];grid-template-columns:repeat(4,auto);width:80%}nav ul a{color:#fff;font-weight:700;font-size:1.4em}nav ul span{color:gray;display:block;font-size:.75em;margin-top:20px}nav ul li{opacity:0}.show-menu{display:block;-webkit-animation:slide-menu 1s ease-in forwards;animation:slide-menu 1s ease-in forwards}.show-menu .close-button{-webkit-animation:show-x 1s 1s forwards;animation:show-x 1s 1s forwards}.show-menu li:nth-of-type(1){-webkit-animation:menu-item-anim .6s forwards 1s ease-in-out;animation:menu-item-anim .6s forwards 1s ease-in-out}.show-menu li:nth-of-type(2){-webkit-animation:menu-item-anim .6s forwards 1.2s ease-in-out;animation:menu-item-anim .6s forwards 1.2s ease-in-out}.show-menu li:nth-of-type(3){-webkit-animation:menu-item-anim .6s forwards 1.6s ease-in-out;animation:menu-item-anim .6s forwards 1.6s ease-in-out}.show-menu li:nth-of-type(4){-webkit-animation:menu-item-anim .6s forwards 1.8s ease-in-out;animation:menu-item-anim .6s forwards 1.8s ease-in-out}@-webkit-keyframes slide-menu{from{-webkit-transform:scaleX(0);transform:scaleX(0)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes slide-menu{from{-webkit-transform:scaleX(0);transform:scaleX(0)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@-webkit-keyframes show-x{from{opacity:0}to{opacity:1}}@keyframes show-x{from{opacity:0}to{opacity:1}}@-webkit-keyframes menu-item-anim{from{-webkit-transform:translateY(70%);transform:translateY(70%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes menu-item-anim{from{-webkit-transform:translateY(70%);transform:translateY(70%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}