:root{--primary-color: #4ecca6;--secondary-color: #eca15a;--third-color: #3498db;--text-color: #333;--shadow-color: #d3d3d3;--background-color: #f4f4f4;--font-family: "Arial", sans-serif;--cozy-cottage: url(https://github.com/TalonDragon000/Hom3Town/blob/main/client/assets/cozy-cottage.jpg?raw=true);--starter-sprite: url(https://github.com/TalonDragon000/Hom3Town/blob/main/client/assets/Starter%20Avatar%20Set.png?raw=true)}.navbar-white{justify-content:center;background-color:var(--background-color);margin:auto;padding:10px;max-width:1100px}.nav-list{display:flex;justify-content:space-between;align-items:center;list-style:none;margin:0;padding:0;width:100%}.nav-item-left{margin-right:auto}.nav-item-right{margin-left:auto}.navbar-bg{background:var(--cozy-cottage);background-size:fill;justify-content:center;margin:auto;padding:10px;max-width:1140px}navbar a{color:var(--text-color);font-weight:100}.container{max-width:1200px;margin:0 auto;padding:10px}.container-space{max-width:1200px;height:255px}ul{list-style-type:none;margin:0;padding:0;overflow:hidden}li{display:inline;float:left}header{background-image:var(--cozy-cottage);background-repeat:no-repeat;background-position:bottom center;background-size:cover;background-color:var(--secondary-color);padding:60px 0;text-align:center;color:#fff;outline-style:outset;outline-color:var(--text-color)}header h1{margin:0;font-size:2.5em;text-shadow:3px 3px 3px #000}header p{font-size:1.2em;text-shadow:3px 3px 5px #000}.btn{display:inline-block;padding:10px 20px;background:var(--third-color);color:#fff;text-decoration:none;border-radius:5px;transition:background .3s;border-color:#2885c4}.btn:hover{background:var(--secondary-color);border-color:#d98f4a}.features{padding:40px 0;background:#fff}.features .flex{display:flex;justify-content:space-between;flex-wrap:wrap}.feature{flex:1 1 calc(33% - 20px);background:#f9f9f9;border:1px solid #ddd;border-radius:5px;padding:20px;margin:10px;text-align:center;transition:transform .2s}.feature:hover{transform:scale(1.02);box-shadow:1px 1px 5px 1px var(--primary-color),-0px 0 #fff,0 -0px #fff,-1px -1px 5px 1px var(--third-color);border-radius:5px}.character-container{display:flex;justify-content:space-between;margin:auto;margin-top:1rem;max-width:1200px;min-height:200px;padding-inline:20px}.preview-container{background:#f9f9f9;border:1px solid #ddd;border-radius:5px;padding:20px;width:300px;margin-right:1rem;display:block}.preview-character{position:relative;width:64px;height:128px;margin:auto;overflow:hidden}.preview-layer{position:absolute;top:0;left:0;width:64px;height:128px}#preview-body{z-index:1}#preview-eyes{z-index:2}#preview-brows{z-index:3}#preview-mouth{z-index:4}#preview-underwear{z-index:5}#preview-shoes{z-index:6}#preview-bottom{z-index:7}#preview-top{z-index:8}#preview-facialHair{z-index:9}#preview-facialHair2{z-index:10}#preview-hair{z-index:11}.create-container{flex-grow:1;display:relative;background:#f9f9f9;border:1px solid #ddd;border-radius:5px;padding:1rem;margin-right:auto;position:inline}.asset-container{display:grid;grid-template-columns:repeat(6,1fr);justify-content:space-between}.asset-btn{width:64px;height:150px;border-radius:5px;cursor:pointer;border:1px solid #cccccc;margin:5px;background-repeat:no-repeat;background-size:auto;transition:all .3s ease;position:relative;overflow:hidden}.asset-btn:hover{border-color:var(--third-color);box-shadow:0 0 8px #4a9eff80}.frame-id-display{position:absolute;bottom:0;left:0;right:0;background:var(--text-color);color:#fff;font-size:12px;padding:2px;text-align:center}.confirm-selection-container{margin-top:.2rem;display:flex;flex-direction:column;align-items:center;width:100%}.confirm-btn{width:100%;max-width:200px;padding:.8rem;border-color:var(--text-color);border-radius:4px;background-color:#fff;color:var(--text-color);cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease}.confirm-btn:hover{background-color:darken(var(--accent-color));box-shadow:0 0 8px #4a9eff80}.error-message{color:red;margin-top:.5rem;font-size:.9rem;display:none;background:var(--background-color);padding:.5rem 1rem;border-radius:4px;font-size:.875rem;white-space:nowrap;box-shadow:0 2px 4px var(--shadow-color)}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-5px)}to{transform:translate(0)}}.shake{animation:shake .5s ease}body{margin:0;font-family:var(--font-family);background-color:var(--background-color);color:var(--text-color);line-height:1.6;position:relative}footer{background:#333;color:#fff;text-align:center;padding:1rem;bottom:0}.asset-tabs{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:2px solid #d3d3d3}.tab{padding:.5rem;background:#c6c6c6;border:none;border-radius:5px 5px 0 0;cursor:pointer;transition:all .3s ease;color:var(--text-color)}.tab:hover{background:var(--third-color);color:#fff;transform:translateY(-2px)}.tab.active{background:var(--third-color);color:#fff;border-bottom:2px solid var(--third-color)}.tab.disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.action-btn{display:inline-block;padding:10px 20px;background:var(--third-color);color:#fff;text-decoration:none;border-radius:5px;transition:background .3s;border:none;cursor:pointer;margin-top:20px}.action-btn:hover{background:var(--secondary-color)}