body,html{margin:0;padding:0;font-family:sans-serif;height:100%}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;height:100%;display:flex;flex-direction:column}.nav-wrapper{.menu-icon{position:fixed;top:5vw;right:5vw;width:2rem;height:2rem;z-index:1;.line{position:absolute;display:block;background-color:#fff;width:100%;height:10%}.line:first-of-type{top:0}.line:nth-of-type(2){top:45%}.line:nth-of-type(3){bottom:0}}&.open{.menu-icon{.line:first-of-type{transform-origin:top left;transform:rotate(45deg);width:2.82rem}.line:nth-of-type(2){opacity:0}.line:nth-of-type(3){transform-origin:bottom left;transform:rotate(-45deg);width:2.82rem}}}}nav{transition:opacity .7s ease;a{font-weight:700;color:#2c3e50;text-decoration:none;&.router-link-exact-active{color:#1e90ff}}}@media(min-width:768.01px){nav{text-align:right;position:fixed;left:0;right:0;top:0;padding:30px;z-index:2;a{margin:0 1rem}}.nav-wrapper{.menu-icon,a.close{display:none}}}@media(max-width:768px){.nav-wrapper{nav{height:100%;width:0;position:fixed;z-index:1;top:0;right:0;width:15rem;text-align:right;transform:translateX(15rem);background-color:#6cc9a5;filter:none;padding-top:2.5rem;transition:transform .7s ease-out,filter .7s ease-out,opacity .7s ease;a{margin-left:5rem;padding:.25rem .75rem .25rem 1rem;text-decoration:none;display:block;transition:.3s;font-size:1.5rem;&.close{border-left:3px solid #0008;border-top:3px solid #0008;border-bottom:3px solid #0008;border-top-left-radius:10px;border-bottom-left-radius:10px;img{width:1.75rem;vertical-align:bottom}}}.letter-icon{display:inline-block;position:absolute;top:.75rem;right:.5rem;width:1.5rem;height:1.5rem;margin-left:.5rem;margin-right:.5rem;background-color:#bd4343;border-radius:.75rem;color:#fff;font-weight:700;text-align:center;line-height:1.57rem}}&.open{nav{transform:translateX(0);filter:drop-shadow(0 0 .75rem #000)}}}}.page{width:100%;max-width:800px;margin:0 auto}