body{background-color:#f0f4f8!important}body,html{height:100%;margin:0;padding:0}.app-body{background-image:url(/images/chemistry-background.png);background-size:cover;background-position:50%;background-repeat:no-repeat;min-height:100vh;display:flex;flex-direction:column}.app-layout{flex:1;display:flex;margin-bottom:40px}.app-main{flex:1;margin-left:20px}.atoms-title,.elements-title,.states-of-matter-title{text-align:left;margin-top:20px;font-size:2em;color:#333;display:flex;align-items:center;gap:12px;flex-wrap:wrap}p{color:#333;line-height:1.6}.btn{margin:10px 5px;padding:10px 15px;border-radius:5px;text-align:center;display:inline-block;width:auto;max-width:-moz-fit-content;max-width:fit-content;transition:all .3s ease-in-out}.btn:hover{transform:scale(1.05)}.all-exercises-btn,.next-exercise-btn{padding:10px 16px;font-size:15px}.btn i{margin-left:8px}.completion-star{width:20px;height:20px;margin-left:8px}.elements-menu{max-width:260px;border:2px solid #ccc;border-radius:10px;background-color:#f8f9fa;padding:15px;box-shadow:0 4px 6px rgba(0,0,0,.1);align-self:flex-start}.menu-title-box{background-color:#0077b6;color:#fff;padding:8px;border-radius:8px;text-align:center;font-weight:700;font-size:14px;margin-bottom:10px}.menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.menu-list-item{display:block;padding:8px;background-color:#fff;border:1px solid #ccc;border-radius:5px;text-align:center;font-size:12px;font-weight:700;color:#333;transition:background-color .3s ease}.menu-list-item:hover{background-color:#f0f0f0}.correct-answer,.option.correct-answer{border:2px solid #28a745!important;background-color:rgba(40,167,69,.15)!important}.incorrect-answer,.option.incorrect-answer{border:2px solid #dc3545!important;background-color:rgba(220,53,69,.15)!important}@media (max-width:768px){.app-layout{flex-direction:column}.app-main{margin-left:0}.elements-menu{max-width:100%}}.navbar{background-color:#5d74b3;height:60px;justify-content:space-between;padding:0 40px;margin:0 0 15px;width:100%;top:0;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,.1)}.navbar,.navbar-left{display:flex;align-items:center}.navbar-left{gap:12px}.navbar-hamburger{background:none;border:none;font-size:24px;cursor:pointer;color:#fff;display:none}.navbar-brand{display:flex;align-items:center;padding:0;margin:0;line-height:0}.navbar-logo{height:40px;width:auto;cursor:pointer;display:block}.search-container{flex-shrink:0}.search-container,.search-form{display:flex;align-items:center}.search-form{height:34px;border:1px solid #ccc;border-radius:20px;background-color:#fff;overflow:hidden}.search-input{border:none;padding:0 10px;font-size:14px;width:140px;height:100%;outline:none;background:transparent}.search-button{border:none;background-color:#fff;padding:0 12px;display:flex;align-items:center;cursor:pointer}.search-button:hover{background-color:#f0f0f0}.desktop-only{display:flex}.mobile-only{display:none}@media (max-width:992px){.navbar{padding:0 16px}.navbar-hamburger{display:block}.desktop-only{display:none}.mobile-only{display:block}.sidebar{position:fixed;top:60px;left:0;z-index:1000;display:none}.sidebar.open{display:block}}.navbar-hamburger{pointer-events:auto!important}.navbar-hamburger,.navbar-left{position:relative;z-index:9999}.mobile-only,.search-container{pointer-events:auto}.sidebar{position:relative;top:0;left:0;width:250px;background-color:#f1f3fa;border-right:1px solid #d8cdee;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.05);padding-bottom:10px;margin-top:13px;margin-right:-20px;flex-shrink:0;height:-moz-fit-content;height:fit-content}.sidebar-header{background-color:#5d74b3;color:#fff;text-align:center;font-weight:700;font-size:15px;padding:5px 0;border-bottom:2px solid #5d74b3;border-top-left-radius:8px;border-top-right-radius:8px}.sidebar-list{list-style:none;margin:0;padding:0}.sidebar-item{border-bottom:1px solid #e0d7f3}.sidebar-link{display:flex;align-items:center;gap:8px;color:#2d2d2d;text-decoration:none;font-weight:600;font-size:12px;padding:7px 12px;transition:background-color .2s ease,color .2s ease;border-radius:6px;margin:2px 6px}.sidebar-link.active,.sidebar-link:hover{background-color:#c3d8ff;color:#000}.sidebar-icon{color:#5d74b3;font-size:11px;flex-shrink:0}@media (max-width:992px){.sidebar{position:fixed;top:60px;left:0;width:250px;z-index:1000;display:none}.sidebar.open{display:block}}.sidebar-section-title{padding:12px 16px;font-size:.8rem;font-weight:600;text-transform:uppercase;color:#414141}.cookie-banner{position:fixed;bottom:20px;right:20px;width:320px;background:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.15);font-family:Arial,sans-serif;color:#333;z-index:1000;overflow:hidden;animation:slideIn .8s forwards}.cookie-header{background:#5d74b3;color:#fff;padding:12px 16px;font-weight:700;display:flex;justify-content:space-between;align-items:center}.close-btn{background:transparent;border:none;font-size:18px;color:#fff;cursor:pointer}.cookie-content{padding:16px;font-size:14px;line-height:1.5}.cookie-content a{color:#5d74b3;font-weight:700;text-decoration:none}.cookie-content a:hover{text-decoration:underline}@keyframes slideIn{0%{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}.footer-container{margin-top:60px;background:#5d74b3;border-top:1px solid hsla(0,0%,100%,.15);box-shadow:0 -2px 6px rgba(0,0,0,.08);padding:6px 16px;font-size:.85rem;color:#fff;width:100%;position:relative}.footer-top{flex-wrap:wrap;margin-bottom:6px;max-width:1000px;margin-left:auto;margin-right:auto}.footer-links,.footer-top{display:flex;justify-content:space-between;gap:30px}.footer-links{flex:1;flex-wrap:wrap;width:100%;text-align:center}.footer-column{flex:1 1 160px;min-width:140px}.footer-column h4{font-size:.9rem;font-weight:600;margin-bottom:8px;color:#fff;border-bottom:1px solid hsla(0,0%,100%,.4);display:inline-block;padding-bottom:2px}.footer-column a{display:block;margin:4px 0;color:hsla(0,0%,100%,.85);text-decoration:none;font-size:.85rem;transition:color .2s ease,transform .15s ease}.footer-column a:hover{color:#facc15;transform:translateY(-1px)}.footer-bottom{border-top:1px solid hsla(0,0%,100%,.2);padding-top:10px;font-size:.8rem;color:hsla(0,0%,100%,.85)}.footer-bottom,.footer-left{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.footer-left{align-items:center}.footer-left a{color:#fff;text-decoration:none;font-weight:500}.footer-left a:hover{color:#facc15}.footer-copy{display:block;margin-top:10px;font-size:.75rem;color:hsla(0,0%,100%,.7);text-align:center;width:100%}@media (max-width:900px){.footer-links{justify-content:center;gap:20px}}@media (max-width:600px){.footer-links{flex-direction:column;align-items:center;gap:15px}.footer-bottom,.footer-column{text-align:center}.footer-bottom{flex-direction:column}}