@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);body{margin:0;background-color:#292929}body,body button{font-family:"Roboto",sans-serif}body button{width:100%;height:50px;margin:5px;border:1px solid;border-radius:10px;transition:.1s;transition-property:background-color;box-shadow:inset 0 -.6em 0 -.35em rgba(0,0,0,.17);background-color:#0ff;color:snow}body button:active{top:10px}body button:hover{cursor:pointer}body button span{display:flex;align-items:center;justify-content:center}.App{height:100vh;width:100vw;background-color:#292929}.App,.modal-content{display:flex;align-items:center;justify-content:center;flex-direction:column}.modal-content{width:90%;height:60%;padding:30px;text-align:center}.title{font-size:30px}.controls-container{margin-top:10px;width:100%;padding:10px;background-color:hsla(0,0%,100%,.11764705882352941);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 -.6em 0 -.35em rgba(0,0,0,.17)}.controls-container button{margin-bottom:10px}.controls-container span{display:flex;justify-content:center;align-items:center}.speed{display:flex;width:100%}.speed span{margin-right:.5em}.speed span span{margin-right:0}.speed .speed-slider{margin-top:5px;width:100%}.start{border:1px solid #1e8de7;background-color:#1e8de7}.start:hover{background-color:#1a78c5;border-color:#1a78c5}.clear{background-color:red;border-color:red}.clear:hover{background-color:#d60000;border-color:#d60000}.reset{background-color:grey;border-color:grey}.reset:hover{background-color:#696969;border-color:#696969}.next{background-color:#2dff50;border-color:#2dff50}.next:hover{background-color:#28d444;border-color:#28d444}.overlay{justify-content:center;position:absolute;overflow:hidden;top:0;left:0;right:0;bottom:0;height:100%;width:100%;background-color:rgba(0,0,0,.233);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.container,.overlay{display:flex;align-items:center}.container{flex-direction:column;justify-content:start;width:50%;height:65%;padding:10px 30px 10px 10px;border-radius:10px;top:50%;left:50%;background-color:#292929;z-index:1000;color:#fff;text-align:center}.container .closeButton{width:150px;border:1px solid #1e8de7;background-color:#1e8de7}.container .closeButton:hover{background-color:#1a78c5;border-color:#1a78c5}.modal-enter .container{opacity:0;-webkit-transform:translateY(200px);transform:translateY(200px)}.modal-enter-active .container{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);transition:all .2s}.modal-exit .container{opacity:1}.modal-exit-active .container{opacity:0;-webkit-transform:translateY(200px);transform:translateY(200px);transition:all .2s}.modal-exit-active{opacity:0;transition:all .5s}.main{height:100%;flex-direction:column}.preset-list{width:95%;height:100%;margin:0 5px 5px;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:light}.preset-list::-webkit-scrollbar{width:15px;border-radius:10px;background-color:grey}.preset-list::-webkit-scrollbar-thumb{background-color:#23a6d5;border-radius:10px;outline:1px solid #708090;box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.preset-container{display:flex;flex-direction:column;align-items:center;border:1px solid #fff;width:90%;padding:10px;border-radius:10px;margin:10px}.preset-container .title{font-size:30px}.preset-container .desc{font-size:15px;font-weight:100}.preset-container .img_container{display:flex;align-items:center;justify-content:center;width:80%;height:50%;margin-top:10px;padding:10px;border-radius:10px;background-color:hsla(0,0%,100%,.178)}.preset-container .img_container:hover{cursor:pointer}.preset-container .img_container .img_border{padding:10px;background-color:grey}.main,.preset-container .img_container .img_border{display:flex;justify-content:center;align-items:center}.main{flex-direction:row;width:100%;height:90%;color:#c2c2c2}.options{width:20%;height:100%;margin-right:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.options .title{font-size:22px}.options .config{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;width:100%;background-color:hsla(0,0%,100%,.11764705882352941);padding:10px;box-shadow:inset 0 -.6em 0 -.35em rgba(0,0,0,.17);margin-bottom:10px}.options .config .config-buttons{display:flex;width:100%;margin-top:5px}.options .config .config-buttons .random{border:1px solid #daba2c;background-color:#daba2c}.options .config .config-buttons .random:hover{background-color:#caad2b;border-color:#caad2b}.options .config .config-buttons .preset{border:1px solid #d83fec;background-color:#d83fec}.options .config .config-buttons .preset:hover{background-color:#b635c7;border-color:#b635c7}.options .algorithms{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin:10px;padding:10px;border-radius:10px;background-color:hsla(0,0%,100%,.11764705882352941);box-shadow:inset 0 -.6em 0 -.35em rgba(0,0,0,.17)}.options .algorithms select{width:100%;height:40px;border:0;border-radius:5px;background-color:hsla(0,0%,100%,.3568627450980392);font-family:"Roboto",sans-serif;font-size:18px;color:snow;margin:5px}.options .algorithms select:hover{cursor:pointer}.options .algorithms select:disabled{background-color:hsla(0,0%,100%,.2)}.info{width:20%;height:70%;padding:0 10px 10px;background-color:hsla(0,0%,100%,.11764705882352941);border-radius:10px;display:flex;flex-direction:column;align-items:center;box-shadow:inset 0 -.6em 0 -.35em rgba(0,0,0,.17)}.info .title{font-size:28px}.info .data{font-size:25px;margin-bottom:25px;color:#23a6d5}.grid-container{padding:15px;border-radius:10px;margin:10px;box-shadow:inset 0 -.6em 0 -.35em rgba(0,0,0,.17);background-color:hsla(0,0%,100%,.11764705882352941)}.grid-container .container-outline{border-radius:10px;padding:13px;height:80%;background:linear-gradient(-90deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;-webkit-animation:gradient 10s ease infinite;animation:gradient 10s ease infinite}@-webkit-keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.grid-container .grid{display:grid;justify-content:center;background-color:hsla(0,0%,100%,.404)}.grid-container .grid .row{display:flex;flex-flow:row;flex-direction:row}.node{width:14px;height:14px;border:1px solid #999;display:flex;transition:.3s;transition-property:width,height}.node:hover{background-color:#63638f;cursor:pointer}.node-dead{background-color:#8b8b8b}.node-alive{background-color:hsla(0,0%,100%,0)}
/*# sourceMappingURL=main.0f222758.chunk.css.map */