:root{--screen-width:320px;--screen-height:560px;--header-bg-color:#673ab7;--splash-bg-color:#fff}.nav__toggle{z-index:10;cursor:pointer;background:0 0;border:0;border-radius:50%;outline:0;padding:0;transition:background-color .15s linear;display:inline-block;position:absolute;top:100%;right:15px}.nav__toggle:hover,.nav__toggle:focus{background-color:#00000080}.nav__menu{height:var(--screen-height);z-index:5;visibility:hidden;flex-direction:column;justify-content:center;display:flex;position:relative}.nav__item{opacity:0;transition:all .5s cubic-bezier(0,.995,.99,1)}.nav__item:first-child{transform:translateY(40px)}.nav__item:nth-child(2){transform:translateY(80px)}.nav__item:nth-child(3){transform:translateY(120px)}.nav__item:nth-child(4){transform:translateY(160px)}.nav__item:nth-child(5){transform:translateY(200px)}.nav__item:nth-child(6){transform:translateY(240px)}.nav__item:nth-child(7){transform:translateY(260px)}.nav__item:nth-child(8){transform:translateY(300px)}.nav__item:nth-child(9){transform:translateY(320px)}.nav__item:nth-child(10){transform:translateY(340px)}.nav__link{color:#fff;text-align:center;text-transform:uppercase;font-size:1.25rem;text-decoration:none;display:block}.menuicon{cursor:pointer;color:#fff;transition:all .2s cubic-bezier(.165,.84,.44,1);display:block;transform:rotate(0)}.menuicon__bar,.menuicon__circle{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round}.menuicon__bar{transform-origin:50%;transition:transform .25s ease-in-out;transform:rotate(0)}.menuicon__circle{stroke-dashoffset:144.513px;stroke-dasharray:144.513;transition:stroke-dashoffset .3s linear .1s}.splash{width:13px;height:12px;position:fixed;top:50px;right:0}.splash:after{content:"";background-color:var(--splash-bg-color);transform-origin:50%;will-change:transform;border-radius:50%;width:0;height:0;transition:transform .1s cubic-bezier(.755,.05,.855,.06);display:block;position:absolute;top:85vmax;left:-6vmax;transform:scale(0)}.nav:target>.splash:after,.nav--open>.splash:after{width:384vmax;height:384vmax;transform:scale(2)}.nav:target .menuicon,.nav--open .menuicon{color:#fff;transform:rotate(180deg)}.nav:target .menuicon__circle,.nav--open .menuicon__circle{stroke-dashoffset:0}.nav:target .menuicon__bar:first-child,.nav--open .menuicon__bar:first-child,.nav:target .menuicon__bar:nth-child(4),.nav--open .menuicon__bar:nth-child(4){opacity:0}.nav:target .menuicon__bar:nth-child(2),.nav--open .menuicon__bar:nth-child(2){transform:rotate(45deg)}.nav:target .menuicon__bar:nth-child(3),.nav--open .menuicon__bar:nth-child(3){transform:rotate(-45deg)}.nav:target .nav__menu,.nav--open .nav__menu{visibility:visible}.nav:target .nav__item,.nav--open .nav__item{opacity:1;transform:translateY(0)}.viewport{width:var(--screen-width);height:var(--screen-height);background-color:#fff;margin:0 auto;position:relative;overflow:hidden}.gallery{grid-gap:20px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));grid-auto-rows:130px;display:grid}.gallery__item{background-color:#d8d8d8;height:100%}.gallery__item:hover,.gallery__item:focus{background-color:#a4a4a4}.menu{cursor:pointer;background-color:#0000;border:none;padding:0;display:flex}.line{fill:none;stroke-width:6px;transition:stroke-dasharray .6s cubic-bezier(.4,0,.2,1),stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}.line1{stroke-dasharray:60 207;stroke-width:6px}.line2{stroke-dasharray:60 60;stroke-width:6px}.line3{stroke-dasharray:60 207;stroke-width:6px}.opened .line1{stroke-dasharray:90 207;stroke-dashoffset:-134px;stroke-width:6px}.opened .line2{stroke-dasharray:1 60;stroke-dashoffset:-30px;stroke-width:6px}.opened .line3{stroke-dasharray:90 207;stroke-dashoffset:-134px;stroke-width:6px}