:root{--color-primary:#978bd1;--color-secondary:#fff;--duration:1s;--nav-duration:calc(var(--duration)/4);--ease:cubic-bezier(0.215,0.61,0.355,1);--space:1rem;--font-primary:"Exo",sans-serif;--font-heading:"Helvetica",sans-serif;--font-size:.2rem;--line-height:1.5}*{-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:var(--font-primary);font-size:var(--font-size);line-height:var(--line-height)}h1{font-family:var(--font-heading);font-size:.5rem;line-height:calc(var(--line-height)/1.25);margin-bottom:calc(var(--space)*3)}.main-navigation-toggle{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.main-navigation-toggle+label{cursor:pointer;position:absolute;right:30px;top:15px;z-index:2}.icon--menu-toggle{--size:calc(1rem + 4vmin);-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;stroke-width:6;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:36px;justify-content:center;width:40px}.icon-group{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform var(--nav-duration) var(--ease);transition:-webkit-transform var(--nav-duration) var(--ease);transition:transform var(--nav-duration) var(--ease);transition:transform var(--nav-duration) var(--ease),-webkit-transform var(--nav-duration) var(--ease)}.icon--menu{stroke:#000}.icon--close{stroke:var(--color-secondary);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.main-navigation{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;left:0;position:fixed;top:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform var(--nav-duration);transition:-webkit-transform var(--nav-duration);transition:transform var(--nav-duration);transition:transform var(--nav-duration),-webkit-transform var(--nav-duration);width:100%;z-index:1}.main-navigation:after{background-color:var(--color-primary);content:"";height:100%;left:0;position:absolute;top:0;-webkit-transform-origin:0 50%;transform-origin:0 50%;width:100%;z-index:-1}.main-navigation ul{font-family:var(--font-heading);font-size:6vmin;width:100%}.main-navigation li{--border-size:1vmin;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;position:relative}.main-navigation li:after{background-color:var(--color-secondary);bottom:0;content:"";height:var(--border-size);left:0;position:absolute;-webkit-transform:translateX(-100%) skew(15deg);transform:translateX(-100%) skew(15deg);-webkit-transform-origin:0 50%;transform-origin:0 50%;width:100%}.main-navigation a{color:var(--color-secondary);display:inline-block;line-height:1;margin:0 auto;max-width:800px;padding:var(--space) calc(var(--space)*2) calc(var(--space) + var(--border-size)/2);text-decoration:none;-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.main-content{margin:6rem auto;max-width:70ch;padding:0 calc(var(--space)*2);-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform calc(var(--nav-duration)*2) var(--ease);transition:-webkit-transform calc(var(--nav-duration)*2) var(--ease);transition:transform calc(var(--nav-duration)*2) var(--ease);transition:transform calc(var(--nav-duration)*2) var(--ease),-webkit-transform calc(var(--nav-duration)*2) var(--ease)}.main-content>*+*{margin-top:calc(var(--space)*var(--line-height))}.main-navigation-toggle:checked~label .icon--menu-toggle .icon-group{-webkit-transform:translateX(100%);transform:translateX(100%)}.main-navigation-toggle:checked~.main-content{-webkit-transform:translateX(10%);transform:translateX(10%)}.main-navigation-toggle:checked~.main-navigation{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition-duration:0s;transition-duration:0s}.main-navigation-toggle:checked~.main-navigation:after{-webkit-animation:nav-bg var(--nav-duration) var(--ease) forwards;animation:nav-bg var(--nav-duration) var(--ease) forwards}.main-navigation-toggle:checked~.main-navigation li:after{-webkit-animation:nav-line var(--duration) var(--ease) forwards;animation:nav-line var(--duration) var(--ease) forwards}.main-navigation-toggle:checked~.main-navigation a{-webkit-animation:link-appear calc(var(--duration)*1.5) var(--ease) forwards;animation:link-appear calc(var(--duration)*1.5) var(--ease) forwards}.main-navigation-toggle:checked~.main-navigation li:first-child a,.main-navigation-toggle:checked~.main-navigation li:first-child:after{-webkit-animation-delay:calc((var(--duration)/2)*1*.125);animation-delay:calc((var(--duration)/2)*1*.125)}.main-navigation-toggle:checked~.main-navigation li:nth-child(2) a,.main-navigation-toggle:checked~.main-navigation li:nth-child(2):after{-webkit-animation-delay:calc((var(--duration)/2)*2*.125);animation-delay:calc((var(--duration)/2)*2*.125)}.main-navigation-toggle:checked~.main-navigation li:nth-child(3) a,.main-navigation-toggle:checked~.main-navigation li:nth-child(3):after{-webkit-animation-delay:calc((var(--duration)/2)*3*.125);animation-delay:calc((var(--duration)/2)*3*.125)}.main-navigation-toggle:checked~.main-navigation li:nth-child(4) a,.main-navigation-toggle:checked~.main-navigation li:nth-child(4):after{-webkit-animation-delay:calc((var(--duration)/2)*4*.125);animation-delay:calc((var(--duration)/2)*4*.125)}@-webkit-keyframes nav-bg{0%{-webkit-transform:translateX(-100%) skewX(-15deg);transform:translateX(-100%) skewX(-15deg)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes nav-bg{0%{-webkit-transform:translateX(-100%) skewX(-15deg);transform:translateX(-100%) skewX(-15deg)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes nav-line{0%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%}35%{-webkit-transform:scaleX(1.001);transform:scaleX(1.001);-webkit-transform-origin:0 50%;transform-origin:0 50%}65%{-webkit-transform:scaleX(1.001);transform:scaleX(1.001);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}to{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}}@keyframes nav-line{0%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%}35%{-webkit-transform:scaleX(1.001);transform:scaleX(1.001);-webkit-transform-origin:0 50%;transform-origin:0 50%}65%{-webkit-transform:scaleX(1.001);transform:scaleX(1.001);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}to{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}}@-webkit-keyframes link-appear{0%,25%{-webkit-transform:translateY(100%);transform:translateY(100%)}50%,to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes link-appear{0%,25%{-webkit-transform:translateY(100%);transform:translateY(100%)}50%,to{-webkit-transform:translateY(0);transform:translateY(0)}}#shop-items{font-size:5vmin;line-height:.5rem}