@font-face{font-family:Helvetica-Regular;src:url(/assets/Helvetica-zhVn_y_h.ttf)}@font-face{font-family:Helvetica-Bold;src:url(/assets/Helvetica-Bold-DbiQUL7g.ttf)}menu,ul,li{list-style-type:none;margin:0;padding:0}a{color:var(--clrblue2);text-decoration:none}*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:Helvetica-Regular,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--clrblack);color:var(--clrwhite)}h1,h2,h3,h4{font-family:Helvetica-Bold}button{cursor:pointer}.container{max-width:1280px;margin:0 auto}.content{width:100%;background-color:#353b48;height:200px;border:2px solid var(--clrgreen2);margin:20px 0;border-radius:10px;padding:10px 20px}.content h2{text-align:center}.main .main__content{width:100%;height:300px;border:2px solid var(--clrblue);margin:20px 0;border-radius:15px;padding:10px 20px}marquee{font-size:1.2rem}@media screen and (max-width: 1300px){.container{margin:0 20px}}pre{color:#0f0;font-size:1rem;max-width:1280px;margin:0 auto}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--clrblack3);border:1px solid var(--clrblack2)}::-webkit-scrollbar-thumb{background:#888;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#555}footer{background-color:var(--clrred);color:var(--clrblack)}:root{--clrblack: #1e272e;--clrblack2: #2f3640;--clrblack3: #353b48;--clrred: #c23616;--clrred2: #e84118;--clrblue: #0097e6;--clrblue2: #00a8ff;--clrgreen: #44bd32;--clrgreen2: #4cd137;--clrwhite: #f5f6fa;--clrpurple: #8e44ad;--clrpurple2: #9b59b6;--clryellow: #f1c40f}header{z-index:4;position:relative;background-color:#1e272eb3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:sticky;display:flex;align-items:center;justify-content:space-between;width:100%;top:0}header .header__logo{background-color:var(--clrred);width:200px;border-top-right-radius:25px;border-bottom-right-radius:25px;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;transition:.2s}header .header__logo .icon{width:40px;aspect-ratio:1;background:linear-gradient(45deg,var(--clrgreen2) 50%,#0000 0),linear-gradient(45deg,#0000 50%,var(--clrgreen2) 0),linear-gradient(-45deg,var(--clrblue2) 50%,#0000 0),linear-gradient(-45deg,#0000 50%,var(--clrblue2) 0),linear-gradient(var(--clrblack) 0 0);background-size:50% 50%;background-repeat:no-repeat;animation:l18 1.8462s infinite;margin-right:20px}header .header__logo .header__title{color:var(--clrwhite);transition:.2s}header .header__logo .title-black{color:var(--clrblack);transition:.2s}header .header__logo:hover{background-color:var(--clrwhite)}header .header__logo:hover .header__title{color:var(--clrblack)}header .header__logo:hover .title-black{color:var(--clrred)}header .header__menu{display:flex;justify-content:space-between;max-width:450px;width:100%;margin-left:30px;margin-right:30px}header .header__menu li{margin:5px}header .header__menu li a{font-size:1.2rem;display:flex;align-items:center}header .header__menu li a span{margin-left:5px}header .header__menu li a:hover{text-decoration:underline}header .header__account{margin-right:20px}header .header__account a{margin-right:10px;transition:.2s;white-space:nowrap}header .header__account .account{color:var(--clrwhite)}header .header__account .account:hover{text-decoration:underline;color:var(--clrblue2)}header .header__account .log-in{background-color:var(--clrred);color:var(--clrwhite);padding:10px 20px;border-radius:30px}header .header__account .log-in:hover{background-color:var(--clrwhite);color:var(--clrblack)}header .menu-mobile,header .burger__menu,header .mobile__menu-show,header .mobile__menu-hide,header .mobile-menu__btn{display:none}@media screen and (max-width: 768px){header .header__menu,header .header__account{display:none}header .burger__menu{display:block;margin-right:20px;background-color:var(--clrred);border:none;padding:10px;transition:.2s;border:2px solid var(--clrred);border-radius:5px}header .burger__menu .dash{width:20px;height:3px;background-color:var(--clrblack);margin-bottom:4px;transition:.2s}header .burger__menu .dash:last-child{margin-bottom:0}header .burger__menu:hover{background-color:var(--clrblack)}header .burger__menu:hover .dash{background-color:var(--clrwhite)}header .mobile-menu__close-btn{width:40px;height:40px;margin-top:15px;border-radius:50%;border:2px solid var(--clrblack);background:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;position:absolute;right:20px;padding-left:2px;transition:.1s}header .mobile-menu__close-btn .close-btn__dash1,header .mobile-menu__close-btn .close-btn__dash2{width:25px;height:4px;border-radius:4px;background-color:var(--clrblack);position:relative;transition:.1s}header .mobile-menu__close-btn .close-btn__dash1{transform:rotate(45deg);top:9px}header .mobile-menu__close-btn .close-btn__dash2{transform:rotate(135deg);bottom:9px}header .mobile-menu__close-btn:hover{background-color:var(--clrred);border-color:var(--clrred)}header .mobile-menu__close-btn:hover .close-btn__dash1,header .mobile-menu__close-btn:hover .close-btn__dash2{background-color:var(--clrwhite)}header .mobile-menu__close-btn:active{background-color:var(--clrwhite);border-color:var(--clrwhite)}header .mobile-menu__close-btn:active .close-btn__dash1,header .mobile-menu__close-btn:active .close-btn__dash2{background-color:var(--clrblack)}header .mobile__menu-show{display:block;position:absolute;top:0;left:0;background-color:#0097e6e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;border-radius:10px;height:100vh;transition:.2s;transform:translate(0)}header .mobile-menu__main{margin-top:20px}header .mobile-menu__main li{display:flex;justify-content:center;align-items:center;margin-bottom:30px}header .mobile-menu__main li a{color:var(--clrblack);font-size:2rem;display:flex;align-items:center}header .mobile-menu__main li a span{margin-left:5px}header .mobile-menu__main li a:hover{color:var(--clrwhite);text-decoration:underline}header .divider{background-color:var(--clrblack);width:100%;height:2px}header .mobile-menu__links{margin-top:10px;display:flex;justify-content:center;margin-bottom:20px;align-items:center}header .mobile-menu__links a{color:var(--clrblack);font-size:1.5rem;margin-right:10px}header .mobile-menu__links a:hover{color:var(--clrwhite);text-decoration:underline}header .mobile-menu__links .log-in{background-color:var(--clrred);padding:5px 15px;color:var(--clrwhite);border-radius:20px;margin-right:0;transition:.1s}header .mobile-menu__links .log-in:hover{background-color:var(--clrwhite);color:var(--clrred);text-decoration:none}header .mobile__menu-hide{display:none;transition:.2s;transform:translate(-100%)}}@media screen and (max-width: 320px){header .header__logo{margin-right:20px}}@keyframes l18{0%{background-position:50% 50%,50% 50%,50% 50%,50% 50%,50% 50%}25%{background-position:0 100%,100% 0,50% 50%,50% 50%,50% 50%}50%{background-position:0 100%,100% 0,100% 100%,0 0,50% 50%}75%{background-position:50% 50%,50% 50%,100% 100%,0 0,50% 50%}to{background-position:50% 50%,50% 50%,50% 50%,50% 50%,50% 50%}}.toggle__tag{height:25vh}.toggle__tag .title{font-size:3rem;color:var(--clrred2);transition:.2s}.toggle__tag .title-change{font-size:3rem;color:var(--clrblue2);transition:.2s}.toggle__tag .title-change2{font-size:3rem;letter-spacing:1rem;transition:.2s}.toggle__tag .title-change3{font-size:3rem;letter-spacing:normal;transition:.2s;color:var(--clrwhite)}.toggle__tag .toggle__btn{border:2px solid var(--clrgreen);padding:15px 30px;background:none;font-size:1.5rem;color:var(--clrgreen);margin-top:20px;border-radius:10px;transition:.1s;box-shadow:0 0 10px 0 var(--clrgreen2)}.toggle__tag .toggle__btn:hover{background-color:var(--clrgreen);color:var(--clrblack);box-shadow:0 0}.toggle__tag .toggle__btn:active{background-color:var(--clrwhite);transform:scale(.9)}.periodic-table-20{border:2px solid var(--clrblack3);margin:20px;border-radius:10px;padding:5px}.periodic-table-20 .periodic-table-20__explanation{position:relative}.periodic-table-20 .periodic-table-20__explanation .periodic-table-20__explanation-container{background-color:var(--clrblack2);width:9dvw;height:9dvw;border-radius:.7dvw;border:.3dvw solid var(--clrblack3);padding:.3dvw;font-size:1.9dvw;position:absolute;top:5dvw;left:30dvw}.periodic-table-20 .periodic-table-20__explanation .periodic-table-20__explanation-container .explanation-info__up{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8dvw}.periodic-table-20 .periodic-table-20__explanation .periodic-table-20__explanation-container .explanation-info__up span.explanation-info__char{font-family:Helvetica-Bold}.periodic-table-20 .periodic-table-20__explanation .periodic-table-20__explanation-container .explanation-info__center{display:flex;justify-content:space-between;align-items:center;font-size:1.7dvw;margin-bottom:.6dvw}.periodic-table-20 .periodic-table-20__explanation .periodic-table-20__explanation-container span.explanation-info__name{display:flex;align-items:center;justify-content:center;font-size:1.8dvw}.periodic-table-20 table.periodic-table-20__table tr.periodic-table-20__groups th.periodic-table-20__group-title{display:flex;align-items:center;font-size:1dvw}.periodic-table-20 table.periodic-table-20__table tr.periodic-table-20__groups th.periodic-table-20__group-title h4{margin-right:.5dvw}.periodic-table-20 table.periodic-table-20__table tr.periodic-table-20__groups th{font-size:1.5dvw}.periodic-table-20 table.periodic-table-20__table tr.periodic-table-20__periods th.periodic-table-20__period-title{display:flex;align-items:center;font-size:1dvw}.periodic-table-20 table.periodic-table-20__table tr.periodic-table-20__periods th.periodic-table-20__period-title h4{margin-left:.3dvw}.periodic-table-20 table.periodic-table-20__table tr.periodic-table-20__first-period th,.periodic-table-20 table.periodic-table-20__table .periodic-table-20__second-period th,.periodic-table-20 table.periodic-table-20__table .periodic-table-20__third-period th,.periodic-table-20 table.periodic-table-20__table .periodic-table-20__fourth-period th,.periodic-table-20 table.periodic-table-20__table .periodic-table-20__fifth-period th,.periodic-table-20 table.periodic-table-20__table .periodic-table-20__sixth-period th,.periodic-table-20 table.periodic-table-20__table .periodic-table-20__seventh-period th{border:.1dvw solid var(--clrblack3);border-radius:5px;background-color:var(--clrblack2);font-size:1.5dvw}.periodic-table-20 table.periodic-table-20__table tr.periodic-table-20__sixth-period td.td__lanthanide{font-size:.75dvw;text-align:center}.periodic-table-20 table.periodic-table-20__table tr.periodic-table-20__seventh-period td.td__actinide{font-size:.85dvw;text-align:center}.periodic-table-20 table.periodic-table-20__table tr.periodic-table-20__lanthanide th,.periodic-table-20 table.periodic-table-20__table .periodic-table-20__actinide th{background-color:var(--clrblack2);border-radius:5px;font-size:1.75dvw}.periodic-table-20 button.periodic-table-20__btn{transition:.1s}.periodic-table-20 button.periodic-table-20__btn:hover{transform:scale(1.05)}.periodic-table-20 button.periodic-table-20__btn:active{transform:scale(.95);background-color:var(--clrwhite);color:var(--clrblack)}.periodic-table-20 button.nonmetal{background-color:var(--clrblue);color:var(--clrblack);transition:.1s}.periodic-table-20 button.nonmetal:hover{background-color:var(--clrblue2)}.periodic-table-20 button.nonmetal:active{background-color:var(--clrwhite)}.periodic-table-20 button.alkaliMetal{background-color:var(--clrred);transition:.1s}.periodic-table-20 button.alkaliMetal:hover{background-color:var(--clrred2)}.periodic-table-20 button.alkaliMetal:active{background-color:var(--clrwhite)}.periodic-table-20 button.alkalineEarthMetal{background-color:var(--clrorange);color:var(--clrblack)}.periodic-table-20 button.metalloid{background-color:var(--clrgreen3);color:var(--clrblack)}.periodic-table-20 button.metalloid:hover{background-color:var(--clrgreen4)}.periodic-table-20 button.halogen{background:linear-gradient(-45deg,var(--clrblue2) 0%,var(--clrblack2) 75%);transition:.1s}.periodic-table-20 button.halogen:hover{background:linear-gradient(45deg,var(--clrblack2) 0%,var(--clrblue2) 75%)}.periodic-table-20 button.nobleGas{background-color:var(--clrpurple);color:var(--clryellow);transition:.1s}.periodic-table-20 button.nobleGas:hover{background-color:var(--clrpurple2);color:var(--clrwhite)}.periodic-table-20 button.basicMetal{background-color:var(--clrgreen);color:var(--clrblack)}.periodic-table-20 button.basicMetal:hover{background-color:var(--clrgreen2)}.periodic-table-20 button.basicMetal:active{background-color:var(--clrwhite)}.periodic-table-20 button.transitionMetal{background-color:var(--clryellow);color:var(--clrblack);transition:.1s}.periodic-table-20 button.transitionMetal:hover{background-color:var(--clryellow2)}.periodic-table-20 button.transitionMetal:active{background-color:var(--clrwhite)}.periodic-table-20 button.lanthanide{background-color:var(--clrred3);color:var(--clrblack)}.periodic-table-20 button.lanthanide:hover{background-color:var(--clrred4)}.periodic-table-20 button.lanthanide:active{background-color:var(--clrwhite)}.periodic-table-20 button.actinide{background:linear-gradient(-45deg,var(--clrred3) 0%,var(--clrblack2) 75%);transition:.1s}.periodic-table-20 button.actinide:active{background:none;background-color:var(--clrwhite)}@media screen and (max-width: 768px){.periodic-table-20{display:none}}.element-expand{width:100dvw;height:100dvh;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:fixed;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:1}.element-expand .element-expand__under-expand{width:100dvw;height:100dvh;top:0;left:0;position:fixed;z-index:5}.element-expand .element-expand__container{border-radius:10px;padding:15px;width:50dvw;background-color:#353b48e6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:var(--clrwhite);box-shadow:0 0 5px #000;z-index:6}.element-expand .element-expand__container .element-expand__header{display:flex;align-items:center;justify-content:space-between}.element-expand .element-expand__container .element-expand__header button.element-expand__close-btn{font-size:2.5dvw;background-color:var(--clrred);border:none;border-radius:50%;width:3dvw;height:3dvw;padding-top:.15dvw;padding-left:.15dvw;transition:.1s}.element-expand .element-expand__container .element-expand__header button.element-expand__close-btn:hover{background-color:var(--clrwhite);transform:scale(1.05)}.element-expand .element-expand__container .element-expand__header button.element-expand__close-btn:active{transform:scale(.95);color:var(--clrred)}.element-expand .element-expand__container .element-expand__flex{margin-top:20px;display:flex;justify-content:space-around;margin-bottom:20px}.element-expand .element-expand__container .element-expand__flex .element-expand__parameters p{margin-bottom:15px;text-align:left}.element-expand .element-expand__container .element-expand__flex .element-expand__values{margin-right:7.5dvw}.element-expand .element-expand__container .element-expand__flex .element-expand__values p{margin-bottom:15px}.element-expand .element-expand__container .element-expand__next-previous{margin-top:2dvw;display:flex;justify-content:center;align-items:center}.element-expand .element-expand__container .element-expand__next-previous button{border:none;background:var(--clrblue);font-size:1.2rem;padding:.5dvw 1dvw;border-radius:10px;font-family:Helvetica-Bold;transition:.1s}.element-expand .element-expand__container .element-expand__next-previous button:hover{transform:scale(1.05)}.element-expand .element-expand__container .element-expand__next-previous button:active{background-color:var(--clrwhite);transform:scale(.95)}.element-expand .element-expand__container .element-expand__next-previous .element-expand__previous{margin-right:1dvw}@media screen and (max-width: 1024px){.element-expand .element-expand__container{width:75dvw}.element-expand .element-expand__container .element-expand__flex .element-expand__values{margin-right:0}}@media screen and (max-width: 320px){.element-expand .element-expand__container{width:90dvw}}:root{--clrblack: #1e272e;--clrblack2: #2f3640;--clrblack3: #353b48;--clrred: #c23616;--clrred2: #e84118;--clrred3: #eb3b5a;--clrred4: #fc5c65;--clrblue: #0097e6;--clrblue2: #00a8ff;--clrgreen: #44bd32;--clrgreen2: #4cd137;--clrgreen3: #27ae60;--clrgreen4: #2ecc71;--clrwhite: #f5f6fa;--clrpurple: #8e44ad;--clrpurple2: #9b59b6;--clryellow: #f1c40f;--clryellow2: #fff200;--clrorange: #e67e22}button.periodic-table-20__btn{border:.1dvw solid var(--clrblack3);border-radius:5px;background:none;color:var(--clrwhite);font-size:1.1vw;font-family:inherit;padding:.2dvw;width:4.9dvw;transition:.1s;height:5vw}button.periodic-table-20__btn .element20-info__up{display:flex;justify-content:space-between;margin-bottom:.4dvw}button.periodic-table-20__btn .element20-info__up .element20__char{font-family:Helvetica-Bold}button.periodic-table-20__btn .element20-info__center{display:flex;justify-content:space-between;margin-bottom:.5dvw;font-size:.85dvw}button.periodic-table-20__btn span.element20__name{font-size:.9dvw;text-align:left}button.periodic-table-20__btn span.element20__name.small{font-size:.7dvw}button.periodic-table20__btn:hover{transform:scale(1.05)}.small{font-size:1.5dvw}.element20__error-text{display:flex;justify-content:center;align-items:center;width:4dvw;height:4dvw}@media screen and (max-width: 1180px){button.periodic-table-20__btn{width:4.7dvw;height:5.1dvw}}@media screen and (min-width: 1768px){button.periodic-table-20__btn{width:5dvw}}:root{--clrblack: #1e272e;--clrblack2: #2f3640;--clrblack3: #353b48;--clrred: #c23616;--clrred2: #e84118;--clrblue: #0097e6;--clrblue2: #00a8ff;--clrgreen: #44bd32;--clrgreen2: #4cd137;--clrwhite: #f5f6fa;--clrpurple: #8e44ad;--clrpurple2: #9b59b6}.namae__btn{padding:15px 30px;font-size:1.2rem;font-family:inherit;background:none;border:2px solid var(--clrred);border-radius:5px;color:var(--clrred2);margin-right:10px;box-shadow:0 0 5px 0 var(--clrred2);transition:.1s}.namae__btn:hover{background-color:var(--clrred);color:var(--clrwhite);border-color:var(--clrred);box-shadow:0 0}.namae__btn:active{background-color:var(--clrred2);color:var(--clrwhite);border-color:var(--clrred2);transform:scale(.95)}.useeffect__lucida-console{font-family:Lucida Console,Arial,Helvetica,sans-serif;font-size:1.1rem;color:#0f0}