html,body{width:100%;height:100%;margin:0;padding:0;overscroll-behavior:none}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@property --homegradient-color1{syntax: "<color>"; initial-value: rgb(0,212,255); inherits: true;}@property --homegradient-color2{syntax: "<color>"; initial-value: rgb(41,41,186); inherits: true;}:root{--homegradient-color1: rgba(123, 40, 197, 1);--homegradient-color2: rgba(69, 28, 105, 1);--colorPrimary: #7b28c5;--colorPrimaryTap: darken(#7b28c5, 10%);--colorPrimaryLight: #c995f6;--colorPrimaryDark: #451c69}#root{position:relative;display:flex;flex-flow:row;align-items:center;justify-content:center;height:100%;overflow:hidden;padding:0 2rem;--homegradient-color1: white;--homegradient-color2: white;--colorPrimary: black;--colorPrimaryTap: black;--colorPrimaryLight: gray;--colorPrimaryDark: black;transition:--homegradient-color1 4.4s,--homegradient-color2 1.4s;background-image:url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(ellipse at -20% -10%,rgb(65,60,50) 0%,var(--homegradient-color1) 40%,var(--homegradient-color2) 100%)}#root[data-colorset="0"]{--homegradient-color1: rgba(123, 40, 197, 1);--homegradient-color2: rgba(69, 28, 105, 1);--colorPrimary: rgb(123, 40, 197);--colorPrimaryTap: rgba(136, 49, 213, .5);--colorPrimaryLight: #c995f6;--colorPrimaryDark: #451c69}#root[data-colorset="1"]{--homegradient-color1: rgba(185, 112, 30, 1);--homegradient-color2: rgba(173, 98, 24, 1);--colorPrimary: rgb(185, 112, 30);--colorPrimaryTap: rgba(207, 125, 34, .5);--colorPrimaryLight: rgb(233, 178, 54);--colorPrimaryDark: rgb(143, 68, 24)}#root[data-colorset="2"]{--homegradient-color1: rgba(90, 120, 230, 1);--homegradient-color2: rgba(80, 104, 201, 1);--colorPrimary: rgb(90, 120, 230);--colorPrimaryTap: rgba(112, 138, 233, .5);--colorPrimaryLight: rgb(140, 150, 255);--colorPrimaryDark: rgb(50, 60, 180)}#root[data-colorset="3"]{--homegradient-color1: rgba(20, 111, 86, 1);--homegradient-color2: rgba(20, 92, 55, 1);--colorPrimary: rgb(20, 111, 86);--colorPrimaryTap: rgba(24, 133, 103, .5);--colorPrimaryLight: rgb(60, 181, 136);--colorPrimaryDark: rgb(0, 91, 66)}#root[data-colorset="4"]{--homegradient-color1: rgba(171, 51, 16, 1);--homegradient-color2: rgba(160, 22, 36, 1);--colorPrimary: rgb(171, 51, 16);--colorPrimaryTap: rgba(194, 58, 18, .5);--colorPrimaryLight: rgb(241, 121, 76);--colorPrimaryDark: rgb(101, 1, 16)}#root[data-colorset="5"]{--homegradient-color1: rgba(40, 160, 135, 1);--homegradient-color2: rgba(31, 141, 119, 1);--colorPrimary: rgb(40, 160, 135);--colorPrimaryTap: rgba(45, 180, 152, .5);--colorPrimaryLight: rgb(90, 220, 185);--colorPrimaryDark: rgb(10, 70, 25)}*{box-sizing:border-box;-webkit-tap-highlight-color:var(--colorPrimaryTap)}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion: no-preference){.App-logo{animation:App-logo-spin infinite 20s linear}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.memory-game{font-family:Helvetica Neue,sans-serif;margin-top:-100px}.memory-game:after{content:"";position:absolute;width:100%;height:4px;left:0;transform:translateY(10px);background:var(--colorPrimaryDark);filter:blur(8px)}.memory-game>.aspect-ratio-box{position:relative;aspect-ratio:1}.memory-game .grid{position:absolute;display:grid;width:100%;height:100%;margin:0;padding:2px;list-style:none;gap:2%;transform:perspective(400px) rotateX(3deg);filter:drop-shadow(0px 0px 16px rgba(0,0,0,.4));-webkit-box-reflect:below 1px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(.75,rgba(0,0,0,.02)),to(rgba(255,255,255,.4)))}.memory-game .game-curtain{display:block;position:absolute;top:-5%;left:-5%;width:110%;height:110%;background-color:#0009;filter:blur(20px);opacity:0;pointer-events:none;transition:all .3s}.memory-game .game-curtain.active{pointer-events:all;opacity:1}.memory-game .splash{display:flex;flex-flow:column;align-items:center;color:#fff;position:absolute;z-index:1;min-width:100%;top:50%;left:50%;padding:2rem;border-radius:10px;border:10px solid white;background-color:var(--colorPrimaryLight);transform:translate(-50%,-50%);line-height:1;text-align:center;filter:drop-shadow(0 0 10px rgba(0,0,0,.3));background:url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"),var(--colorPrimaryLight);opacity:0;transition:all .3s;pointer-events:none}.memory-game .splash.visible{pointer-events:all;opacity:1}.memory-game .splash h1{margin:0;font-size:40px;font-weight:700;font-family:Rubik Mono One,serif}.memory-game .splash p{font-size:20px;font-weight:500;line-height:1.2;margin:1rem 0 0}.memory-game .splash button{cursor:pointer;margin:3rem 0 0;background:var(--colorPrimaryDark);border:none;color:#fff;padding:.5rem 2rem;border-radius:4px;font-size:25px;font-weight:700;line-height:1.3;font-family:Open Sans,serif;filter:drop-shadow(0 0 10px rgba(0,0,0,.3));transition:all 50ms}.memory-game .splash button:hover{background:var(--colorPrimary);filter:drop-shadow(0 0 0 rgba(0,0,0,.3))}.memory-game .game-info{display:none}.memory-game .game-controls{position:absolute;display:flex;flex-flow:column;width:40px;top:2rem;left:2rem;cursor:pointer}.memory-game .game-controls .mute{display:block;fill:var(--colorPrimaryLight)}.memory-game .game-controls .mute:hover{fill:#fff}.memory-game .game-controls .mute #volume #x{display:none}.memory-game .game-controls .mute.muted #volume #x{display:block}.memory-item{position:relative;cursor:pointer}.memory-item:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:inset 0 0 0 2px #323232cc}.memory-item[data-disabled]{pointer-events:none}.memory-item[data-disabled] .curtain{opacity:.6!important}.memory-item[data-locked]{pointer-events:none}@media (hover: hover){.memory-item:not([data-disabled],[data-locked]):hover{box-shadow:0 0 0 2px var(--colorPrimaryLight)}}.memory-item .curtain{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000c;opacity:0;pointer-events:none}.memory-item .content{position:relative;width:100%;height:100%;pointer-events:none;transform-style:preserve-3d}.memory-item .content--front,.memory-item .content--left,.memory-item .content--right,.memory-item .content--back{position:absolute;display:flex;flex-flow:column;align-items:center;justify-content:center;padding:1rem;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:background-color 3s;background-color:var(--colorPrimary);color:#fff;-webkit-user-select:none;user-select:none}.memory-item .content--front{transform:translateZ(5px)}.memory-item .content--back{transform:rotateY(180deg) translateZ(5px)}.memory-item .content--left{transform:translate(-5px) rotateY(90deg);width:10px!important;backface-visibility:visible;background-color:var(--colorPrimary);padding:0}.memory-item .content--left .curtain{opacity:.5}.memory-item .content--right{transform:translate(113px) rotateY(90deg);width:10px!important;backface-visibility:hidden;background-color:var(--colorPrimary);padding:0}.memory-item .content--right .curtain{opacity:.5}.memory-item .content img{position:absolute;width:100%;height:100%;padding:.5rem}.memory-item .content svg{transition:fill 3s;fill:var(--colorPrimaryLight)}