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}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#000;color:#fff}.btn{margin-right:1rem;padding:.2rem;cursor:pointer;background-color:transparent;border:1px solid}header{width:90%;margin:auto;padding:1rem 0;text-align:center;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between}.card-container{background-size:cover;width:90px;height:90px;border:2px solid #635858;margin:2px;transition:all .1s ease;cursor:pointer}.card-container .card{width:100%;height:100%;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;transition:all .3s ease;position:relative;background-color:#000;overflow:hidden}.card-container .card .config,.card-container .card .mass{display:none;transition:all .2s ease;font-size:10px}.card-container .card .atomicNumber,.card-container .card .name,.card-container .card .symbol{position:absolute;transition:all .2s ease}.card-container .card .atomicNumber{top:5px;left:50%;font-size:14px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.card-container .card .symbol{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:25px}.card-container .card .name{bottom:5px;left:50%;font-size:14px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.card-container:hover{-webkit-transform:scale(1.4);transform:scale(1.4)}.card-container:hover .card{background-color:rgba(0,0,0,.9)}.card-container:hover .card .mass{display:block;position:absolute}.card-container:hover .card .config{top:5px;right:5px;max-width:70%;font-size:12px;float:right}.card-container:hover .card .mass{bottom:5px;text-align:center;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.card-container:hover .card .symbol{top:40%;font-size:20px}.card-container:hover .card .name{bottom:20px;font-size:10px}.card-container:hover .card .atomicNumber{left:8px;-webkit-transform:translate(0);transform:translate(0);font-size:12px}.modal-container{width:100vw;height:100vh;overflow:hidden;top:0;left:0;-webkit-justify-content:center;justify-content:center;z-index:15;background-color:rgba(0,0,0,.5)}.modal-container,.modal-container .modal{position:absolute;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.modal-container .modal{width:500px;height:800px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;border:1px solid;z-index:20;-webkit-flex-direction:column;flex-direction:column}.modal-container .modal .close{position:fixed;top:10px;right:20px;-webkit-transform:rotate(45deg);transform:rotate(45deg);cursor:pointer;font-size:30px;transition:all .2s ease}.modal-container .modal .close:hover{-webkit-transform:scale(1.4) rotate(45deg);transform:scale(1.4) rotate(45deg)}.modal-container .modal .detail{margin-bottom:2rem}.modal-container .modal .detail .element_Symbol{font-size:150px}.modal-container .modal .detail .element_name{font-size:30px;text-align:center}.modal-container .modal .field{width:80%;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:.4rem auto;font-size:18px}.modal-container .modal .field p,.modal-container .modal .field span{font-weight:700}.disable{display:none}.disable-tile{opacity:.3;background-image:url(/Periodic-Table/static/media/background.2a326b03.png);background-size:cover;width:90px;height:90px;border:2px solid #635858;margin:2px;transition:all .1s ease;-webkit-user-select:none;-ms-user-select:none;user-select:none}.disable-tile .card{width:100%;height:100%;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;transition:all .3s ease;position:relative;background-color:#000;overflow:hidden}.disable-tile .card .config,.disable-tile .card .mass{display:none;transition:all .2s ease;font-size:10px}.disable-tile .card .atomicNumber,.disable-tile .card .name,.disable-tile .card .symbol{position:absolute;transition:all .2s ease}.disable-tile .card .atomicNumber{top:5px;left:50%;font-size:14px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.disable-tile .card .symbol{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:25px}.disable-tile .card .name{bottom:5px;left:50%;font-size:14px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.table{max-width:1700px;min-width:1300px;width:1690px;margin:auto}.row{display:-webkit-flex;display:flex}.left{-webkit-justify-content:flex-start;justify-content:flex-start}.left,.right{width:100%;display:-webkit-flex;display:flex}.right{-webkit-justify-content:flex-end;justify-content:flex-end}.sub-table{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:2rem auto}
/*# sourceMappingURL=main.a6ee4deb.chunk.css.map */