@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body,html{height:100%;margin:0;padding:0}.App{text-align:center}.gameField{align-content:center;display:grid;font-family:Poppins,sans-serif;grid-template-rows:1fr auto auto 1fr;height:100%;justify-items:center;min-height:100vh;position:relative;width:100%}.gameField>:first-child{grid-row:2}.gameField-bottom{align-items:center;display:flex;flex-wrap:nowrap;grid-row:3;justify-content:center;width:100%}.playField{background-color:#c2c2c2;box-shadow:inset -5px -5px 5px 0 #00000080,inset 5px 5px 5px 0 #ffffff80;height:620px;position:relative;width:620px}.solved{background-color:#fff0;color:red;height:690px;position:absolute;text-align:center;top:-70px;-webkit-user-select:none;user-select:none;width:620px;z-index:100}.backLight{background-color:#fff}.backImage,.backLight{height:600px;left:10px;position:absolute;top:10px;width:600px}.backImage{filter:grayscale(90%) brightness(200%);opacity:.3}.squareContainer{transition:opacity 1s ease .5s}.square{align-items:center;background-color:#ccc;border-radius:6px;box-shadow:inset -3px -3px 3px 0 #7e7e7e80,inset 3px 3px 3px 0 #ffffff80;cursor:pointer;display:flex;height:120px;justify-content:center;text-shadow:#fff 0 0 3px;transition:left .5s ease,top .5s ease;-webkit-user-select:none;user-select:none;width:120px}.congrat,.square{position:absolute}.congrat{-webkit-backface-visibility:hidden;color:#696969;font-size:26px;font-weight:600;overflow:hidden;-webkit-perspective:1000;text-align:center;text-shadow:3px 3px 5px #b3b3b3;top:-50px;-webkit-transform:translateZ(0);width:100%}.congrat>div{display:inline-block;overflow:hidden;white-space:nowrap}.congrat>div:first-of-type{animation:showup 7s forwards}.congrat>div:last-of-type{animation:reveal 7s forwards;width:0}.congrat>div:last-of-type span{animation:slidein 7s forwards;margin-left:-350px}@keyframes showup{0%{opacity:0}20%{opacity:1;padding-left:20px}80%{opacity:1;padding-left:20px}to{opacity:1;padding-left:20px}}@keyframes slidein{0%{margin-left:-800px}20%{margin-left:-800px}35%{margin-left:0}to{margin-left:0}}@keyframes reveal{0%{opacity:0;width:0}20%{opacity:1;width:0}30%{width:350px}80%{opacity:1}to{opacity:1;width:350px}}.controlPanel{height:620px;margin-right:20px;width:160px}.button{align-items:center;background-image:linear-gradient(90deg,#c9c9c9 0,#f7f7f7 51%,#d8d8d8);background-position:100%;background-size:200% auto;border-radius:6px;box-shadow:inset -5px -5px 5px 0 #00000080,inset 5px 5px 5px 0 #d4d4d480;cursor:pointer;display:flex;font-weight:600;height:40px;justify-content:center;margin-bottom:20px;transition:.5s;-webkit-user-select:none;user-select:none;width:140px}.button:hover{background-position:0 0}.button:active{box-shadow:inset -2px -2px 2px 0 #00000080,inset 5px 5px 5px 0 #ffffff80}.switch{font-weight:600;height:60px;margin-bottom:20px;width:140px}.switchBody{height:30px;margin-top:6px;position:relative;width:140px}.switchBody:hover>div:last-child{box-shadow:inset -6px -6px 6px 0 #00000080,inset 6px 6px 6px 0 #ffffff80,3px 3px 3px 0 #00000042;left:40px}.switchBase{border-radius:5px;box-shadow:inset 2px 2px 2px 0 #0000004d;height:10px;top:10px;width:60px}.switchBase,.switchLever{background-color:#b6b6b6;position:absolute}.switchLever{background-image:linear-gradient(90deg,#c9c9c9 0,#f7f7f7 51%,#b1b1b1);border-radius:15px;box-shadow:inset -6px -6px 6px 0 #00000080,inset 6px 6px 6px 0 #ffffff80,2px 2px 2px 0 #00000042;height:30px;left:0;top:0;transition:.5s;width:30px}.switch1{font-weight:600;transition:.5s}.switch1Label{text-align:center;width:140px}.switch1Body{-webkit-appearance:none;background:linear-gradient(341deg,#fffdfd,#b1b1b1);border-radius:7px;cursor:pointer;height:40px;margin-top:10px;outline:none;position:relative;width:130px}.switch1Body,.switch1Body:checked{box-shadow:0 0 0 4px #dbdbdb,0 0 0 5px #bcbcbc,inset 0 0 10px #7d7d7d}.switch1Body:checked{background:linear-gradient(0deg,#9ba6b9,#8ba7c2)}.switch1Body:before{background:linear-gradient(0deg,#948f8f,#fafafa);border-radius:7px;box-shadow:0 0 0 1px #888;content:"";height:40px;left:0;position:absolute;top:0;transform:scale(.98,.96);transition:.5s;width:80px}.switch1Body:checked:before{left:50px}.switch1Body:after{background:linear-gradient(0deg,#c5c5c5,#4c4c4c);border-radius:50%;content:"";height:4px;left:70px;position:absolute;top:calc(50% - 2px);transition:.5s;width:4px}.switch1Body:checked:after{left:120px}.imagePanel{font-weight:600;height:620px;margin-left:40px;opacity:1;transition:opacity .5s;width:160px}.imagesContainer{grid-gap:20px;display:grid;grid-template-columns:repeat(2,1fr);width:100%}.imagesTitle{margin-bottom:10px;text-align:center}.imageSquare{background-color:#b8b8b8;box-shadow:inset -3px -3px 3px 0 #7e7e7e80,inset 3px 3px 3px 0 #ffffff80;cursor:pointer;height:70px;opacity:.6;position:relative;width:70px}.imageSquare,.imageSquare:after{transition:all .3s ease-in-out 0ms}.imageSquare:after{border-radius:5px;box-shadow:0 0 8px 1px #66a0d6;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:-1}.imageSquare:hover{opacity:.8}.imageSquare:hover:after{opacity:1}.imageSquareSelected{background-color:#b8b8b8;box-shadow:inset -3px -3px 3px 0 #7e7e7e80,inset 3px 3px 3px 0 #ffffff80;height:70px;position:relative;width:70px}.imageSquareSelected:after{border-radius:5px;box-shadow:0 0 8px 1px #66a0d6;content:"";height:100%;left:0;position:absolute;top:0;transition:all .5s ease-in-out 0ms;width:100%;z-index:-1}.imageInput{background-color:#c3cfdf;background-size:100% 100%;box-shadow:inset -3px -3px 3px 0 #7e7e7e80,inset 3px 3px 3px 0 #ffffff80;height:160px;line-height:160px;margin-top:20px;position:relative;text-align:center;width:100%}.imageInput>span{display:inline-block;line-height:normal;padding-left:10px;padding-right:10px;vertical-align:middle}.timer{color:#c8c8c8;font-size:48px;font-weight:700;text-align:center;transition:color 1s ease,transform 1s ease}.timer-solved{color:#696969;transform:translateY(-50px)}.timer-hidden{visibility:hidden}
/*# sourceMappingURL=main.b0f17a5b.css.map*/