.blurred[data-v-23e31513]{filter:blur(40px)}.container[data-v-23e31513]{display:flex;flex-direction:column;align-items:center}.squareContainer[data-v-23e31513]{display:flex;flex-wrap:wrap;width:972px;margin:0 auto;transition:all .2s ease}.squareContainer .square[data-v-23e31513]{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;box-sizing:border-box;margin:2px;padding:2px;overflow:hidden;width:50px;height:50px;cursor:pointer;transition:all .5s ease}.squareContainer .square .atomicNumber[data-v-23e31513]{font-size:8px}.squareContainer .square .symbol[data-v-23e31513]{align-self:center}.squareContainer .square .name[data-v-23e31513]{font-size:8.5px;align-self:center}.squareContainer .square .atomicMass[data-v-23e31513]{font-size:8px;align-self:center}.nonmetal[data-v-23e31513]{border:2px solid #a2d1a7;color:#a2d1a7}.nobleGas[data-v-23e31513]{border:2px solid #909bd1;color:#909bd1}.alkaliMetal[data-v-23e31513]{border:2px solid #e8646f;color:#e8646f}.alkalineEarthMetal[data-v-23e31513]{border:2px solid #ffa121;color:#ffa121}.metalloid[data-v-23e31513]{border:2px solid #b8b33b;color:#b8b33b}.halogen[data-v-23e31513]{border:2px solid #2ebfc4;color:#2ebfc4}.metal[data-v-23e31513]{border:2px solid #67a6d9;color:#67a6d9}.post-transitionMetal[data-v-23e31513]{border:2px solid #1abc9c;color:#1abc9c}.transitionMetal[data-v-23e31513]{border:2px solid #fbd451;color:#fbd451}.lanthanoid[data-v-23e31513]{border:2px solid #b36da1;color:#b36da1}.actinoid[data-v-23e31513]{border:2px solid #da2d99;color:#da2d99}.nonmetal-active[data-v-23e31513]{border:2px solid #a2d1a7;background-color:#a2d1a7;color:#010101}.nobleGas-active[data-v-23e31513]{border:2px solid #909bd1;background-color:#909bd1;color:#010101}.alkaliMetal-active[data-v-23e31513]{border:2px solid #e8646f;background-color:#e8646f;color:#010101}.alkalineEarthMetal-active[data-v-23e31513]{border:2px solid #ffa121;background-color:#ffa121;color:#010101}.metalloid-active[data-v-23e31513]{border:2px solid #b8b33b;background-color:#b8b33b;color:#010101}.halogen-active[data-v-23e31513]{border:2px solid #2ebfc4;background-color:#2ebfc4;color:#010101}.metal-active[data-v-23e31513]{border:2px solid #67a6d9;background-color:#67a6d9;color:#010101}.post-transitionMetal-active[data-v-23e31513]{border:2px solid #1abc9c;background-color:#1abc9c;color:#010101}.transitionMetal-active[data-v-23e31513]{border:2px solid #fbd451;background-color:#fbd451;color:#010101}.lanthanoid-active[data-v-23e31513]{border:2px solid #b36da1;background-color:#b36da1;color:#010101}.actinoid-active[data-v-23e31513]{border:2px solid #da2d99;background-color:#da2d99;color:#010101}.overlay[data-v-23e31513]{width:100%;height:100vh;top:0;left:0;position:fixed;z-index:1000;background:#000;transition:all .2s ease;opacity:.2}.wholeContainer[data-v-23e31513]{position:absolute;top:50px;display:flex;flex-direction:column;align-items:center;width:400px;height:400px}.wholeContainer>span[data-v-23e31513]{border:none}.wholeContainer>span[data-v-23e31513]:first-child{font-size:28px}.detailsView[data-v-23e31513]{margin-top:100px;display:flex;position:absolute;justify-content:center;align-items:center;width:250px;height:250px;border:1px solid #000;border-radius:50%;animation:rotate-23e31513 4s linear infinite}.detailsView .electrons[data-v-23e31513]{width:20px;height:20px;border-radius:50%;position:absolute;background:#000}.detailsView .electrons[data-v-23e31513]:first-child{top:calc(75% - 10px);left:0}.detailsView .electrons[data-v-23e31513]:nth-child(2){top:-10px;left:calc(50% - 10px)}.detailsView .electrons[data-v-23e31513]:nth-child(3){top:calc(75% - 10px);right:0}.selectedSquare[data-v-23e31513]{position:absolute;width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;border-width:6px;transition:all .2s ease}.detailsView>.selectedSquare[data-v-23e31513]{border:none}.detailsView>.nonmetal[data-v-23e31513]{background:radial-gradient(circle at 150px 150px,#95a5a6,#000)}.detailsView>.nobleGas[data-v-23e31513]{background:radial-gradient(circle at 150px 150px,#8e44ad,#000)}.detailsView>.alkaliMetal[data-v-23e31513]{background:radial-gradient(circle at 150px 150px,#e74c3c,#000)}.detailsView>.alkalineEarthMetal[data-v-23e31513]{background:radial-gradient(circle at 150px 150px,#e67e22,#000)}.detailsView>.metalloid[data-v-23e31513]{background:radial-gradient(circle at 150px 150px,#3498db,#000)}.detailsView>.halogen[data-v-23e31513]{background:radial-gradient(circle at 150px 150px,#ec87bf,#000)}.detailsView>.metal[data-v-23e31513]{background:radial-gradient(circle at 150px 150px,#2ecc71,#000)}.detailsView>.post-transitionMetal[data-v-23e31513]{background:radial-gradient(circle at 150px 150px,#1abc9c,#000)}.detailsView>.transitionMetal[data-v-23e31513]{background:radial-gradient(circle at 150px 150px,#f1c40f,#000)}.detailsView>.lanthanoid[data-v-23e31513]{background:radial-gradient(circle at 150px 150px,#f39c12,#000)}.detailsView>.actinoid[data-v-23e31513]{background:radial-gradient(circle at 150px 150px,#ecf0f1,#000)}.legend[data-v-23e31513]{display:flex;flex-direction:column;align-self:baseline}.legend div[data-v-23e31513]{display:flex;flex-direction:row;align-items:center;padding:2px;color:#fff}.legend .color[data-v-23e31513]{height:14px;width:30px;margin:2px}.fade-enter-active[data-v-23e31513],.fade-leave-active[data-v-23e31513]{transition:opacity .5s}.fade-enter[data-v-23e31513],.fade-leave-to[data-v-23e31513]{opacity:0}@keyframes rotate-23e31513{0%{transform:rotate(0deg);top:0}50%{transform:rotate(180deg);top:20px}to{transform:rotate(1turn);top:0}}.blurred[data-v-7bca0240]{filter:blur(40px)}.container[data-v-7bca0240]{display:flex;flex-direction:column;align-items:center}.squareContainer[data-v-7bca0240]{display:flex;flex-wrap:wrap;width:972px;margin:0 auto;transition:all .2s ease}.squareContainer .square[data-v-7bca0240]{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;box-sizing:border-box;margin:2px;padding:2px;overflow:hidden;width:50px;height:50px;cursor:pointer;transition:all .5s ease}.squareContainer .square .atomicNumber[data-v-7bca0240]{font-size:8px}.squareContainer .square .symbol[data-v-7bca0240]{align-self:center}.squareContainer .square .name[data-v-7bca0240]{font-size:8.5px;align-self:center}.squareContainer .square .atomicMass[data-v-7bca0240]{font-size:8px;align-self:center}.nonmetal[data-v-7bca0240]{border:2px solid #a2d1a7;color:#a2d1a7}.nobleGas[data-v-7bca0240]{border:2px solid #909bd1;color:#909bd1}.alkaliMetal[data-v-7bca0240]{border:2px solid #e8646f;color:#e8646f}.alkalineEarthMetal[data-v-7bca0240]{border:2px solid #ffa121;color:#ffa121}.metalloid[data-v-7bca0240]{border:2px solid #b8b33b;color:#b8b33b}.halogen[data-v-7bca0240]{border:2px solid #2ebfc4;color:#2ebfc4}.metal[data-v-7bca0240]{border:2px solid #67a6d9;color:#67a6d9}.post-transitionMetal[data-v-7bca0240]{border:2px solid #1abc9c;color:#1abc9c}.transitionMetal[data-v-7bca0240]{border:2px solid #fbd451;color:#fbd451}.lanthanoid[data-v-7bca0240]{border:2px solid #b36da1;color:#b36da1}.actinoid[data-v-7bca0240]{border:2px solid #da2d99;color:#da2d99}.nonmetal-active[data-v-7bca0240]{border:2px solid #a2d1a7;background-color:#a2d1a7;color:#010101}.nobleGas-active[data-v-7bca0240]{border:2px solid #909bd1;background-color:#909bd1;color:#010101}.alkaliMetal-active[data-v-7bca0240]{border:2px solid #e8646f;background-color:#e8646f;color:#010101}.alkalineEarthMetal-active[data-v-7bca0240]{border:2px solid #ffa121;background-color:#ffa121;color:#010101}.metalloid-active[data-v-7bca0240]{border:2px solid #b8b33b;background-color:#b8b33b;color:#010101}.halogen-active[data-v-7bca0240]{border:2px solid #2ebfc4;background-color:#2ebfc4;color:#010101}.metal-active[data-v-7bca0240]{border:2px solid #67a6d9;background-color:#67a6d9;color:#010101}.post-transitionMetal-active[data-v-7bca0240]{border:2px solid #1abc9c;background-color:#1abc9c;color:#010101}.transitionMetal-active[data-v-7bca0240]{border:2px solid #fbd451;background-color:#fbd451;color:#010101}.lanthanoid-active[data-v-7bca0240]{border:2px solid #b36da1;background-color:#b36da1;color:#010101}.actinoid-active[data-v-7bca0240]{border:2px solid #da2d99;background-color:#da2d99;color:#010101}.overlay[data-v-7bca0240]{width:100%;height:100vh;top:0;left:0;position:fixed;z-index:1000;background:#000;transition:all .2s ease;opacity:.2}.wholeContainer[data-v-7bca0240]{position:absolute;top:50px;display:flex;flex-direction:column;align-items:center;width:400px;height:400px}.wholeContainer>span[data-v-7bca0240]{border:none}.wholeContainer>span[data-v-7bca0240]:first-child{font-size:28px}.detailsView[data-v-7bca0240]{margin-top:100px;display:flex;position:absolute;justify-content:center;align-items:center;width:250px;height:250px;border:1px solid #000;border-radius:50%;animation:rotate-7bca0240 4s linear infinite}.detailsView .electrons[data-v-7bca0240]{width:20px;height:20px;border-radius:50%;position:absolute;background:#000}.detailsView .electrons[data-v-7bca0240]:first-child{top:calc(75% - 10px);left:0}.detailsView .electrons[data-v-7bca0240]:nth-child(2){top:-10px;left:calc(50% - 10px)}.detailsView .electrons[data-v-7bca0240]:nth-child(3){top:calc(75% - 10px);right:0}.selectedSquare[data-v-7bca0240]{position:absolute;width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;border-width:6px;transition:all .2s ease}.detailsView>.selectedSquare[data-v-7bca0240]{border:none}.detailsView>.nonmetal[data-v-7bca0240]{background:radial-gradient(circle at 150px 150px,#95a5a6,#000)}.detailsView>.nobleGas[data-v-7bca0240]{background:radial-gradient(circle at 150px 150px,#8e44ad,#000)}.detailsView>.alkaliMetal[data-v-7bca0240]{background:radial-gradient(circle at 150px 150px,#e74c3c,#000)}.detailsView>.alkalineEarthMetal[data-v-7bca0240]{background:radial-gradient(circle at 150px 150px,#e67e22,#000)}.detailsView>.metalloid[data-v-7bca0240]{background:radial-gradient(circle at 150px 150px,#3498db,#000)}.detailsView>.halogen[data-v-7bca0240]{background:radial-gradient(circle at 150px 150px,#ec87bf,#000)}.detailsView>.metal[data-v-7bca0240]{background:radial-gradient(circle at 150px 150px,#2ecc71,#000)}.detailsView>.post-transitionMetal[data-v-7bca0240]{background:radial-gradient(circle at 150px 150px,#1abc9c,#000)}.detailsView>.transitionMetal[data-v-7bca0240]{background:radial-gradient(circle at 150px 150px,#f1c40f,#000)}.detailsView>.lanthanoid[data-v-7bca0240]{background:radial-gradient(circle at 150px 150px,#f39c12,#000)}.detailsView>.actinoid[data-v-7bca0240]{background:radial-gradient(circle at 150px 150px,#ecf0f1,#000)}.legend[data-v-7bca0240]{display:flex;flex-direction:column;align-self:baseline}.legend div[data-v-7bca0240]{display:flex;flex-direction:row;align-items:center;padding:2px;color:#fff}.legend .color[data-v-7bca0240]{height:14px;width:30px;margin:2px}.fade-enter-active[data-v-7bca0240],.fade-leave-active[data-v-7bca0240]{transition:opacity .5s}.fade-enter[data-v-7bca0240],.fade-leave-to[data-v-7bca0240]{opacity:0}@keyframes rotate-7bca0240{0%{transform:rotate(0deg);top:0}50%{transform:rotate(180deg);top:20px}to{transform:rotate(1turn);top:0}}.boujee-text[data-v-c066de62]{--bg-size:400%;--color-one:#42d392;--color-two:#647eff;font-family:Pacifico,cursive;font-size:clamp(2rem,15vmin,5rem);background:linear-gradient(90deg,var(--color-one),var(--color-two),var(--color-one)) 0 0/var(--bg-size) 100%;color:transparent;-webkit-background-clip:text;background-clip:text}@media (prefers-reduced-motion:no-preference){.boujee-text[data-v-c066de62]{animation:move-bg-c066de62 8s linear infinite}@keyframes move-bg-c066de62{to{background-position:var(--bg-size) 0}}}