html{height:100vh;background:linear-gradient(25deg,red 15%,blue 30%,blue 50%,red 75%);height:-webkit-fill-available;font-family:Nothing You Could Do,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.layout{display:grid;grid-template-rows:auto 1fr auto}.layout nav{display:grid;height:100vh;row-gap:4rem;grid-template-rows:auto 1fr;max-height:-webkit-fill-available}nav button{position:relative;z-index:0;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}nav button:before{content:"";position:absolute;top:-.25rem;right:-.25rem;bottom:-.25rem;left:-.25rem;z-index:-10;display:block;--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}nav button:before,nav button:hover:before,nav button[aria-selected=true]:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}nav button:hover:before,nav button[aria-selected=true]:before{--tw-translate-x:0px;--tw-translate-y:0px;--tw-rotate:0deg}nav .card-border{max-height:100%;min-height:100%;max-width:100%;border-width:8px;--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity));position:relative;display:grid;place-content:stretch;border-radius:.25rem;overflow:hidden;padding:2rem 2.5rem;--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity))}@media (min-width:2560px){nav .card-border{padding:4rem 5rem}}nav .card-border{aspect-ratio:8.5/11}nav .card{mix-blend-mode:difference}@property --primary{syntax:"<color>";initial-value:#2faded;inherits:false}@property --primaryLight{syntax:"<color>";initial-value:#2faded55;inherits:false}@property --primaryDark{syntax:"<color>";initial-value:#2faded77;inherits:false}@property --secondary{syntax:"<color>";initial-value:#3d0077;inherits:false}@keyframes hover{0%{--primary:#2faded;--primaryLight:#2faded55;--primaryDark:#2faded77;--secondary:#114b5f}to{--primary:#114b5f;--primaryLight:#114b5f55;--primaryDark:#114b5f77;--secondary:#2faded}}nav .card:before{--primary:#2faded;--primaryLight:#2faded55;--primaryDark:#2faded77;--secondary:#114b5f}nav .card:hover:before{--primary:#114b5f;--primaryLight:#114b5f55;--primaryDark:#114b5f77;--secondary:#2faded}nav .card:after{--tw-bg-opacity:1;background-color:rgb(252 211 77/var(--tw-bg-opacity));opacity:.2}nav .card:after,nav .card:before{position:absolute;top:0;right:0;bottom:0;left:0;transition-property:all;transition-duration:.7s;transition-timing-function:cubic-bezier(.4,0,.2,1);content:""}nav .card:hover:before{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:hover .5s forwards}nav .card-border.one,nav .one .card,nav .one .card:after,nav .one .card:before{border-bottom-left-radius:10% 75%;border-bottom-right-radius:70% 15%;border-top-left-radius:60% 5%;border-top-right-radius:5% 80%}nav .card-border.two,nav .two .card,nav .two .card:after,nav .two .card:before{border-bottom-left-radius:65% 15%;border-bottom-right-radius:10% 70%;border-top-left-radius:5% 65%;border-top-right-radius:70% 5%}nav .card-border.three,nav .three .card,nav .three .card:after,nav .three .card:before{border-bottom-left-radius:75% 10%;border-bottom-right-radius:15% 75%;border-top-left-radius:10% 80%;border-top-right-radius:85% 5%}nav .card-border.four,nav .four .card,nav .four .card:after,nav .four .card:before{border-bottom-left-radius:75% 10%;border-bottom-right-radius:55% 15%;border-top-left-radius:5% 80%;border-top-right-radius:70% 5%}nav .card-border.five,nav .five .card,nav .five .card:after,nav .five .card:before{border-bottom-left-radius:80% 15%;border-bottom-right-radius:65% 10%;border-top-left-radius:15% 75%;border-top-right-radius:75% 5%}nav .card-border.six,nav .six .card,nav .six .card:after,nav .six .card:before{border-bottom-left-radius:70% 5%;border-bottom-right-radius:65% 10%;border-top-left-radius:10% 55%;border-top-right-radius:85% 5%}.layout footer{min-height:12rem}